chore: update version to 1.6.1

fix: synchronize mobile submenu view with browser history for better navigation
fix: update email viewer styles to improve overflow handling
2026-05-04 12:34:53 +02:00 · 2026-05-04 12:31:51 +02:00 · 2026-05-04 12:27:44 +02:00 · 2026-05-04 12:09:58 +02:00 · 2026-05-04 11:25:49 +02:00 · 2026-05-04 11:24:05 +02:00
246 changed files with 25362 additions and 95780 deletions
@@ -71,11 +71,36 @@ JMAP_SERVER_URL=https://your-jmap-server.com

 # Directory for storing encrypted settings files (default: ./data/settings).
 # For Docker, the working directory is /app, so the default resolves to
-# /app/data/settings - mount a persistent volume there:
-#   volumes:
-#     - bulwark-settings:/app/data/settings
+# /app/data/settings - mount a persistent volume there (see docker-compose.yml).
 # SETTINGS_DATA_DIR=./data/settings

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

 # =============================================================================
@@ -50,6 +50,8 @@ jobs:
          context: .
          platforms: ${{ matrix.platform }}
          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            GIT_COMMIT=${{ github.sha }}
          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
          cache-from: type=gha,scope=${{ matrix.platform }}
          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
@@ -78,6 +78,8 @@ jobs:
          context: .
          platforms: ${{ matrix.platform }}
          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            GIT_COMMIT=${{ github.sha }}
          outputs: type=image,name=${{ needs.prepare.outputs.image_name }},push-by-digest=true,name-canonical=true,push=true
          cache-from: type=gha,scope=${{ matrix.platform }}
          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
@@ -1,5 +1,187 @@
 # Changelog

+## 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**: 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
+
+### Fixes
+
+- **Security**: Validate URLs before outbound fetch
+- **Calendar**: Prevent drag creation on touch events in the time grid
+- **Contacts**: Emit RFC 9553 name kinds and decode QUOTED-PRINTABLE in vCard import (#224, #187)
+- **Mail**: Hide preview line in compact density to match settings preview (#223)
+- **Proxy**: Inline matcher for Next.js proxy and drop unnecessary Node.js runtime config
+- **i18n**: Portuguese fixes for "ficheiro" and "contactos" variants
+
+## 1.5.1 (2026-04-25)
+
+### Features
+
+- **Stalwart**: OAuth auto-setup with dialog and validation for origin and issuer URLs
+- **Mail**: Right-click context menu on the folders sidebar
+- **Mail**: Replace folder `prompt()` calls with a proper modal dialog
+- **Calendar**: Add 'Today' button to the desktop calendar toolbar
+- **Junk**: Setting to show avatars in the Junk folder (off by default)
+
+### Fixes
+
+- **Admin**: Restore admin panel after Stalwart v0.16 REST API removal
+- **Viewer**: Restore broken viewer toolbar actions and improve the mobile menu (#220)
+- **Folders**: Stop flicker on background folder refresh
+- **Email**: Preserve search/filter on batch move and archive
+- **Email**: Preserve search/filter when moving emails via drag-drop
+- **i18n**: Improve Korean flag
+
+## 1.5.0 (2026-04-22)
+
+### Breaking Changes
+
+- **Self-service portal now needs Stalwart 0.16+**: Stalwart dropped its self-service HTTP API in 0.16.0 and replaced it with JMAP. Bulwark Webmail only talks to the new JMAP endpoint, so the self-service portal (account settings, app passwords, API keys) requires Stalwart 0.16 or newer. `STALWART_API_URL` is deprecated, these actions go through the normal JMAP session.
+
+### Features
+
+- **Stalwart**: Migrate Stalwart management API to JMAP `x:` methods for Stalwart 0.16
+- **Admin**: Add API Keys management and IP allowlist for App Passwords
+- **Contacts**: Revamp contact detail view with filters, photo, print, and duplicate actions
+- **Contacts**: Add contact activity component showing recent emails and upcoming events
+- **Contacts**: Add right-click context menu
+- **Contacts**: Group contacts by first letter with sticky section headers, toggleable in settings
+- **Calendar**: Support resizing events from the top edge
+- **Calendar**: Add timezone-aware formatting for event start times and update `utcEnd` on duration change
+- **Calendar**: Optimize layout of overlapping events
+- **Calendar**: Add collapsible details to calendar invitation banner
+- **Email**: Implement batch archiving and bulk moving of emails
+- **Email**: Show full folder path in move/drop toast
+- **Settings**: Reorganize settings into 6 groups with clearer tabs
+- **Navigation**: Add account-addition button to the navigation rail
+- **Mobile**: Streamline email viewer header layout
+- **Mobile**: Pass `isMobile` through calendar views and time-grid interactions
+
+### Fixes
+
+- **Mailbox**: Retry mailbox fetch on first login to handle lazy provisioning (#217)
+- **Mailbox**: Use fresh state in archive handling to avoid stale mailbox data
+- **Mailbox**: Improve error message on mailbox creation failure
+- **Auth**: Skip `checkAuth` on route change when already authenticated
+- **Auth**: Clean up unused imports and improve TOTP QR code rendering
+- **UI**: Align hover styles and selection-toggle target with focused item
+- **UI**: Read `matchMedia` synchronously on client to prevent layout flicker
+
+### Refactor
+
+- **Settings**: Remove Stalwart API URL configuration (now derived via JMAP)
+
+### Chore
+
+- **i18n**: Add missing translation keys
+- **Deps**: Bump dependencies to latest compatible versions
+
 ## 1.4.14 (2026-04-16)

 Thank you for your donations:
@@ -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/telemetry && chown -R nextjs:nodejs /app/data
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000
@@ -0,0 +1,124 @@
+# Features
+
+## Mail
+
+- Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding)
+- Gmail-style threading with inline expansion and an optional conversation toggle
+- Unified mailbox view across all connected accounts
+- Draft auto-save with identity preservation
+- Attachment upload, download, and inline preview; forgotten-attachment warning
+- 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
+- Quick reply, hover actions, sender avatars (favicon-based), and recipient popovers
+- Plain-text composer mode and Reply-To support
+- TNEF (`winmail.dat`) extraction and `message/rfc822` unwrapping
+- Folder management with icon picker, subfolders, and sidebar counts
+- Print directly from the viewer
+- Browser history sync for back/forward navigation
+
+## Calendar
+
+- Month, week, day, and agenda views with a mini-calendar sidebar and task list
+- Drag-to-reschedule, click-drag creation, and edge-resize with 15-minute snap
+- Recurring events with scoped edit/delete (this / this and following / all)
+- iMIP invitations on create and update (RFC 5545 / 6047), organizer/attendee UI, and RSVP with trust assessment
+- Inline calendar invitations in the email viewer – auto-detect `.ics`, RSVP, import
+- iCalendar import with preview, bulk create, and UID deduplication
+- iCal / webcal subscriptions with editing and batch import
+- Auto-generated birthday calendar from contacts
+- Virtual locations (video conference URLs) as first-class event fields
+- Task management with due dates, priority, and completion status
+- Shared calendars with CalDAV discovery and multi-account home resolution
+- Week numbers, event hover preview, notifications with sound picker
+- Real-time sync via JMAP push
+
+## Contacts
+
+- JMAP sync (RFC 9553 / 9610) with local fallback
+- Multiple address books with drag-and-drop between books
+- Contact groups with member management
+- vCard import/export (RFC 6350) with duplicate detection
+- Trusted senders stored in a dedicated JMAP address book
+- Autocomplete in the composer (To / Cc / Bcc)
+
+## Filters & Templates
+
+- Server-side filters via JMAP Sieve Scripts (RFC 9661)
+- Visual rule builder with expanded view; conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
+- Preserves rules authored in other clients
+- Raw Sieve editor with syntax validation
+- Vacation responder with date range scheduling
+- Reusable email templates with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, …)
+
+## Files
+
+- JMAP FileNode browser (Stalwart native cloud storage)
+- Streamed WebDAV PUT upload and folder upload with progress tracking
+- Dynamic upload limits based on server configuration
+- Grid and list views with sorting by name, size, or date
+- Previews for images, text, audio, and video
+- Clipboard operations (cut, copy, paste, duplicate), favorites, and recent files
+
+## Security & Privacy
+
+- External content blocked by default, with a trusted senders list
+- HTML sanitization via DOMPurify
+- S/MIME – manage certificates, sign, encrypt, decrypt, and verify; legacy 3DES / PBE support; per-account key isolation
+- SPF / DKIM / DMARC status indicators
+- OAuth2 / OIDC with PKCE (Keycloak, Authentik, or built-in), OAuth-only mode, OAuth app passwords, and non-interactive SSO for embedded deployments
+- TOTP two-factor authentication
+- Account security panel for password and 2FA management via the Stalwart admin API
+- Optional "Remember me" via AES-256-GCM encrypted httpOnly cookie
+- Enforced CSP with per-request nonce, SSRF redirect validation, PDF iframe sandbox, and IP spoofing prevention
+- Plugin hardening with dangerous-pattern detection and admin approval
+- Newsletter unsubscribe (RFC 2369)
+
+## Interface
+
+- Three-pane layout with resizable columns
+- Dark and light themes with intelligent email color transformation
+- Responsive desktop, tablet, and mobile layouts
+- Full keyboard navigation
+- Drag-and-drop email organization and tag assignment
+- Interactive guided tour for new users
+- Right-click context menus, toast notifications with undo
+- Customizable toolbar position, favicon, and login branding
+- Pinnable sidebar apps with drag-and-drop reordering
+- Encrypted settings sync across devices
+- Storage quota display
+- WCAG AA contrast, reduced-motion support, focus trap, and screen reader live regions
+
+## Internationalization
+
+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
+- 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
+- Shared folders across accounts
+- Optional custom JMAP endpoints on the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
+
+## Admin & Extensibility
+
+- Stalwart admin dashboard with dedicated policy sections
+- Plugin system – schema-driven config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event slots, and managed policy enforcement
+- 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`)
+- Bundled plugins including Jitsi Meet calendar integration
+
+## Operations
+
+- Progressive Web App with service worker, install prompt, and dynamic manifest
+- Automatic update check with server-side logging of new releases
+- Structured logging (`text` or `json`) with category-based levels
+- Release (`main`) and development (`dev`) Docker images on GHCR
+- Demo mode with fixture data – no mail server required
@@ -8,12 +8,11 @@

 # Bulwark Webmail

-A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/).<br/>
-Built with Next.js and the JMAP protocol.
+A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.art/), built with Next.js and the JMAP protocol.

 [![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg?logo=gnu&logoColor=white)](LICENSE)
 [![Discord](https://img.shields.io/discord/1482128142939455674?color=7289da&label=discord&logo=discord&logoColor=white)](https://discord.gg/tYCujymGrT)
-[![Version](https://img.shields.io/badge/version-1.4.14-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.6.1-green.svg?logo=git&logoColor=white)](CHANGELOG.md)
 [![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fbulwarkmail%2Fwebmail-blue?logo=docker&logoColor=white)](https://ghcr.io/bulwarkmail/webmail)

 </div>
@@ -22,228 +21,56 @@ Built with Next.js and the JMAP protocol.

 ## Screenshots

+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="screenshots/mail-dark.png" />
+  <img src="screenshots/mail-white.png" alt="Mail view" width="100%" />
+</picture>
+
 <table>
 <tr>
-<td width="50%">
-
-<img src="screenshots/inbox.png" width="100%" alt="Inbox - three-pane layout with sidebar, email list, and viewer (dark mode)">
-
-**Mail** - Three-pane layout with sidebar, email list, and viewer
-
-</td>
-<td width="50%">
-
-<img src="screenshots/calendar.png" width="100%" alt="Calendar">
-
-**Calendar** - Month, week, day, and agenda views with event management
-
-</td>
+<td width="50%"><img src="screenshots/calendar.png" alt="Calendar" /></td>
+<td width="50%"><img src="screenshots/contacts.png" alt="Contacts" /></td>
 </tr>
 <tr>
-<td width="50%">
-
-<img src="screenshots/contacts.png" width="100%" alt="Contacts">
-
-**Contacts** - Contact management with groups and vCard support
-
-</td>
-<td width="50%">
-
-<img src="screenshots/files.png" width="100%" alt="File browser">
-
-**Files** - Cloud file browser with upload, preview, and folder navigation
-
-</td>
+<td><sub><b>Calendar</b> – month, week, day, and agenda views with drag-to-reschedule, iMIP invitations, and CalDAV subscriptions.</sub></td>
+<td><sub><b>Contacts</b> – multiple address books, groups, vCard import/export, and autocomplete in the composer.</sub></td>
+</tr>
+<tr>
+<td><img src="screenshots/theme.png" alt="Themes" /></td>
+<td><img src="screenshots/plugins.png" alt="Plugins" /></td>
+</tr>
+<tr>
+<td><sub><b>Themes</b> – bundled color themes or upload your own as ZIP bundles; admins can enforce presets.</sub></td>
+<td><sub><b>Plugins</b> – extend the client with bundled or third-party plugins installed from a .zip file.</sub></td>
+</tr>
+<tr>
+<td><img src="screenshots/mail-white.png" alt="Light mode" /></td>
+<td><img src="screenshots/settings.png" alt="Settings" /></td>
+</tr>
+<tr>
+<td><sub><b>Light mode</b> – full theme support with intelligent color transformation for HTML emails.</sub></td>
+<td><sub><b>Settings</b> – appearance, identities, filters, templates, security, and more.</sub></td>
 </tr>
 </table>

-<details>
-<summary>More screenshots</summary>
-<table>
-<tr>
-<td width="50%">
+## Overview

-<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox - light mode">
+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:

-**Light mode** - Full theme support with intelligent color transformation
+- **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

-</td>
-<td width="50%">
+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.

-<img src="screenshots/settings.png" width="100%" alt="Settings">
-
-**Settings** - Appearance, identities, filters, templates, and more
-
-</td>
-</tr>
-<tr>
-<td width="50%">
-
-<img src="screenshots/login.png" width="100%" alt="Login page">
-
-**Login** - Configurable branding with OAuth2/OIDC and 2FA support
-
-</td>
-<td width="50%">
-</td>
-</tr>
-</table>
-</details>
-
-## Features
-
-### Mail
-
- **Read, compose, reply, reply-all, forward** with rich HTML rendering and a Tiptap-based rich text editor (inline image upload, drag-and-drop embedding)
- **Threading** - Gmail-style inline expansion with thread navigation; optional conversation threading toggle
- **Unified mailbox** - view emails across all accounts in a single list
- **Draft auto-save** with discard confirmation; full draft editing with identity preservation
- **Attachments** - upload, download, and inline preview; attachment-keyword warning if a file is forgotten
- **Search** - full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
- **Batch operations** - multi-select with checkboxes, archive, delete, move, tag
- **Archive modes** - archive directly or organize archived mail by year or month
- **Print** emails directly from the viewer
- **Answered/forwarded status icons** in email list and thread views
- **Multi-tag per email** with color labels, reorderable tags, and drag-and-drop tag assignment
- **Star/unstar** with configurable mark-as-read delay
- **Virtual scrolling** for large mailboxes
- **Quick reply** from the viewer
- **Hover actions** - configurable quick-action buttons on email rows with customizable placement
- **Sender avatars** - favicon-based with negative caching for performance
- **Recipient popover** for quick contact interaction
- **Plain text composer mode** and auto-select reply identity
- **Reply-to addresses** support in the composer
- **TNEF support** - extract Outlook `winmail.dat` message bodies and attachments automatically
- **message/rfc822 unwrapping** for embedded messages
- **Folder management** - create, rename, delete folders with icon picker and subfolder support
- **Tag counts** - unread and total counts displayed in sidebar
- **Browser history sync** - back/forward navigation mirrors mail view state
-
-### Calendar
-
- **Month, week, day, and agenda views** with mini-calendar sidebar and a dedicated task list view
- **Event hover preview** popover with configurable details
- **Drag-and-drop rescheduling**, click-drag or double-click creation, edge-resize (15-min snap)
- **Recurring events** with edit/delete scope (this / this and following / all) and client-side recurrence expansion
- **Participant scheduling** - iMIP invitations sent on create and update (RFC 5545/6047 compliant), organizer/attendee UI, RSVP with trust assessment
- **Inline calendar invitations** in email viewer - auto-detect `.ics`, RSVP, import
- **iCalendar import** with preview, bulk create, and UID deduplication
- **iCal / webcal subscriptions** with editing and batch import
- **Birthday calendar** - auto-generated from contacts
- **Virtual locations** - video conference URLs as first-class event fields
- **Task management** - create, edit, and track tasks with due dates, priority, and completion status; external CalDAV client detection (Thunderbird)
- **Shared calendars** with visual grouping in the sidebar
- **CalDAV discovery** with automatic calendar home resolution for multi-account setups
- **Week numbers** in mini-calendar sidebar
- **Notifications** with configurable sound, alert persistence, and sound picker with preview playback
- **Real-time sync** via JMAP push
-
-### Contacts
-
- **Contact management** with JMAP sync (RFC 9553/9610) and local fallback
- **Multiple address books** - create, rename, drag-and-drop between books, with editor picker in contact form
- **Collapsible sidebar** with address book grouping and bulk operations
- **Contact groups** with group expansion and member management
- **vCard import/export** (RFC 6350) with duplicate detection
- **Trusted senders** stored in a dedicated JMAP address book
- **Autocomplete** in composer (To/Cc/Bcc)
- **Bulk operations** - multi-select, delete, group add, export
-
-### Filters & Automation
-
- **Server-side email filters** via JMAP Sieve Scripts (RFC 9661)
- **Visual rule builder** - conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…) with an expanded visual view
- **External rule preservation** - rules authored in other clients are displayed and preserved
- **Raw Sieve editor** with syntax validation
- **Vacation responder** with date range scheduling and sidebar indicator
- **Email templates** - reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
-
-### Files
-
- **File browser** with JMAP FileNode cloud storage (Stalwart native)
- **Upload and download** files with progress tracking, folder upload, and streamed WebDAV PUT (no in-memory buffering)
- **Dynamic upload limits** - respects the server-configured maximum upload size
- **Folder navigation** with breadcrumb path and tree sidebar
- **Grid and list views** with sorting by name, size, or date
- **Clipboard operations** - cut, copy, paste, duplicate files
- **File preview** for images, text, audio, video, and more
- **Favorites and recent files** for quick access
- **Bulk operations** - multi-select, delete, move, download
-
-### Security & Privacy
-
- **External content blocked** by default - trusted senders list for auto-load
- **HTML sanitization** via DOMPurify with XSS prevention
- **S/MIME** - manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures; self-signed certificate detection; legacy 3DES / PBE support; per-account key isolation
- **SPF/DKIM/DMARC** status indicators
- **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode, OAuth app passwords, configurable scopes, and non-interactive SSO for embedded/iframe deployments
- **TOTP two-factor authentication**
- **Account security panel** - manage passwords and 2FA via Stalwart admin API
- **"Remember me"** - AES-256-GCM encrypted httpOnly cookie (opt-in)
- **Security headers** - enforced CSP with per-request nonce, X-Frame-Options, Referrer-Policy; SSRF redirect validation; PDF iframe sandbox; IP spoofing prevention
- **Plugin hardening** - dangerous-pattern detection, admin approval required, secure HTTP proxy API (no auth-header exposure)
- **Newsletter unsubscribe** (RFC 2369)
-
-### Interface
-
- **Three-pane layout** - sidebar, email list, viewer with resizable columns
- **Dark and light themes** with intelligent email color transformation
- **Always-light email rendering** option for problematic HTML messages in dark theme
- **Responsive** - desktop sidebar + mobile bottom tab bar with tablet support
- **Keyboard shortcuts** - full navigation without a mouse
- **Drag-and-drop** email organization between mailboxes and tag assignment
- **Interactive guided tour** - onboarding walkthrough for new users
- **Right-click context menus**, toast notifications with undo, form validation with shake feedback
- **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
- **Sidebar apps** - pin custom tools to the navigation rail with drag-and-drop reordering, mobile visibility toggles, and inline or new-tab launch modes
- **Settings sync** - preferences synchronized with the server (encrypted)
- **Storage quota** display
- **Version badge** in settings
- **Focused mode** with proper viewport bounds
- **Accessibility** - WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
-
-### Internationalization
-
-14 languages: English · Français · 日本語 · Español · Italiano · Deutsch · Nederlands · Português · Русский · 한국어 · Polski · Latviešu · 简体中文 · Українська
-
-Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
-
-### Identity Management
-
- **Multiple sender identities** with per-identity signatures
- **Automatic identity synchronization** and refresh to keep the identity manager aligned with server-side changes
- **Sub-addressing** - `user+tag@domain.com` with contextual tag suggestions
- **Identity badges** in viewer and email list
-
-### Multi-Account
-
- **Up to 5 simultaneous accounts** with instant switching and per-account session persistence
- **Account switcher** with connection status, default account selection, and per-account logout
- **Per-account settings** - encrypted settings storage with server-side sync
- **Shared folders** across accounts
- **Custom JMAP server endpoints** - optionally let users connect to any JMAP server from the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
-
-### Admin & Extensibility
-
- **Stalwart admin dashboard** - sidebar access with reorganized dashboard and dedicated policy sections
- **Plugin system** - schema-driven admin config UI, render and intercept hooks, `onAvatarResolve` and i18n APIs, calendar event action slots, forced enable/disable and managed policy enforcement
- **Themes** - upload, enforce, and manage admin-controlled themes with ZIP bundles
- **Extension marketplace** - browse and install plugins/themes from a configurable directory (`EXTENSION_DIRECTORY_URL`)
- **Bundled plugins** - Jitsi Meet calendar integration
-
-### Operations
-
- **Progressive Web App (PWA)** - installable with service worker, install prompt, and dynamic manifest (app name, description, icons, theme and background colors)
- **Automatic update check** - server logs when a newer release is available
- **Logging categories** with `text` or `json` formats for log aggregation
- **Docker images** - release (`main`) and development (`dev`) channels on GHCR
- **Demo mode** - try the webmail with fixture data for emails, calendars, contacts, files, filters, identities, and mailboxes - no mail server required
+Full feature list: **[FEATURES.md](FEATURES.md)**.

 ---

 ## Quick Start

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

 ```bash
 docker run -d -p 3000:3000 \
@@ -255,7 +82,7 @@ Or with Docker Compose:

 ```bash
 cp .env.example .env.local
-# Edit .env.local - set JMAP_SERVER_URL
+# Edit .env.local – set JMAP_SERVER_URL
 docker compose up -d
 ```

@@ -266,21 +93,21 @@ git clone https://github.com/bulwarkmail/webmail.git
 cd webmail
 npm install
 cp .env.example .env.local
-# Edit .env.local - set JMAP_SERVER_URL
+# Edit .env.local – set JMAP_SERVER_URL
 npm run build && npm start
 ```

 ### Development

 ```bash
-npm run dev        # Start dev server (mock JMAP server included)
-npm run typecheck  # Type checking
-npm run lint       # Linting
+npm run dev        # Dev server with a mock JMAP server
+npm run typecheck
+npm run lint
 ```

 ## Configuration

-Edit `.env.local`:
+All variables are evaluated at runtime, so Docker deployments can be reconfigured without rebuilding. Edit `.env.local`:

 ```env
 # Required
@@ -290,27 +117,25 @@ JMAP_SERVER_URL=https://mail.example.com
 APP_NAME=My Webmail
 ```

-All variables are **runtime** - Docker deployments can be configured without rebuilding.
-
 <details>
-<summary>Server Listen Address</summary>
+<summary>Server listen address</summary>

 ```env
 HOSTNAME=0.0.0.0    # Default; use "::" for IPv6
-PORT=3000            # Default listen port
+PORT=3000
 ```

 </details>

 <details>
-<summary>OAuth2/OIDC (SSO)</summary>
+<summary>OAuth2 / OIDC</summary>

 ```env
 OAUTH_ENABLED=true
 OAUTH_CLIENT_ID=webmail
 OAUTH_CLIENT_SECRET=              # optional, for confidential clients
-OAUTH_CLIENT_SECRET_FILE=         # Path to a file containing the client secret
-OAUTH_ISSUER_URL=                 # optional, for external IdPs (Keycloak, Authentik)
+OAUTH_CLIENT_SECRET_FILE=         # path to a file containing the secret
+OAUTH_ISSUER_URL=                 # optional, for external IdPs
 ```

 Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.well-known/openid-configuration`.
@@ -318,29 +143,28 @@ Endpoints are auto-discovered via `.well-known/oauth-authorization-server` or `.
 </details>

 <details>
-<summary>Remember Me & Settings Sync</summary>
+<summary>Session & settings sync</summary>

 ```env
-SESSION_SECRET=your-secret-key       # Generate with: openssl rand -base64 32
-SESSION_SECRET_FILE=/session-secret  # Path to a file containing the session secret
+SESSION_SECRET=                      # openssl rand -base64 32
+SESSION_SECRET_FILE=/session-secret  # path to a file containing the secret

-SETTINGS_SYNC_ENABLED=true           # Persist encrypted user settings on the server
-SETTINGS_DATA_DIR=./data/settings    # Storage location (mount a volume in Docker)
+SETTINGS_SYNC_ENABLED=true
+SETTINGS_DATA_DIR=./data/settings    # mount as a volume in Docker
 ```

-Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day expiry).
-Settings sync stores per-account preferences encrypted at rest and requires `SESSION_SECRET`.
+Credentials are encrypted with AES-256-GCM and stored in an httpOnly cookie (30-day expiry). Settings sync stores per-account preferences encrypted at rest and requires `SESSION_SECRET`.

 </details>

 <details>
-<summary>Custom JMAP Endpoint</summary>
+<summary>Custom JMAP endpoint</summary>

 ```env
-ALLOW_CUSTOM_JMAP_ENDPOINT=true      # Shows a "JMAP Server" field on login
+ALLOW_CUSTOM_JMAP_ENDPOINT=true
 ```

-Lets users connect to any JMAP-compatible server. External servers must CORS-allow the webmail origin.
+Shows a "JMAP Server" field on the login form. External servers must CORS-allow the webmail origin.

 </details>

@@ -349,13 +173,13 @@ Lets users connect to any JMAP-compatible server. External servers must CORS-all

 ```env
 APP_NAME=My Webmail
-APP_SHORT_NAME=Webmail               # Home-screen label on mobile
-APP_DESCRIPTION=Your personal mail   # Shown during PWA install
+APP_SHORT_NAME=Webmail
+APP_DESCRIPTION=Your personal mail

 FAVICON_URL=/branding/favicon.svg
-PWA_ICON_URL=/branding/icon.svg      # Falls back to FAVICON_URL
-PWA_THEME_COLOR=#3b82f6              # Browser chrome color
-PWA_BACKGROUND_COLOR=#ffffff         # PWA splash background
+PWA_ICON_URL=/branding/icon.svg      # falls back to FAVICON_URL
+PWA_THEME_COLOR=#3b82f6
+PWA_BACKGROUND_COLOR=#ffffff

 APP_LOGO_LIGHT_URL=/branding/logo-light.svg
 APP_LOGO_DARK_URL=/branding/logo-dark.svg
@@ -371,7 +195,7 @@ LOGIN_PRIVACY_POLICY_URL=https://example.com/privacy
 </details>

 <details>
-<summary>Extension Directory</summary>
+<summary>Extension directory</summary>

 ```env
 EXTENSION_DIRECTORY_URL=https://extensions.bulwarkmail.org
@@ -382,17 +206,37 @@ Enables the admin marketplace for browsing and installing plugins and themes.
 </details>

 <details>
-<summary>Stalwart Integration & Logging</summary>
+<summary>Stalwart integration & logging</summary>

 ```env
-STALWART_FEATURES=true               # Password change, sieve filters, etc.
+STALWART_FEATURES=true               # password change, Sieve filters, etc.

 LOG_FORMAT=text                      # "text" or "json"
-LOG_LEVEL=info                       # "error", "warn", "info", "debug"
+LOG_LEVEL=info                       # error | warn | info | debug
 ```

 </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                  |
@@ -423,19 +267,16 @@ LOG_LEVEL=info                       # "error", "warn", "info", "debug"

 ## Why Stalwart?

-[Stalwart](https://github.com/stalwartlabs/mail-server) is a mail server written in Rust with **native JMAP support** - not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single binary. Self-hosted, no third-party dependencies.
+[Stalwart](https://github.com/stalwartlabs/mail-server) is a Rust mail server with native JMAP support – not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single self-hosted binary with no third-party dependencies.

 ## Contributing

-See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+See [CONTRIBUTING.md](CONTRIBUTING.md).

 ## License

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

 ## Acknowledgments

-Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for doing most of the groundwork that this project builds upon.
+Thanks to [root-fr/jmap-webmail](https://github.com/root-fr/jmap-webmail/) and [@ma2t](https://github.com/ma2t) for the groundwork this project builds upon.
@@ -1 +1 @@
-1.4.14
+1.6.1
@@ -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";
@@ -47,7 +48,11 @@ import { getEventStartDate } from "@/lib/calendar-utils";
 import { useTaskStore } from "@/stores/task-store";
 import { useContactStore } from "@/stores/contact-store";
 import { cn } from "@/lib/utils";
-import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
+import type { Calendar, CalendarEvent, CalendarParticipant, CalendarRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
+import { CreateCalendarModal } from "@/components/calendar/create-calendar-modal";
 import { getUserParticipantId } from "@/lib/calendar-participants";
 import { generateBirthdayEvents, createBirthdayCalendar, BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { debug } from "@/lib/debug";
@@ -72,7 +77,8 @@ export default function CalendarPage() {
    calendars, events, selectedDate, viewMode, selectedCalendarIds,
    isLoading, isLoadingEvents, supportsCalendar, error,
    fetchCalendars, fetchEvents, createEvent, updateEvent, deleteEvent, rsvpEvent,
-    setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
+    setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar, shareCalendar,
+    removeCalendar, clearCalendarEvents,
    refreshAllSubscriptions, icalSubscriptions,
  } = useCalendarStore();
  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview, showBirthdayCalendar, birthdayCalendarColor, updateSetting } = useSettingsStore();
@@ -91,9 +97,15 @@ export default function CalendarPage() {
  const [showImportModal, setShowImportModal] = useState(false);
  const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
  const [editingSubscription, setEditingSubscription] = useState<string | null>(null);
+  const [sharingCalendarId, setSharingCalendarId] = useState<string | null>(null);
+  const [defaultCalendarIdForCreate, setDefaultCalendarIdForCreate] = useState<string | undefined>(undefined);
+  const [showCreateCalendar, setShowCreateCalendar] = useState(false);
+  const { dialogProps: confirmDialogProps, confirm: confirmAction } = useConfirmDialog();
+  const tMgmt = useTranslations("calendar.management");
  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);
@@ -126,8 +138,15 @@ export default function CalendarPage() {
    }
  }, [events, detailEvent]);

-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
    checkAuth().finally(() => {
      setInitialCheckDone(true);
    });
@@ -309,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]);
@@ -378,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;
@@ -944,6 +979,7 @@ export default function CalendarPage() {
              onHoverEvent={handleHoverEvent}
              onHoverLeave={handleHoverLeave}
              onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
              onCreateAtTime={openCreateModal}
              firstDayOfWeek={firstDayOfWeek}
              isMobile={isMobile}
@@ -961,6 +997,7 @@ export default function CalendarPage() {
              onHoverEvent={handleHoverEvent}
              onHoverLeave={handleHoverLeave}
              onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
              onCreateAtTime={openCreateModal}
              firstDayOfWeek={firstDayOfWeek}
              timeFormat={timeFormat}
@@ -980,6 +1017,7 @@ export default function CalendarPage() {
              onHoverEvent={handleHoverEvent}
              onHoverLeave={handleHoverLeave}
              onContextMenuEvent={handleContextMenuEvent}
+              onContextMenuEmpty={handleContextMenuEmpty}
              onCreateAtTime={openCreateModal}
              timeFormat={timeFormat}
              isMobile={isMobile}
@@ -1095,6 +1133,42 @@ export default function CalendarPage() {
                }
                updateCalendar(client, calendarId, { color });
              } : undefined}
+              onShareCalendar={client ? (cal) => setSharingCalendarId(cal.id) : undefined}
+              onCreateEvent={(cal: Calendar) => {
+                setDefaultCalendarIdForCreate(cal.id);
+                openCreateModal();
+              }}
+              onClearCalendar={client ? async (cal: Calendar) => {
+                const ok = await confirmAction({
+                  title: tMgmt("clear_events"),
+                  message: tMgmt("confirm_clear", { name: cal.name }),
+                  variant: "destructive",
+                  confirmText: tMgmt("clear_events"),
+                });
+                if (!ok) return;
+                try {
+                  const count = await clearCalendarEvents(client, cal.id);
+                  toast.success(tMgmt("events_cleared", { count }));
+                } catch {
+                  toast.error(tMgmt("error_clear"));
+                }
+              } : undefined}
+              onDeleteCalendar={client ? async (cal: Calendar) => {
+                const ok = await confirmAction({
+                  title: tMgmt("delete"),
+                  message: tMgmt("confirm_delete", { name: cal.name }),
+                  variant: "destructive",
+                  confirmText: tMgmt("delete"),
+                });
+                if (!ok) return;
+                try {
+                  await removeCalendar(client, cal.id);
+                  toast.success(tMgmt("calendar_deleted"));
+                } catch {
+                  toast.error(tMgmt("error_delete"));
+                }
+              } : undefined}
+              onCreateCalendar={client ? () => setShowCreateCalendar(true) : undefined}
              onSubscribe={() => setShowSubscriptionModal(true)}
              onEditSubscription={(subId) => setEditingSubscription(subId)}
              client={client}
@@ -1158,11 +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); }}
+                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); setDefaultCalendarIdForCreate(undefined); setDefaultModalAllDay(false); }}
                onPreviewChange={setPendingPreview}
                currentUserEmails={currentUserEmails}
                isMobile={false}
@@ -1228,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}
@@ -1254,11 +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); }}
+          onClose={() => { setShowEventModal(false); setEditEvent(null); setDefaultCalendarIdForCreate(undefined); setDefaultModalAllDay(false); }}
          currentUserEmails={currentUserEmails}
          isMobile={true}
        />
@@ -1298,6 +1408,33 @@ export default function CalendarPage() {
        onSelect={handleScopeSelect}
        onClose={() => setPendingScopeAction(null)}
      />
+
+      <ConfirmDialog {...confirmDialogProps} />
+
+      {showCreateCalendar && client && (
+        <CreateCalendarModal
+          client={client}
+          onClose={() => setShowCreateCalendar(false)}
+        />
+      )}
+
+      {sharingCalendarId && client && (() => {
+        const cal = allCalendars.find((c) => c.id === sharingCalendarId);
+        if (!cal) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="calendar"
+            collectionName={cal.name}
+            shareWith={cal.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareCalendar(client, cal.id, principalId, rights as CalendarRights | null);
+            }}
+            onClose={() => setSharingCalendarId(null)}
+          />
+        );
+      })()}
    </div>
  );
 }
@@ -27,7 +27,8 @@ import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { useIsMobile } from "@/hooks/use-media-query";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
-import type { ContactCard, AddressBook } from "@/lib/jmap/types";
+import type { ContactCard, AddressBook, AddressBookRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";

 type View =
  | "list"
@@ -75,6 +76,8 @@ export default function ContactsPage() {
    bulkAddToGroup,
    moveContactToAddressBook,
    renameAddressBook,
+    removeAddressBook,
+    shareAddressBook,
    renameKeyword,
    importContacts,
  } = useContactStore();
@@ -83,6 +86,8 @@ export default function ContactsPage() {
  const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
  const [showImportDialog, setShowImportDialog] = useState(false);
  const [renamingAddressBook, setRenamingAddressBook] = useState<AddressBook | null>(null);
+  const [sharingAddressBookId, setSharingAddressBookId] = useState<string | null>(null);
+  const [defaultBookIdForCreate, setDefaultBookIdForCreate] = useState<string | undefined>(undefined);
  const [renamingKeyword, setRenamingKeyword] = useState<string | null>(null);
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
  const hasFetched = useRef(false);
@@ -98,13 +103,20 @@ export default function ContactsPage() {

  // Panel resize state - contact list
  const [listWidth, setListWidth] = useState(() => {
-    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 320; } catch { return 320; }
+    try { const v = localStorage.getItem("contacts-list-width"); return v ? Number(v) : 384; } catch { return 384; }
  });
  const [isListResizing, setIsListResizing] = useState(false);
-  const listDragStartWidth = useRef(320);
+  const listDragStartWidth = useRef(384);

-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
    checkAuth().finally(() => {
      setInitialCheckDone(true);
    });
@@ -172,21 +184,6 @@ export default function ContactsPage() {
    return getGroupMembers(activeCategory.groupId);
  }, [activeCategory, individuals, getGroupMembers]);

-  // Label for the current category
-  const categoryLabel = useMemo(() => {
-    if (activeCategory === "all") return t("tabs.all");
-    if (activeCategory === "uncategorized") return t("no_category");
-    if ("addressBookId" in activeCategory) {
-      const book = addressBooks.find(b => b.id === activeCategory.addressBookId);
-      return book?.name || t("tabs.all");
-    }
-    if ("keyword" in activeCategory) {
-      return activeCategory.keyword;
-    }
-    const group = contacts.find(c => c.id === activeCategory.groupId);
-    return group ? getContactDisplayName(group) : t("tabs.all");
-  }, [activeCategory, contacts, addressBooks, t]);
-
  const handleSelectCategory = useCallback((category: ContactCategory) => {
    setActiveCategory(category);
    clearSelection();
@@ -306,6 +303,24 @@ export default function ContactsPage() {
    setView("bulk-add-to-group");
  }, [clearSelection, toggleContactSelection, groups.length]);

+  const handleDuplicateContact = useCallback(async (source: ContactCard) => {
+    const { id: _id, created: _created, updated: _updated, ...rest } = source;
+    void _id; void _created; void _updated;
+    const data: Partial<ContactCard> = JSON.parse(JSON.stringify(rest));
+    if (supportsSync && client) {
+      await createContact(client, data);
+      toast.success(t("toast.created"));
+    } else {
+      const localContact: ContactCard = {
+        id: `local-${generateUUID()}`,
+        addressBookIds: data.addressBookIds || {},
+        ...data,
+      };
+      addLocalContact(localContact);
+      toast.success(t("toast.created"));
+    }
+  }, [supportsSync, client, createContact, addLocalContact, t]);
+
  const handleSaveNew = useCallback(async (data: Partial<ContactCard>) => {
    if (supportsSync && client) {
      await createContact(client, data);
@@ -319,6 +334,7 @@ export default function ContactsPage() {
      addLocalContact(localContact);
      toast.success(t("toast.created"));
    }
+    setDefaultBookIdForCreate(undefined);
    setView("list");
  }, [supportsSync, client, createContact, addLocalContact, t]);

@@ -336,6 +352,7 @@ export default function ContactsPage() {
  }, [supportsSync, client, selectedContact, updateContact, updateLocalContact, t]);

  const handleCancel = () => {
+    setDefaultBookIdForCreate(undefined);
    if (view === "group-create" || view === "group-edit") {
      setView(selectedGroup ? "group-detail" : "list");
    } else if (view === "bulk-add-to-group") {
@@ -507,7 +524,7 @@ export default function ContactsPage() {
  const renderRightPanel = () => {
    switch (view) {
      case "create":
-        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} defaultAddressBookId={defaultBookIdForCreate} onSave={handleSaveNew} onCancel={handleCancel} />;

      case "edit":
        if (!selectedContact) return null;
@@ -607,6 +624,16 @@ export default function ContactsPage() {
            contact={selectedContact}
            onEdit={handleEdit}
            onDelete={handleDelete}
+            onAddToGroup={
+              selectedContact
+                ? () => handleAddContactToGroup(selectedContact.id)
+                : undefined
+            }
+            onDuplicate={
+              selectedContact
+                ? () => void handleDuplicateContact(selectedContact)
+                : undefined
+            }
            isMobile={isMobile}
          />
        );
@@ -670,6 +697,26 @@ export default function ContactsPage() {
                      onDropContacts={handleDropContacts}
                      onDropContactsToCategory={handleDropContactsToCategory}
                      onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
+                      onShareAddressBook={client ? (book) => setSharingAddressBookId(book.id) : undefined}
+                      onCreateContactInBook={(book) => {
+                        setDefaultBookIdForCreate(book.id);
+                        handleCreateNew();
+                      }}
+                      onDeleteAddressBook={client ? async (book) => {
+                        const ok = await confirmDialog({
+                          title: t("address_books.delete"),
+                          message: t("address_books.confirm_delete", { name: book.name }),
+                          variant: "destructive",
+                          confirmText: t("address_books.delete"),
+                        });
+                        if (!ok) return;
+                        try {
+                          await removeAddressBook(client, book);
+                          toast.success(t("address_books.deleted"));
+                        } catch {
+                          toast.error(t("address_books.delete_failed"));
+                        }
+                      } : undefined}
                      onRenameKeyword={(kw) => setRenamingKeyword(kw)}
                    />
                  </div>
@@ -702,7 +749,6 @@ export default function ContactsPage() {
                  onSearchChange={setSearchQuery}
                  onSelectContact={handleSelectContact}
                  onCreateNew={handleCreateNew}
-                  categoryLabel={categoryLabel}
                  className="flex-1"
                  selectedContactIds={selectedContactIds}
                  onToggleSelection={toggleContactSelection}
@@ -726,7 +772,7 @@ export default function ContactsPage() {
                    setIsListResizing(false);
                    localStorage.setItem("contacts-list-width", String(listWidth));
                  }}
-                  onDoubleClick={() => { setListWidth(320); localStorage.setItem("contacts-list-width", "320"); }}
+                  onDoubleClick={() => { setListWidth(384); localStorage.setItem("contacts-list-width", "384"); }}
                />
              )}
            </>
@@ -819,6 +865,23 @@ export default function ContactsPage() {
          </div>
        </div>
      )}
+      {sharingAddressBookId && client && (() => {
+        const book = addressBooks.find((b) => b.id === sharingAddressBookId);
+        if (!book) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="addressBook"
+            collectionName={book.name}
+            shareWith={book.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareAddressBook(client, book, principalId, rights as AddressBookRights | null);
+            }}
+            onClose={() => setSharingAddressBookId(null)}
+          />
+        );
+      })()}
    </div>
  );
 }
@@ -105,8 +105,15 @@ export default function FilesPage() {

  const detailResource = detailName ? resources.find(r => r.name === detailName) || null : null;

-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
    checkAuth().finally(() => {
      setInitialCheckDone(true);
    });
@@ -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,7 @@ 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";

 const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "0.0.0";
 const GIT_COMMIT = process.env.NEXT_PUBLIC_GIT_COMMIT || "unknown";
@@ -28,7 +30,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 +44,49 @@ function VersionBadge() {
    });
  };

+  const isRed = banner?.variant === "red";
+  const triggerText = !banner
+    ? `v${APP_VERSION}`
+    : banner.severity === "security"
+      ? "Security update available"
+      : banner.severity === "deprecated"
+        ? "Version no longer supported"
+        : "New version available";
+
+  const triggerColor = !banner
+    ? "text-muted-foreground/40"
+    : isRed
+      ? "text-red-600/80 dark:text-red-400/80 hover:text-red-600 dark:hover:text-red-400"
+      : "text-amber-600/80 dark:text-amber-400/80 hover:text-amber-600 dark:hover:text-amber-400";
+
+  const triggerClass = cn(
+    "peer text-center text-xs transition-colors",
+    triggerColor,
+    banner?.url ? "cursor-pointer underline-offset-2 hover:underline" : "cursor-default",
+  );
+
+  const trigger = banner?.url ? (
+    <a href={banner.url} target="_blank" rel="noopener noreferrer" className={triggerClass}>
+      {triggerText}
+    </a>
+  ) : (
+    <p className={triggerClass}>{triggerText}</p>
+  );
+
  return (
    <div className="relative inline-flex justify-center">
-      <p className="peer text-center text-xs text-muted-foreground/40 cursor-default">
-        v{APP_VERSION}
-      </p>
+      {trigger}
      <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-3 py-2 rounded-md bg-popover text-popover-foreground text-xs shadow-md border border-border opacity-0 peer-hover:opacity-100 hover:opacity-100 transition-opacity whitespace-nowrap z-10">
        <div className="flex items-center gap-2">
          <div className="space-y-0.5">
            <p>Version: <span className="font-medium">{APP_VERSION}</span></p>
            <p>Build: <span className="font-medium">{GIT_COMMIT}</span></p>
+            {banner?.latest && (
+              <p>Latest: <span className="font-medium">{banner.latest}</span></p>
+            )}
+            {banner?.advisory && (
+              <p className="text-red-500 dark:text-red-400">{banner.advisory}</p>
+            )}
          </div>
          <button
            onClick={handleCopy}
@@ -411,7 +451,8 @@ export default function LoginPage() {
    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`;

    sessionStorage.setItem("oauth_code_verifier", verifier);
    sessionStorage.setItem("oauth_state", state);
@@ -420,6 +461,16 @@ export default function LoginPage() {
      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);
@@ -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";
@@ -8,12 +9,13 @@ import { EmailViewer } from "@/components/email/email-viewer";
 import { EmailComposer } from "@/components/email/email-composer";
 import type { ComposerDraftData } from "@/components/email/email-composer";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
-import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-header";
+import { MobileHeader } from "@/components/layout/mobile-header";
 import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
 import { useAccountStore } from "@/stores/account-store";
 import type { UnifiedAccountClient } from "@/lib/unified-mailbox";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { useEmailStore } from "@/stores/email-store";
+import { toast } from "@/stores/toast-store";
 import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useContactStore } from "@/stores/contact-store";
@@ -23,6 +25,7 @@ import { useDeviceDetection } from "@/hooks/use-media-query";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
+import { usePromptDialog } from "@/hooks/use-prompt-dialog";
 import { useBrowserNavigation, type NavSnapshot } from "@/hooks/use-browser-navigation";
 import { debug } from "@/lib/debug";
 import { playNotificationSound } from "@/lib/notification-sound";
@@ -35,6 +38,7 @@ import {
  ComposerErrorFallback,
 } from "@/components/error";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { PromptDialog } from "@/components/ui/prompt-dialog";
 import { TotpReauthDialog } from "@/components/totp-reauth-dialog";
 import { DragDropProvider } from "@/contexts/drag-drop-context";
 import { isFilterEmpty, activeFilterCount } from "@/lib/jmap/search-utils";
@@ -48,12 +52,33 @@ 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 { 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 type { EmailReadView } from "@/lib/plugin-types";
+
+function emailToReadView(email: Email): EmailReadView {
+  return {
+    id: email.id,
+    threadId: email.threadId,
+    mailboxIds: Object.keys(email.mailboxIds || {}).filter(k => email.mailboxIds[k]),
+    from: (email.from || []).map(a => ({ name: a.name || '', email: a.email })),
+    to: (email.to || []).map(a => ({ name: a.name || '', email: a.email })),
+    cc: (email.cc || []).map(a => ({ name: a.name || '', email: a.email })),
+    subject: email.subject || '',
+    receivedAt: email.receivedAt,
+    isRead: !!email.keywords?.['$seen'],
+    isFlagged: !!email.keywords?.['$flagged'],
+    hasAttachment: email.hasAttachment,
+    preview: email.preview || '',
+    keywords: Object.keys(email.keywords || {}).filter(k => email.keywords[k]),
+  };
+}


 export default function Home() {
@@ -67,6 +92,7 @@ export default function Home() {
  const [pendingDraft, setPendingDraft] = useState<ComposerDraftData | null>(null);
  const [composerSessionId, setComposerSessionId] = useState(0);
  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
+  const { dialogProps: promptDialogProps, prompt: promptDialog } = usePromptDialog();
  const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
  const [initialCheckDone, setInitialCheckDone] = useState(() => useAuthStore.getState().isAuthenticated && !!useAuthStore.getState().client);
  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
@@ -110,6 +136,88 @@ 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();
@@ -134,6 +242,7 @@ export default function Home() {
    deleteEmail,
    markAsRead,
    toggleStar,
+    setEmailKeywordsLocal,
    moveToMailbox,
    moveThreadToMailbox,
    searchEmails,
@@ -162,6 +271,16 @@ export default function Home() {
    fetchUnifiedEmails: fetchUnifiedEmailsAction,
    refreshUnifiedCounts,
    exitUnifiedView,
+    emptyMailbox,
+    markMailboxAsRead,
+    createMailbox,
+    renameMailbox,
+    deleteMailbox,
+    batchDelete,
+    batchArchive,
+    batchMarkAsRead,
+    batchMarkAsSpam,
+    batchUndoSpam,
  } = useEmailStore();

  const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
@@ -344,27 +463,77 @@ export default function Home() {
    onToggleStar: () => {
      if (selectedEmail) handleToggleStar();
    },
-    onArchive: () => {
-      if (selectedEmail) handleArchive();
+    onArchive: async () => {
+      if (selectedEmailIds.size > 0 && client) {
+        try {
+          await batchArchive(client);
+        } catch (error) {
+          console.error("Failed to batch archive:", error);
+        }
+      } else if (selectedEmail) {
+        handleArchive();
+      }
    },
-    onDelete: () => {
-      if (selectedEmail) handleDelete();
+    onDelete: async () => {
+      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: () => {
-      if (selectedEmail) {
-        // Check if we're in junk folder
-        const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
-        const isInJunk = currentMailbox?.role === 'junk';
+    onToggleSpam: async () => {
+      const currentMailbox = mailboxes.find(m => m.id === selectedMailbox);
+      const isInJunk = currentMailbox?.role === 'junk';
+      if (selectedEmailIds.size > 0 && client) {
+        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 {
@@ -399,13 +568,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,
  });

@@ -455,8 +625,15 @@ export default function Home() {
    document.title = title;
  }, [showComposer, composerMode, selectedEmail, selectedMailbox, mailboxes, t, appName]);

-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
    checkAuth().finally(() => {
      setInitialCheckDone(true);
    });
@@ -493,7 +670,10 @@ export default function Home() {
  // Load mailboxes and emails when authenticated (only if not already loaded)
  useEffect(() => {
    if (isAuthenticated && client && mailboxes.length === 0) {
-      const loadData = async () => {
+      let retryTimer: ReturnType<typeof setTimeout> | null = null;
+      let cancelled = false;
+
+      const loadData = async (attempt = 1) => {
        try {
          // First fetch mailboxes and quota (inbox will be auto-selected in fetchMailboxes)
          await Promise.all([
@@ -505,6 +685,15 @@ export default function Home() {
          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`);
+            retryTimer = setTimeout(() => loadData(attempt + 1), delay);
+            return;
+          }
+
          // Fetch emails for the selected mailbox
          if (selectedMailboxId) {
            await fetchEmails(client, selectedMailboxId);
@@ -538,6 +727,12 @@ export default function Home() {
        }
      };
      loadData();
+
+      return () => {
+        cancelled = true;
+        if (retryTimer) clearTimeout(retryTimer);
+        client.closePushNotifications();
+      };
    }

    // Cleanup push notifications on unmount
@@ -561,11 +756,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 (!selectedEmail.bodyValues) {
+    // If the email lacks bodyValues, it was auto-selected from the list and needs full content.
+    // 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;
@@ -660,6 +894,8 @@ export default function Home() {
    fromName?: string;
    identityId?: string;
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
+    inReplyTo?: string[];
+    references?: string[];
  }) => {
    if (!client) return;

@@ -667,7 +903,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);
      setShowComposer(false);

      // Mark the original email with $answered or $forwarded keyword
@@ -702,7 +938,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);
@@ -761,13 +1005,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');
@@ -799,13 +1059,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');
      }
    }
  };
@@ -813,8 +1084,11 @@ export default function Home() {
  const handleArchive = async (emailToArchive: Email | null = selectedEmail) => {
    if (!client || !emailToArchive) return;

-    // Find archive mailbox
-    const archiveMailbox = mailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
+    // Read fresh mailboxes from the store – batch archive calls this in a loop,
+    // and each iteration needs to see folders created by prior iterations.
+    const currentMailboxes = useEmailStore.getState().mailboxes;
+
+    const archiveMailbox = currentMailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
    if (!archiveMailbox) return;

    const { archiveMode } = useSettingsStore.getState();
@@ -823,14 +1097,12 @@ export default function Home() {
      if (archiveMode === 'single') {
        await moveThreadToMailbox(client, emailToArchive.id, archiveMailbox.id);
      } else {
-        // Determine year/month from the email's received date
        const emailDate = new Date(emailToArchive.receivedAt);
        const year = emailDate.getFullYear().toString();
        const month = (emailDate.getMonth() + 1).toString().padStart(2, '0');
        const archiveId = archiveMailbox.originalId || archiveMailbox.id;

-        // Find or create year subfolder under archive
-        let yearMailbox = mailboxes.find(
+        let yearMailbox = currentMailboxes.find(
          m => m.name === year && m.parentId === archiveId
        );
        if (!yearMailbox) {
@@ -841,9 +1113,9 @@ export default function Home() {
        if (archiveMode === 'year') {
          await moveThreadToMailbox(client, emailToArchive.id, yearMailbox.id);
        } else {
-          // archiveMode === 'month' - find or create month subfolder under year
          const yearId = yearMailbox.originalId || yearMailbox.id;
-          let monthMailbox = mailboxes.find(
+          const afterYear = useEmailStore.getState().mailboxes;
+          let monthMailbox = afterYear.find(
            m => m.name === month && m.parentId === yearId
          );
          if (!monthMailbox) {
@@ -952,11 +1224,9 @@ export default function Home() {
      // Update email keywords via JMAP
      await client.updateEmailKeywords(emailId, keywords);

-      // Update local state
-      selectEmail(email.id === selectedEmail?.id ? { ...email, keywords } : selectedEmail);
-
-      // Refresh emails list to show color in list
-      await fetchEmails(client, selectedMailbox);
+      // Patch the email in place so the list keeps its scroll/pagination state
+      // instead of being reset to the first page by a full refetch.
+      setEmailKeywordsLocal(emailId, keywords);

      // Refresh tag counts
      fetchTagCounts(client);
@@ -1071,6 +1341,197 @@ export default function Home() {
    }
  };

+  const tCtxMenu = t;
+
+  const handleMarkFolderRead = async (mailboxId: string) => {
+    if (!client) return;
+    try {
+      const count = await markMailboxAsRead(client, mailboxId);
+      await fetchMailboxes(client);
+      if (selectedMailbox === mailboxId) await fetchEmails(client, mailboxId);
+      if (count > 0) {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_marked_read_count', { count }));
+      } else {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_already_read'));
+      }
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_mark_read'));
+    }
+  };
+
+  const handleMarkFolderTreeRead = async (mailboxId: string) => {
+    if (!client) return;
+    const collectIds = (rootId: string): string[] => {
+      const ids: string[] = [rootId];
+      const stack = [rootId];
+      while (stack.length > 0) {
+        const current = stack.pop()!;
+        for (const mb of mailboxes) {
+          if (mb.parentId === current) {
+            ids.push(mb.id);
+            stack.push(mb.id);
+          }
+        }
+      }
+      return ids;
+    };
+
+    try {
+      const ids = collectIds(mailboxId);
+      let total = 0;
+      for (const id of ids) {
+        total += await markMailboxAsRead(client, id);
+      }
+      await fetchMailboxes(client);
+      if (selectedMailbox && ids.includes(selectedMailbox)) await fetchEmails(client, selectedMailbox);
+      if (total > 0) {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_marked_read_count', { count: total }));
+      } else {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_already_read'));
+      }
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_mark_read'));
+    }
+  };
+
+  const handleMarkAllFoldersRead = async () => {
+    if (!client) return;
+
+    const confirmed = await confirmDialog({
+      title: tCtxMenu('mailbox_context_menu.mark_all_confirm_title'),
+      message: tCtxMenu('mailbox_context_menu.mark_all_confirm_message'),
+      confirmText: tCtxMenu('mailbox_context_menu.mark_all_folders_read'),
+      variant: "default",
+    });
+    if (!confirmed) return;
+
+    try {
+      const total = await client.markAllAsRead();
+      await fetchMailboxes(client);
+      if (selectedMailbox) await fetchEmails(client, selectedMailbox);
+      if (total > 0) {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_marked_read_count', { count: total }));
+      } else {
+        toast.success(tCtxMenu('mailbox_context_menu.toast_already_read'));
+      }
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_mark_read'));
+    }
+  };
+
+  const handleEmptyFolderFromContextMenu = async (mailboxId: string) => {
+    if (!client) return;
+    const mailbox = mailboxes.find(mb => mb.id === mailboxId);
+    if (!mailbox) return;
+
+    const confirmed = await confirmDialog({
+      title: tCtxMenu('email_list.empty_folder.confirm_title'),
+      message: tCtxMenu('email_list.empty_folder.confirm_message'),
+      confirmText: tCtxMenu('email_list.empty_folder.confirm_button'),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await emptyMailbox(client, mailboxId);
+      toast.success(tCtxMenu('mailbox_context_menu.toast_emptied'));
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_empty'));
+    }
+  };
+
+  const handleCreateSubfolderFromContextMenu = async (parentId: string) => {
+    if (!client) return;
+    const name = await promptDialog({
+      title: tCtxMenu('mailbox_context_menu.new_subfolder'),
+      message: tCtxMenu('mailbox_context_menu.prompt_new_subfolder'),
+      placeholder: tCtxMenu('mailbox_context_menu.placeholder_folder_name'),
+      confirmText: tCtxMenu('mailbox_context_menu.create'),
+    });
+    if (!name) return;
+    try {
+      await createMailbox(client, name, parentId);
+      toast.success(tCtxMenu('mailbox_context_menu.toast_folder_created'));
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_create'));
+    }
+  };
+
+  const handleCreateFolderFromContextMenu = async () => {
+    if (!client) return;
+    const name = await promptDialog({
+      title: tCtxMenu('mailbox_context_menu.new_folder'),
+      message: tCtxMenu('mailbox_context_menu.prompt_new_folder'),
+      placeholder: tCtxMenu('mailbox_context_menu.placeholder_folder_name'),
+      confirmText: tCtxMenu('mailbox_context_menu.create'),
+    });
+    if (!name) return;
+    try {
+      await createMailbox(client, name);
+      toast.success(tCtxMenu('mailbox_context_menu.toast_folder_created'));
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_create'));
+    }
+  };
+
+  const handleRenameFolderFromContextMenu = async (mailboxId: string) => {
+    if (!client) return;
+    const mailbox = mailboxes.find(mb => mb.id === mailboxId);
+    if (!mailbox) return;
+    const name = await promptDialog({
+      title: tCtxMenu('mailbox_context_menu.rename'),
+      message: tCtxMenu('mailbox_context_menu.prompt_rename'),
+      placeholder: tCtxMenu('mailbox_context_menu.placeholder_folder_name'),
+      defaultValue: mailbox.name,
+      confirmText: tCtxMenu('mailbox_context_menu.rename_confirm'),
+    });
+    if (!name || name === mailbox.name) return;
+    try {
+      await renameMailbox(client, mailboxId, name);
+      toast.success(tCtxMenu('mailbox_context_menu.toast_folder_renamed'));
+    } catch {
+      toast.error(tCtxMenu('mailbox_context_menu.toast_error_rename'));
+    }
+  };
+
+  const handleDeleteFolderFromContextMenu = async (mailboxId: string) => {
+    if (!client) return;
+    const mailbox = mailboxes.find(mb => mb.id === mailboxId);
+    if (!mailbox) return;
+
+    const confirmed = await confirmDialog({
+      title: tCtxMenu('mailbox_context_menu.delete_confirm_title'),
+      message: tCtxMenu('mailbox_context_menu.delete_confirm_message', { name: mailbox.name }),
+      confirmText: tCtxMenu('mailbox_context_menu.delete_folder'),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await deleteMailbox(client, mailboxId);
+      toast.success(tCtxMenu('mailbox_context_menu.toast_folder_deleted'));
+    } catch (err: unknown) {
+      const jmapType = (err as Error & { jmapType?: string })?.jmapType;
+      if (jmapType === 'mailboxHasChild') {
+        toast.error(tCtxMenu('mailbox_context_menu.toast_error_delete_has_children'));
+      } else if (jmapType === 'mailboxHasEmail') {
+        toast.error(tCtxMenu('mailbox_context_menu.toast_error_delete_has_email'));
+      } else {
+        toast.error(tCtxMenu('mailbox_context_menu.toast_error_delete'));
+      }
+    }
+  };
+
+  const handleRefreshMailboxes = async () => {
+    if (!client) return;
+    try {
+      await fetchMailboxes(client);
+      if (selectedMailbox) await fetchEmails(client, selectedMailbox);
+    } catch {
+      // silent
+    }
+  };
+
  const handleLogout = logout;

  const handleSearch = async (query: string) => {
@@ -1167,6 +1628,12 @@ export default function Home() {

    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,
@@ -1178,7 +1645,11 @@ export default function Home() {
      primaryIdentity?.id,
      primaryIdentity?.email,
      undefined,
-      primaryIdentity?.name || undefined
+      primaryIdentity?.name || undefined,
+      undefined,
+      undefined,
+      threading?.inReplyTo,
+      threading?.references,
    );

    // Mark the original email as answered
@@ -1220,7 +1691,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
@@ -1237,7 +1714,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)
@@ -1269,15 +1745,11 @@ export default function Home() {
  };

  // Handle back navigation from viewer on mobile.
-  // Delegate to the browser history stack so this button is equivalent to
-  // the OS back button / mouse back button - popstate then restores the
-  // previous snapshot via handleNavRestore. The viewer is only reachable
-  // from a state that pushed history, so back() always lands on an app entry.
+  // Reset to list state directly. We can't just call window.history.back()
+  // because the nav hook pushes a new entry for every email the user opens,
+  // so history.back() would pop to the previous email rather than the list.
+  // The OS / hardware back button is still wired through popstate → handleNavRestore.
  const handleMobileBack = () => {
-    if (typeof window !== 'undefined') {
-      window.history.back();
-      return;
-    }
    if (conversationThread) {
      setConversationThread(null);
      setConversationEmails([]);
@@ -1432,6 +1904,15 @@ export default function Home() {
              onMailboxSelect={handleMailboxSelect}
              onTagSelect={handleTagSelect}
              onUnreadFilterClick={handleUnreadFilterClick}
+              onMarkFolderRead={handleMarkFolderRead}
+              onMarkFolderTreeRead={handleMarkFolderTreeRead}
+              onMarkAllFoldersRead={handleMarkAllFoldersRead}
+              onEmptyFolder={handleEmptyFolderFromContextMenu}
+              onCreateSubfolder={handleCreateSubfolderFromContextMenu}
+              onCreateFolder={handleCreateFolderFromContextMenu}
+              onRenameFolder={handleRenameFolderFromContextMenu}
+              onDeleteFolder={handleDeleteFolderFromContextMenu}
+              onRefreshMailboxes={handleRefreshMailboxes}
              onCompose={() => {
                setComposerMode('compose');
                setShowComposer(true);
@@ -1492,9 +1973,12 @@ export default function Home() {
                        } else {
                          selectAllEmails();
                        }
-                      } else {
-                        // Enter selection mode by selecting the first email
-                        if (emails.length > 0) toggleEmailSelection(emails[0].id);
+                      } else if (emails.length > 0) {
+                        const currentId = selectedEmail?.id;
+                        const target = currentId && emails.some((e) => e.id === currentId)
+                          ? currentId
+                          : emails[0].id;
+                        toggleEmailSelection(target);
                      }
                    }}
                    className={cn(
@@ -1821,6 +2305,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}
@@ -1898,14 +2385,6 @@ export default function Home() {
              />
            ) : (
              <>
-                {/* Mobile Header for Viewer */}
-                {isMobile && activeView === "viewer" && (
-                  <MobileViewerHeader
-                    subject={selectedEmail?.subject}
-                    onBack={handleMobileBack}
-                  />
-                )}
-
                <ErrorBoundary fallback={EmailViewerErrorFallback}>
                  <EmailViewer
                    email={selectedEmail}
@@ -1913,12 +2392,12 @@ export default function Home() {
                    onReply={handleReply}
                    onReplyAll={handleReplyAll}
                    onForward={handleForward}
-                    onDelete={handleDelete}
+                    onDelete={() => handleDelete()}
                    onArchive={() => handleArchive()}
                    onToggleStar={handleToggleStar}
                    onSetColorTag={handleSetColorTag}
-                    onMarkAsSpam={handleMarkAsSpam}
-                    onUndoSpam={handleUndoSpam}
+                    onMarkAsSpam={() => handleMarkAsSpam()}
+                    onUndoSpam={() => handleUndoSpam()}
                    onMarkAsRead={async (emailId, read) => {
                      if (client) {
                        await markAsRead(client, emailId, read);
@@ -1988,6 +2467,7 @@ export default function Home() {

        <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
        <ConfirmDialog {...confirmDialogProps} />
+        <PromptDialog {...promptDialogProps} />
        <TotpReauthDialog />
      </div>
    </DragDropProvider>
@@ -9,7 +9,6 @@ import {
  LogOut,
  Settings as SettingsIcon,
  Palette,
-  Mail,
  User,
  Shield,
  UserPen,
@@ -20,17 +19,27 @@ import {
  FolderOpen,
  Tags,
  HardDrive,
-  Wrench,
  BookUser,
  KeyRound,
  PanelLeftClose,
  Bell,
  Puzzle,
+  LayoutGrid,
+  BookOpen,
+  PenLine,
+  EyeOff,
+  Languages,
+  Info,
+  Bug,
  type LucideIcon,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { AppearanceSettings } from '@/components/settings/appearance-settings';
-import { EmailSettings } from '@/components/settings/email-settings';
+import { LayoutSettings } from '@/components/settings/layout-settings';
+import { LanguageSettings } from '@/components/settings/language-settings';
+import { ReadingSettings } from '@/components/settings/reading-settings';
+import { ComposingSettings } from '@/components/settings/composing-settings';
+import { ContentSendersSettings } from '@/components/settings/content-senders-settings';
 import { AccountSettings } from '@/components/settings/account-settings';
 import { IdentitySettings } from '@/components/settings/identity-settings';
 import { VacationSettings } from '@/components/settings/vacation-settings';
@@ -39,7 +48,8 @@ import { CalendarManagementSettings } from '@/components/settings/calendar-manag
 import { AddressBookManagementSettings } from '@/components/settings/address-book-management-settings';
 import { FilterSettings } from '@/components/settings/filter-settings';
 import { TemplateSettings } from '@/components/settings/template-settings';
-import { AdvancedSettings } from '@/components/settings/advanced-settings';
+import { AboutDataSettings } from '@/components/settings/about-data-settings';
+import { DebugSettings } from '@/components/settings/debug-settings';
 import { FolderSettings } from '@/components/settings/folder-settings';
 import { KeywordSettings } from '@/components/settings/keyword-settings';
 import { AccountSecuritySettings } from '@/components/settings/account-security-settings';
@@ -62,8 +72,33 @@ import { useConfig } from '@/hooks/use-config';
 import { usePolicyStore } from '@/stores/policy-store';
 import { cn } from '@/lib/utils';

-type Tab = 'appearance' | 'email' | 'notifications' | 'account' | 'security' | 'identities' | 'encryption' | 'vacation' | 'calendar' | 'contacts' | 'filters' | 'templates' | 'folders' | 'keywords' | 'files' | 'sidebar_apps' | 'themes' | 'plugins' | 'advanced';
-type TabGroup = 'general' | 'account' | 'organization' | 'apps' | 'system';
+type Tab =
+  | 'account'
+  | 'language'
+  | 'notifications'
+  | 'appearance'
+  | 'layout'
+  | 'reading'
+  | 'composing'
+  | 'identities'
+  | 'vacation'
+  | 'filters'
+  | 'templates'
+  | 'folders'
+  | 'keywords'
+  | 'security'
+  | 'encryption'
+  | 'content_senders'
+  | 'calendar'
+  | 'contacts'
+  | 'files'
+  | 'sidebar_apps'
+  | 'about_data'
+  | 'themes'
+  | 'plugins'
+  | 'debug';
+
+type TabGroup = 'general' | 'appearance' | 'mail' | 'privacy' | 'apps' | 'advanced';

 interface TabDef {
  id: Tab;
@@ -74,28 +109,54 @@ interface TabDef {
 }

 const tabIcons: Record<Tab, LucideIcon> = {
-  appearance: Palette,
-  email: Mail,
-  notifications: Bell,
  account: User,
-  security: Shield,
+  language: Languages,
+  notifications: Bell,
+  appearance: Palette,
+  layout: LayoutGrid,
+  reading: BookOpen,
+  composing: PenLine,
  identities: UserPen,
-  encryption: KeyRound,
  vacation: PalmtreeIcon,
-  calendar: Calendar,
-  contacts: BookUser,
  filters: Filter,
  templates: FileText,
  folders: FolderOpen,
  keywords: Tags,
+  security: Shield,
+  encryption: KeyRound,
+  content_senders: EyeOff,
+  calendar: Calendar,
+  contacts: BookUser,
  files: HardDrive,
  sidebar_apps: PanelLeftClose,
+  about_data: Info,
  themes: Palette,
  plugins: Puzzle,
-  advanced: Wrench,
+  debug: Bug,
 };

-const tabGroupOrder: TabGroup[] = ['general', 'account', 'organization', 'apps', 'system'];
+const tabGroupOrder: TabGroup[] = ['general', 'appearance', 'mail', 'privacy', 'apps', 'advanced'];
+
+// Map legacy tab IDs to current ones; runs once on read of localStorage.
+const LEGACY_TAB_MAP: Record<string, Tab> = {
+  email: 'reading',
+  advanced: 'about_data',
+};
+
+function readPersistedTab(): Tab {
+  try {
+    const saved = localStorage.getItem('settings-active-tab');
+    if (!saved) return 'appearance';
+    if (saved in LEGACY_TAB_MAP) {
+      const migrated = LEGACY_TAB_MAP[saved];
+      try { localStorage.setItem('settings-active-tab', migrated); } catch { /* ignore */ }
+      return migrated;
+    }
+    return saved as Tab;
+  } catch {
+    return 'appearance';
+  }
+}

 export default function SettingsPage() {
  const router = useRouter();
@@ -107,13 +168,7 @@ export default function SettingsPage() {
  const { quota, isPushConnected } = useEmailStore();
  const { stalwartFeaturesEnabled } = useConfig();
  const { isFeatureEnabled } = usePolicyStore();
-  const [activeTab, setActiveTab] = useState<Tab>(() => {
-    try {
-      const saved = localStorage.getItem('settings-active-tab');
-      if (saved) return saved as Tab;
-    } catch { /* ignore */ }
-    return 'appearance';
-  });
+  const [activeTab, setActiveTab] = useState<Tab>(readPersistedTab);
  const [mobileShowContent, setMobileShowContent] = useState(false);
  const isDesktop = useIsDesktop();

@@ -124,21 +179,28 @@ export default function SettingsPage() {
  const [isResizing, setIsResizing] = useState(false);
  const dragStartWidth = useRef(256);

-  // Check auth on mount
+  // Check auth on mount – skip when already authenticated so that navigating
+  // between routes doesn't retrigger checkAuth's transient `{ client: null,
+  // isLoading: true }` reset, which was flashing the spinner on every nav.
  useEffect(() => {
+    const state = useAuthStore.getState();
+    if (state.isAuthenticated && state.client) {
+      setInitialCheckDone(true);
+      return;
+    }
    checkAuth().finally(() => {
      setInitialCheckDone(true);
    });
  }, [checkAuth]);

-  // Listen for tab change events from child components
+  // Listen for tab change events from child components (with legacy migration)
  useEffect(() => {
    const handler = (e: Event) => {
-      const tab = (e as CustomEvent).detail as Tab;
-      if (tab) {
-        setActiveTab(tab);
-        try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
-      }
+      const raw = (e as CustomEvent).detail as string;
+      if (!raw) return;
+      const tab = (LEGACY_TAB_MAP[raw] ?? raw) as Tab;
+      setActiveTab(tab);
+      try { localStorage.setItem('settings-active-tab', tab); } catch { /* ignore */ }
    };
    window.addEventListener('settings-tab-change', handler);
    return () => window.removeEventListener('settings-tab-change', handler);
@@ -151,6 +213,22 @@ 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]);
+
  if (!isAuthenticated) {
    return null;
  }
@@ -161,25 +239,41 @@ export default function SettingsPage() {
  const supportsFiles = client?.supportsFiles() ?? false;

  const tabs: TabDef[] = [
-    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'general' },
-    { id: 'email', label: t('tabs.email'), icon: tabIcons.email, group: 'general' },
+    // General
+    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'general' },
+    { id: 'language', label: t('tabs.language'), icon: tabIcons.language, group: 'general' },
    { id: 'notifications', label: t('tabs.notifications'), icon: tabIcons.notifications, group: 'general' },
-    { id: 'account', label: t('tabs.account'), icon: tabIcons.account, group: 'account' },
-    ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'account' as TabGroup }] : []),
-    { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'account' },
-    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'account' as TabGroup }] : []),
-    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'account' as TabGroup }] : []),
-    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'organization' as TabGroup }] : []),
-    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'organization' as TabGroup }] : []),
-    { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'organization' },
-    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'organization' as TabGroup }] : []),
+
+    // Appearance
+    { id: 'appearance', label: t('tabs.appearance'), icon: tabIcons.appearance, group: 'appearance' },
+    { id: 'layout', label: t('tabs.layout'), icon: tabIcons.layout, group: 'appearance' },
+
+    // Mail
+    { id: 'reading', label: t('tabs.reading'), icon: tabIcons.reading, group: 'mail' },
+    { id: 'composing', label: t('tabs.composing'), icon: tabIcons.composing, group: 'mail' },
+    { id: 'identities', label: t('tabs.identities'), icon: tabIcons.identities, group: 'mail' },
+    ...(supportsVacation ? [{ id: 'vacation' as Tab, label: t('tabs.vacation'), icon: tabIcons.vacation, group: 'mail' as TabGroup }] : []),
+    ...(supportsSieve ? [{ id: 'filters' as Tab, label: t('tabs.filters'), icon: tabIcons.filters, group: 'mail' as TabGroup }] : []),
+    ...(isFeatureEnabled('templatesEnabled') ? [{ id: 'templates' as Tab, label: t('tabs.templates'), icon: tabIcons.templates, group: 'mail' as TabGroup }] : []),
+    { id: 'folders', label: t('tabs.folders'), icon: tabIcons.folders, group: 'mail' },
+    ...(isFeatureEnabled('customKeywordsEnabled') ? [{ id: 'keywords' as Tab, label: t('tabs.keywords'), icon: tabIcons.keywords, group: 'mail' as TabGroup }] : []),
+
+    // Privacy & Security
+    ...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'privacy' as TabGroup }] : []),
+    ...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'privacy' as TabGroup }] : []),
+    { id: 'content_senders', label: t('tabs.content_senders'), icon: tabIcons.content_senders, group: 'privacy' },
+
+    // Apps
    ...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
    { id: 'contacts', label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' },
    ...(supportsFiles ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
    ...(isFeatureEnabled('sidebarAppsEnabled') ? [{ id: 'sidebar_apps' as Tab, label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' as TabGroup }] : []),
-    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'system' as TabGroup, experimental: true }] : []),
-    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'system' as TabGroup, experimental: true }] : []),
-    { id: 'advanced', label: t('tabs.advanced'), icon: tabIcons.advanced, group: 'system' },
+
+    // Advanced
+    { id: 'about_data', label: t('tabs.about_data'), icon: tabIcons.about_data, group: 'advanced' },
+    ...(isFeatureEnabled('themesEnabled') ? [{ id: 'themes' as Tab, label: 'Themes', icon: tabIcons.themes, group: 'advanced' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('pluginsEnabled') ? [{ id: 'plugins' as Tab, label: 'Plugins', icon: tabIcons.plugins, group: 'advanced' as TabGroup, experimental: true }] : []),
+    ...(isFeatureEnabled('debugModeEnabled') ? [{ id: 'debug' as Tab, label: t('tabs.debug'), icon: tabIcons.debug, group: 'advanced' as TabGroup }] : []),
  ];

  // Group tabs by category
@@ -191,6 +285,10 @@ export default function SettingsPage() {
    }))
    .filter((g) => g.items.length > 0);

+  // 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';
+
  const handleTabSelect = (tabId: Tab) => {
    setActiveTab(tabId);
    try { localStorage.setItem('settings-active-tab', tabId); } catch { /* ignore */ }
@@ -199,44 +297,47 @@ export default function SettingsPage() {
    }
  };

-  const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label ?? '';
+  const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';

  const renderTabContent = () => (
    <>
-      {activeTab === 'appearance' && <AppearanceSettings />}
-      {activeTab === 'email' && <EmailSettings />}
-      {activeTab === 'notifications' && <NotificationSettings />}
-      {activeTab === 'account' && <AccountSettings />}
-      {activeTab === 'security' && <AccountSecuritySettings />}
-      {activeTab === 'identities' && <IdentitySettings />}
-      {activeTab === 'encryption' && <SmimeSettings />}
-      {activeTab === 'vacation' && <VacationSettings />}
-      {activeTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
-      {activeTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
-      {activeTab === 'filters' && <FilterSettings />}
-      {activeTab === 'templates' && <TemplateSettings />}
-      {activeTab === 'folders' && <FolderSettings />}
-      {activeTab === 'keywords' && <KeywordSettings />}
-      {activeTab === 'files' && <FilesSettingsComponent />}
-      {activeTab === 'sidebar_apps' && <SidebarAppsSettings />}
-      {activeTab === 'themes' && <ThemesSettings />}
-      {activeTab === 'plugins' && <PluginsSettings />}
-      {activeTab === 'advanced' && <AdvancedSettings />}
+      {effectiveActiveTab === 'account' && <AccountSettings />}
+      {effectiveActiveTab === 'language' && <LanguageSettings />}
+      {effectiveActiveTab === 'notifications' && <NotificationSettings />}
+      {effectiveActiveTab === 'appearance' && <AppearanceSettings />}
+      {effectiveActiveTab === 'layout' && <LayoutSettings />}
+      {effectiveActiveTab === 'reading' && <ReadingSettings />}
+      {effectiveActiveTab === 'composing' && <ComposingSettings />}
+      {effectiveActiveTab === 'identities' && <IdentitySettings />}
+      {effectiveActiveTab === 'vacation' && <VacationSettings />}
+      {effectiveActiveTab === 'filters' && <FilterSettings />}
+      {effectiveActiveTab === 'templates' && <TemplateSettings />}
+      {effectiveActiveTab === 'folders' && <FolderSettings />}
+      {effectiveActiveTab === 'keywords' && <KeywordSettings />}
+      {effectiveActiveTab === 'security' && <AccountSecuritySettings />}
+      {effectiveActiveTab === 'encryption' && <SmimeSettings />}
+      {effectiveActiveTab === 'content_senders' && <ContentSendersSettings />}
+      {effectiveActiveTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
+      {effectiveActiveTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
+      {effectiveActiveTab === 'files' && <FilesSettingsComponent />}
+      {effectiveActiveTab === 'sidebar_apps' && <SidebarAppsSettings />}
+      {effectiveActiveTab === 'about_data' && <AboutDataSettings />}
+      {effectiveActiveTab === 'themes' && <ThemesSettings />}
+      {effectiveActiveTab === 'plugins' && <PluginsSettings />}
+      {effectiveActiveTab === 'debug' && <DebugSettings />}
    </>
  );

  // Mobile layout
  if (!isDesktop) {
-    // Mobile: show content view
    if (mobileShowContent) {
      return (
        <div className="flex flex-col h-dvh bg-background">
-          {/* Mobile content header */}
          <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
            <Button
              variant="ghost"
              size="icon"
-              onClick={() => setMobileShowContent(false)}
+              onClick={() => window.history.back()}
              className="h-10 w-10"
            >
              <ArrowLeft className="w-5 h-5" />
@@ -244,14 +345,10 @@ export default function SettingsPage() {
            <h1 className="font-semibold text-lg truncate">{activeTabLabel}</h1>
          </div>

-          {/* Content */}
          <div className="flex-1 overflow-y-auto p-4">
-            <div className="bg-card border border-border rounded-lg p-4">
-              {renderTabContent()}
-            </div>
+            {renderTabContent()}
          </div>

-          {/* Bottom Navigation */}
          <NavigationRail
            orientation="horizontal"
            onManageApps={handleManageApps}
@@ -264,10 +361,8 @@ export default function SettingsPage() {
      );
    }

-    // Mobile: show tab list
    return (
      <div className="flex flex-col h-dvh bg-background">
-        {/* Mobile header */}
        <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
          <Button
            variant="ghost"
@@ -283,7 +378,6 @@ export default function SettingsPage() {
          </div>
        </div>

-        {/* Tab list */}
        <div className="flex-1 overflow-y-auto">
          <div className="py-2">
            {groupedTabs.map((group, groupIndex) => (
@@ -319,7 +413,6 @@ export default function SettingsPage() {
            ))}
          </div>

-          {/* Logout */}
          <div className="border-t border-border px-5 py-3">
            <button
              onClick={logout}
@@ -331,7 +424,6 @@ export default function SettingsPage() {
          </div>
        </div>

-        {/* Bottom Navigation */}
        <NavigationRail
          orientation="horizontal"
          onManageApps={handleManageApps}
@@ -347,7 +439,6 @@ export default function SettingsPage() {
  // Desktop layout
  return (
    <div className="flex h-dvh bg-background">
-      {/* Navigation Rail */}
      <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
        <NavigationRail
          collapsed
@@ -366,7 +457,6 @@ export default function SettingsPage() {
      )}
      {!inlineApp && (
      <>
-      {/* Settings Sidebar */}
      <div
        className={cn(
          "border-r border-border bg-secondary flex flex-col",
@@ -374,7 +464,6 @@ export default function SettingsPage() {
        )}
        style={{ width: `${settingsSidebarWidth}px` }}
      >
-        {/* Header */}
        <div className="p-4 border-b border-border">
          <Button
            variant="ghost"
@@ -387,7 +476,6 @@ export default function SettingsPage() {
          </Button>
        </div>

-        {/* Tabs */}
        <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
          <div className="px-2 space-y-0.5">
            {groupedTabs.map((group, groupIndex) => (
@@ -406,14 +494,14 @@ export default function SettingsPage() {
                      onClick={() => setActiveTab(tab.id)}
                      className={cn(
                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
-                        activeTab === tab.id
+                        effectiveActiveTab === tab.id
                          ? 'bg-accent text-accent-foreground font-medium'
                          : 'hover:bg-muted text-foreground'
                      )}
                    >
                      <Icon className={cn(
                        'w-4 h-4 shrink-0',
-                        activeTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
+                        effectiveActiveTab === tab.id ? 'text-accent-foreground' : 'text-muted-foreground'
                      )} />
                      {tab.label}
                      {tab.experimental && (
@@ -430,7 +518,6 @@ export default function SettingsPage() {
        </div>
      </div>

-      {/* Sidebar resize handle */}
      <ResizeHandle
        onResizeStart={() => { dragStartWidth.current = settingsSidebarWidth; setIsResizing(true); }}
        onResize={(delta) => setSettingsSidebarWidth(Math.max(180, Math.min(400, dragStartWidth.current + delta)))}
@@ -441,21 +528,9 @@ export default function SettingsPage() {
        onDoubleClick={() => { setSettingsSidebarWidth(256); localStorage.setItem('settings-sidebar-width', '256'); }}
      />

-      {/* Settings Content */}
      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-3xl mx-auto p-8">
-          {/* Page Header */}
-          <div className="mb-6">
-            <div className="flex items-center gap-2.5 mb-2">
-              <SettingsIcon className="w-6 h-6 text-muted-foreground" />
-              <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
-            </div>
-          </div>
-
-          {/* Active Tab Content */}
-          <div className="bg-card border border-border rounded-lg p-6">
-            {renderTabContent()}
-          </div>
+        <div className="max-w-3xl mx-auto px-6 py-6">
+          {renderTabContent()}
        </div>
      </div>
      </>
@@ -1,7 +1,7 @@
 'use client';

 import { useEffect, useState } from 'react';
-import { Save, Loader2, RotateCcw } from 'lucide-react';
+import { Save, Loader2, RotateCcw, Sparkles } from 'lucide-react';
 import { apiFetch } from '@/lib/browser-navigation';

 interface ConfigEntry {
@@ -69,6 +69,58 @@ export default function AdminAuthPage() {
    }
  }

+  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) {
@@ -77,8 +129,8 @@ export default function AdminAuthPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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>
@@ -100,6 +152,119 @@ export default function AdminAuthPage() {
        </div>
      )}

+      {/* Auto-setup */}
+      <div className="rounded-lg border border-primary/30 bg-primary/5 p-4">
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4 text-primary shrink-0" />
+              <h3 className="text-sm font-medium text-foreground">Auto-configure OAuth (Stalwart)</h3>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Registers an OAuth client on the connected Stalwart server, generates a client secret, and saves the settings here.
+              Requires your Stalwart account to have admin permissions.
+            </p>
+          </div>
+          <button
+            onClick={openSetupDialog}
+            disabled={setupRunning}
+            className="shrink-0 inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+          >
+            {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+            {setupRunning ? 'Configuring…' : 'Set up automagically'}
+          </button>
+        </div>
+      </div>
+
+      {/* Auto-setup dialog */}
+      {setupOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="oauth-setup-title"
+          onClick={(e) => { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
+        >
+          <div className="w-full max-w-md rounded-lg border border-border bg-background shadow-xl">
+            <div className="px-5 py-4 border-b border-border">
+              <h3 id="oauth-setup-title" className="text-base font-medium text-foreground">Auto-configure OAuth</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
+              </p>
+            </div>
+            <div className="px-5 py-4 space-y-4">
+              <div>
+                <label htmlFor="setup-origin" className="block text-xs font-medium text-foreground mb-1">
+                  Webmail origin
+                </label>
+                <input
+                  id="setup-origin"
+                  type="url"
+                  value={setupOrigin}
+                  onChange={(e) => setSetupOrigin(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://webmail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Used to register redirect URIs (one per locale: <code>{setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/&lt;locale&gt;/auth/callback</code>) on Stalwart.
+                </p>
+                {!setupOriginValid && setupOrigin.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="setup-issuer" className="block text-xs font-medium text-foreground mb-1">
+                  Stalwart issuer URL
+                </label>
+                <input
+                  id="setup-issuer"
+                  type="url"
+                  value={setupIssuer}
+                  onChange={(e) => setSetupIssuer(e.target.value)}
+                  disabled={setupRunning}
+                  placeholder="https://mail.example.com"
+                  className="w-full h-9 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <p className="text-[11px] text-muted-foreground mt-1">
+                  Where Stalwart serves <code>/.well-known/oauth-authorization-server</code>. Saved as <code>OAUTH_ISSUER_URL</code>. Pre-filled from your JMAP server URL.
+                </p>
+                {!setupIssuerValid && setupIssuer.length > 0 && (
+                  <p className="text-[11px] text-destructive mt-1">Must be like https://host with no path.</p>
+                )}
+              </div>
+              <label className="inline-flex items-center gap-2 text-xs text-foreground select-none cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={setupOauthOnly}
+                  onChange={(e) => setSetupOauthOnly(e.target.checked)}
+                  className="h-3.5 w-3.5 rounded border-input"
+                  disabled={setupRunning}
+                />
+                Also enable “OAuth only” (hide password login)
+              </label>
+            </div>
+            <div className="px-5 py-3 border-t border-border flex items-center justify-end gap-2 bg-muted/30 rounded-b-lg">
+              <button
+                onClick={() => setSetupOpen(false)}
+                disabled={setupRunning}
+                className="h-9 px-3 rounded-md border border-input bg-background text-sm text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAutoSetup}
+                disabled={setupRunning || !setupOriginValid || !setupIssuerValid}
+                className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-all shadow-sm"
+              >
+                {setupRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+                {setupRunning ? 'Configuring…' : 'Configure'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
      {/* OAuth */}
      <Section title="OAuth / OpenID Connect">
        <Toggle label="OAuth Enabled" configKey="oauthEnabled" value={currentValue('oauthEnabled') as boolean} source={config.oauthEnabled?.source} onChange={handleChange} onRevert={handleRevert} />
@@ -149,7 +314,7 @@ function Text({ label, description, configKey, value, source, onChange, onRevert
  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="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>
@@ -157,11 +322,11 @@ function Text({ label, description, configKey, value, source, onChange, onRevert
        </div>
        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
      </div>
-      <div className="flex items-center gap-2">
+      <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-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" />
+          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="text-muted-foreground hover:text-foreground" title="Revert"><RotateCcw className="w-3.5 h-3.5" /></button>
+          <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>
@@ -173,7 +338,7 @@ function Toggle({ label, description, configKey, value, source, onChange, onReve
  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="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>
@@ -181,7 +346,7 @@ function Toggle({ label, description, configKey, value, source, onChange, onReve
        </div>
        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
      </div>
-      <div className="flex items-center gap-2">
+      <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]'}`} />
@@ -199,12 +364,12 @@ function Select({ label, configKey, value, source, options, onChange, onRevert }
  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">
+    <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">
+      <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>)}
@@ -162,8 +162,8 @@ export default function AdminBrandingPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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>
@@ -193,22 +193,22 @@ export default function AdminBrandingPage() {
        <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 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 whitespace-nowrap">{field.label}</label>
+                  <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">
+                <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-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"
+                    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; }}
@@ -270,20 +270,20 @@ export default function AdminBrandingPage() {
        </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 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 whitespace-nowrap">{field.label}</label>
+                <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">
+              <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-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"
+                  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">
@@ -14,12 +14,16 @@ 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';
@@ -27,6 +31,7 @@ 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 = [
@@ -56,6 +61,8 @@ const NAV_GROUPS = [
  {
    label: 'System',
    items: [
+      { href: '/admin/version', label: 'Version', icon: Package },
+      { href: '/admin/telemetry', label: 'Telemetry', icon: Activity },
      { href: '/admin/logs', label: 'Audit Log', icon: ScrollText },
    ],
  },
@@ -65,62 +72,89 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
  const router = useRouter();
  const pathname = usePathname();
  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(() => {
-    if (pathname !== '/admin/login') {
-      checkAuth();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    setMobileNavOpen(false);
  }, [pathname]);

-  function getJmapHeaders(): Record<string, string> {
-    return getActiveAccountSlotHeaders();
-  }
+  useEffect(() => {
+    if (!mobileNavOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [mobileNavOpen]);

-  async function checkAuth() {
-    try {
-      const jmapHeaders = getJmapHeaders();
-      const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
-      const data = await res.json();
+  useEffect(() => {
+    if (pathname === '/admin/login') return;
+    let cancelled = false;

-      const stalwartAdmin = data.stalwartAdmin === true;
-      setIsStalwartAdmin(stalwartAdmin);
+    async function checkAuth() {
+      try {
+        const jmapHeaders = getActiveAccountSlotHeaders();
+        const res = await apiFetch('/api/admin/auth', { headers: jmapHeaders });
+        const data = await res.json();
+        if (cancelled) return;

-      // If neither password-based admin nor Stalwart admin, redirect away
-      if (!data.enabled && !stalwartAdmin) {
-        router.replace('/');
-        return;
-      }
+        const stalwartAdmin = data.stalwartAdmin === true;
+        setIsStalwartAdmin(stalwartAdmin);

-      if (data.authenticated) {
-        setAuthenticated(true);
-        return;
-      }
+        // If neither password-based admin nor Stalwart admin, redirect away
+        if (!data.enabled && !stalwartAdmin) {
+          router.replace('/');
+          return;
+        }

-      // If Stalwart admin but not yet authenticated, auto-login
-      if (stalwartAdmin) {
-        const loginRes = await apiFetch('/api/admin/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', ...jmapHeaders },
-          body: JSON.stringify({ stalwartAuth: true }),
-        });
-        if (loginRes.ok) {
+        if (data.authenticated) {
          setAuthenticated(true);
          return;
        }
-      }

-      router.replace('/admin/login');
-    } catch {
-      router.replace('/admin/login');
+        // If Stalwart admin but not yet authenticated, auto-login
+        if (stalwartAdmin) {
+          const loginRes = await apiFetch('/api/admin/auth', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...jmapHeaders },
+            body: JSON.stringify({ stalwartAuth: true }),
+          });
+          if (cancelled) return;
+          if (loginRes.ok) {
+            setAuthenticated(true);
+            return;
+          }
+          const body = await loginRes.json().catch(() => ({}));
+          setAuthError(body?.error || `Admin auto-login failed (HTTP ${loginRes.status})`);
+          setAuthenticated(false);
+          return;
+        }
+
+        router.replace('/admin/login');
+      } catch (err) {
+        if (cancelled) return;
+        setAuthError(err instanceof Error ? err.message : 'Network error during admin check');
+        setAuthenticated(false);
+      }
    }
-  }
+
+    checkAuth();
+    return () => { cancelled = true; };
+  }, [pathname, router]);

  async function handleLogout() {
    await apiFetch('/api/admin/auth', { method: 'DELETE' });
@@ -132,18 +166,90 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
    return <>{children}</>;
  }

-  if (authenticated === null) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="animate-pulse text-muted-foreground text-sm">Loading...</div>
+  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(({ href, label, icon: Icon }) => {
+                const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
+                const showDot = href === '/admin/version' && hasUpdate;
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    className={cn(
+                      'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+                      active
+                        ? 'bg-accent text-accent-foreground font-medium'
+                        : 'hover:bg-muted text-foreground'
+                    )}
+                  >
+                    <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}
+                  </Link>
+                );
+              })}
+            </div>
+          ))}
+        </div>
      </div>
-    );
-  }
+
+      <div className="px-2 py-2 border-t border-border space-y-0.5 shrink-0">
+        {!isStalwartAdmin && (
+          <Link
+            href="/admin/change-password"
+            className={cn(
+              'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
+              pathname === '/admin/change-password'
+                ? 'bg-accent text-accent-foreground font-medium'
+                : 'hover:bg-muted text-foreground'
+            )}
+          >
+            <KeyRound className={cn(
+              'w-4 h-4 shrink-0',
+              pathname === '/admin/change-password' ? 'text-accent-foreground' : 'text-muted-foreground'
+            )} />
+            Change Password
+          </Link>
+        )}
+        <button
+          onClick={handleLogout}
+          className="w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5 hover:bg-muted text-foreground"
+        >
+          <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
+          Sign out
+        </button>
+      </div>
+    </>
+  );

  return (
    <div className="min-h-screen flex bg-background">
-      {/* Slim webmail nav rail */}
-      <nav className="w-14 bg-secondary flex flex-col items-center py-3 gap-2 border-r border-border sticky top-0 h-screen shrink-0">
+      {/* Slim webmail nav rail (desktop only) */}
+      <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" />
        ) : (
@@ -191,8 +297,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
        </div>
      </nav>

-      {/* Admin Sidebar */}
-      <aside className="w-60 border-r border-border bg-secondary flex flex-col sticky top-0 h-screen">
+      {/* Admin Sidebar (desktop only) */}
+      <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" />
@@ -201,77 +307,143 @@ 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">
-          <div className="px-2 space-y-0.5">
-            {NAV_GROUPS.map((group, groupIndex) => (
-              <div key={group.label}>
-                {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
-                <div className="px-3 pt-2.5 pb-1">
-                  <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
-                    {group.label}
-                  </span>
-                </div>
-                {group.items.map(({ href, label, icon: Icon }) => {
-                  const active = href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
-                  return (
-                    <Link
-                      key={href}
-                      href={href}
-                      className={cn(
-                        'w-full text-left px-3 py-2 rounded-md text-sm transition-colors duration-150 flex items-center gap-2.5',
-                        active
-                          ? 'bg-accent text-accent-foreground font-medium'
-                          : 'hover:bg-muted text-foreground'
-                      )}
-                    >
-                      <Icon className={cn(
-                        'w-4 h-4 shrink-0',
-                        active ? 'text-accent-foreground' : 'text-muted-foreground'
-                      )} />
-                      {label}
-                    </Link>
-                  );
-                })}
-              </div>
-            ))}
+      {/* Mobile drawer overlay */}
+      {mobileNavOpen && (
+        <div
+          className="md:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+          onClick={() => setMobileNavOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Mobile drawer */}
+      <aside
+        className={cn(
+          'md:hidden fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] border-r border-border bg-secondary flex flex-col transition-transform duration-200 ease-out',
+          mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        aria-label="Admin navigation"
+        aria-hidden={!mobileNavOpen}
+      >
+        <div className="h-14 flex items-center justify-between px-3 border-b border-border shrink-0">
+          <div className="flex items-center min-w-0">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain 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="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"
+            type="button"
+            onClick={() => setMobileNavOpen(false)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            aria-label="Close navigation"
          >
-            <LogOut className="w-4 h-4 shrink-0 text-muted-foreground" />
-            Sign out
+            <X className="w-5 h-5" />
          </button>
        </div>
+        {navContent}
      </aside>

      {/* Main content */}
-      <main className="flex-1 overflow-auto">
-        <div className="max-w-4xl mx-auto p-6">
-          {children}
+      <main className="flex-1 min-w-0 overflow-x-hidden">
+        {/* Mobile header */}
+        <div className="md:hidden sticky top-0 z-30 h-14 flex items-center gap-2 px-3 border-b border-border bg-background">
+          <button
+            type="button"
+            onClick={() => setMobileNavOpen(true)}
+            className="flex items-center justify-center w-9 h-9 rounded-md text-foreground hover:bg-muted transition-colors"
+            aria-label="Open navigation"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+          <div className="flex items-center min-w-0">
+            {logoUrl ? (
+              <img src={logoUrl} alt="" className="w-5 h-5 object-contain 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>
+              <p className="mt-1 text-destructive/80">{authError}</p>
+            </div>
+          ) : authenticated === null ? (
+            <div className="py-12 text-center text-sm text-muted-foreground animate-pulse">
+              Loading admin panel…
+            </div>
+          ) : authenticated ? (
+            children
+          ) : null}
        </div>
      </main>
+
+      {/* Mobile bottom nav (main webmail nav) */}
+      <nav
+        className="md:hidden fixed inset-x-0 bottom-0 z-30 flex items-center bg-background border-t border-border pb-[env(safe-area-inset-bottom)]"
+        aria-label="Main navigation"
+      >
+        <a
+          href="/"
+          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>
  );
 }
@@ -33,8 +33,8 @@ export default function AdminLogsPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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>
@@ -52,7 +52,7 @@ export default function AdminLogsPage() {
        <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"
+          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>
@@ -66,15 +66,43 @@ export default function AdminLogsPage() {
        </select>
      </div>

-      {/* Table */}
-      <div className="border border-border rounded-lg overflow-hidden">
+      {/* Mobile cards */}
+      <div className="sm:hidden space-y-2">
+        {loading && entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">Loading...</div>
+        ) : entries.length === 0 ? (
+          <div className="rounded-lg border border-border px-4 py-8 text-center text-sm text-muted-foreground">No entries found</div>
+        ) : (
+          entries.map((entry, i) => (
+            <div key={i} className="rounded-lg border border-border p-3 space-y-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs font-mono px-2 py-0.5 rounded bg-muted text-muted-foreground truncate">
+                  {entry.action}
+                </span>
+                <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+                  {new Date(entry.ts).toLocaleString()}
+                </span>
+              </div>
+              <div className="text-xs text-foreground break-words">
+                {formatDetail(entry.detail)}
+              </div>
+              <div className="text-[11px] text-muted-foreground font-mono">
+                {entry.ip}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Desktop table */}
+      <div className="hidden sm:block border border-border rounded-lg overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border bg-muted/30">
-              <th className="text-left px-4 py-2 font-medium text-muted-foreground">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 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">IP</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">
@@ -0,0 +1,544 @@
+'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;
+    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>
+
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+        <div className="flex items-start gap-4 flex-1 min-w-0">
+          <div className="w-14 h-14 rounded-lg bg-muted flex items-center justify-center shrink-0">
+            {isPlugin ? (
+              <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>
+  );
+}
@@ -1,7 +1,8 @@
 'use client';

 import { useEffect, useState, useCallback } from 'react';
-import { Search, Download, Check, Loader2, Store, Puzzle, SwatchBook, Star, Filter } from 'lucide-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 {
@@ -141,8 +142,8 @@ export default function AdminMarketplacePage() {
      )}

      {/* Search & Filters */}
-      <div className="flex items-center gap-3">
-        <div className="relative flex-1">
+      <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"
@@ -152,7 +153,7 @@ export default function AdminMarketplacePage() {
            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">
+        <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}
@@ -262,10 +263,11 @@ function ExtensionCard({
  onInstall: () => void;
 }) {
  const isPlugin = extension.type === 'plugin';
+  const previewHref = `/admin/marketplace/${encodeURIComponent(extension.slug)}`;

  return (
-    <div className="border border-border rounded-lg overflow-hidden hover:border-ring/30 transition-colors">
-      <div className="p-4">
+    <div className="group relative border border-border rounded-lg overflow-hidden hover:border-ring/30 transition-colors">
+      <Link href={previewHref} className="block p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 rounded-lg">
        {/* Header */}
        <div className="flex items-start gap-3">
          <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center shrink-0">
@@ -277,7 +279,9 @@ function ExtensionCard({
          </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>
+              <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" />
              )}
@@ -315,7 +319,7 @@ function ExtensionCard({
          </div>
        )}

-        {/* Footer */}
+        {/* Footer (download count + permissions) */}
        <div className="flex items-center justify-between mt-4 pt-3 border-t border-border">
          <div className="flex items-center gap-3 text-xs text-muted-foreground">
            <span className="flex items-center gap-1">
@@ -328,27 +332,34 @@ function ExtensionCard({
              </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>
-          )}
+          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground group-hover:text-foreground">
+            <Eye className="w-3 h-3" />
+            Preview
+          </span>
        </div>
+      </Link>
+
+      {/* Quick install button (sits over the link, stops navigation) */}
+      <div className="px-4 pb-4 -mt-1">
+        {extension.installed ? (
+          <span className="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-xs font-medium">
+            <Check className="w-3 h-3" />
+            Installed
+          </span>
+        ) : (
+          <button
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onInstall(); }}
+            disabled={installing}
+            className="inline-flex items-center gap-1.5 h-7 px-3 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+          >
+            {installing ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <Download className="w-3 h-3" />
+            )}
+            Quick install
+          </button>
+        )}
      </div>
    </div>
  );
@@ -31,6 +31,7 @@ export default function AdminDashboardPage() {
  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(() => {
@@ -38,7 +39,7 @@ export default function AdminDashboardPage() {
  }, []);

  async function fetchDashboardData() {
-    const [statusRes, auditRes, configRes, adminConfigRes, pluginRes, themeRes, policyRes] = await Promise.all([
+    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'),
@@ -46,6 +47,7 @@ export default function AdminDashboardPage() {
      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());
@@ -73,6 +75,12 @@ export default function AdminDashboardPage() {
      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 {
@@ -165,6 +173,16 @@ export default function AdminDashboardPage() {
        </SettingItem>
      </SettingsSection>

+      {/* Accounts */}
+      <SettingsSection title="Accounts" description="Unique logins recorded over the last 90 days">
+        <SettingItem label="Total accounts" description="Distinct identities seen in the retention window">
+          <span className="text-sm text-foreground">{accountCounts?.total ?? '-'}</span>
+        </SettingItem>
+        <SettingItem label="Active in last 7 days" description="Identities with a login in the past week">
+          <span className="text-sm text-foreground">{accountCounts?.active7d ?? '-'}</span>
+        </SettingItem>
+      </SettingsSection>
+
      {/* Extensions */}
      <SettingsSection title="Extensions" description="Installed plugins, themes, and policy rules">
        <SettingItem label="Plugins">
@@ -262,12 +262,12 @@ export default function AdminPluginsPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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 items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
          {policyDirty && (
            <button
              onClick={handleSavePolicy}
@@ -309,7 +309,7 @@ export default function AdminPluginsPage() {
          <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 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>
@@ -320,7 +320,7 @@ export default function AdminPluginsPage() {
            </button>
          </div>

-          <div className="px-4 py-3 flex items-center justify-between gap-4">
+          <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>
@@ -331,7 +331,7 @@ export default function AdminPluginsPage() {
            </button>
          </div>

-          <div className="px-4 py-3 flex items-center justify-between gap-4">
+          <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>
@@ -344,7 +344,7 @@ export default function AdminPluginsPage() {

          {/* Force enable / disable all */}
          {plugins.length > 0 && (
-            <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <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>
@@ -388,9 +388,9 @@ export default function AdminPluginsPage() {
        ) : (
          <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 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 items-center gap-2">
+                  <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'}`}>
@@ -15,6 +15,7 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
  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' },
@@ -131,8 +132,8 @@ export default function AdminPolicyPage() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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>
@@ -169,13 +170,13 @@ export default function AdminPolicyPage() {
            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>
+              <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={`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'}`}>
+                  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>
@@ -194,9 +195,9 @@ export default function AdminPolicyPage() {
            {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">
+                <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">
+                  <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" />
@@ -86,8 +86,8 @@ export default function AdminSettingsPage() {

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

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
+      <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 items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2">
          {policyDirty && (
            <button
              onClick={handleSavePolicy}
@@ -356,37 +356,37 @@ export default function AdminThemesPage() {

        <div className="divide-y divide-border">
          {/* Master toggle */}
-          <div className="px-4 py-3 flex items-center justify-between gap-4">
-            <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">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'}`}>
+              className={`shrink-0 relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${themesEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${themesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
            </button>
          </div>

          {/* User uploads toggle */}
-          <div className="px-4 py-3 flex items-center justify-between gap-4">
-            <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={`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'}`}>
+              className={`shrink-0 relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${userThemesEnabled ? 'bg-primary' : 'bg-muted-foreground/25 dark:bg-muted-foreground/50'}`}>
              <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-background shadow transition-transform ${userThemesEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'}`} />
            </button>
          </div>

          {/* Force enable / disable all */}
          {themes.length > 0 && (
-            <div className="px-4 py-3 flex items-center justify-between gap-4">
-              <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">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">
+              <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"
@@ -407,15 +407,15 @@ export default function AdminThemesPage() {

          {/* Default Theme */}
          <div className="px-4 py-3">
-            <div className="flex items-center justify-between gap-4">
-              <div>
+            <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 rounded-md border border-input bg-background text-sm text-foreground"
+                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">
@@ -498,9 +498,9 @@ export default function AdminThemesPage() {
        ) : (
          <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 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 items-center gap-2">
+                  <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'}`}>
@@ -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 default function AdminVersionPage() {
+  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>
+  );
+}
@@ -53,11 +53,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 {
@@ -0,0 +1,214 @@
+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,
+        }))
+      : [];
+
+    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,
+          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 },
+    );
+  }
+}
@@ -10,11 +10,15 @@ import {
  type ServerPlugin,
  type ServerTheme,
 } from '@/lib/admin/plugin-registry';
+import {
+  sanitizeFrameOrigins,
+  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
@@ -226,6 +230,22 @@ export async function POST(request: NextRequest) {
        warnings.push(`Unknown permissions: ${unknownPerms.join(', ')}`);
      }

+      // Plugins may declare iframe origins they need for embedded content.
+      // Anything that doesn't pass strict origin validation is silently
+      // dropped - the plugin still installs, but those origins are not
+      // added to the host CSP.
+      const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+      const droppedFrameOrigins = Array.isArray(manifest.frameOrigins)
+        ? (manifest.frameOrigins as unknown[]).filter(
+            (v) => typeof v !== 'string' || !declaredFrameOrigins.includes(v),
+          )
+        : [];
+      if (droppedFrameOrigins.length > 0) {
+        warnings.push(
+          `Ignored invalid frameOrigins: ${droppedFrameOrigins.join(', ')}`,
+        );
+      }
+
      const plugin: ServerPlugin = {
        id: (manifest.id as string) || slug,
        name: (manifest.name as string) || slug,
@@ -238,10 +258,14 @@ export async function POST(request: NextRequest) {
        enabled: true,
        installedAt: now,
        updatedAt: now,
+        ...(declaredFrameOrigins.length > 0
+          ? { frameOrigins: declaredFrameOrigins }
+          : {}),
      };

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

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

 /**
- * 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.
- * This endpoint is accessible from the client-side plugin API.
+ * - Admin sessions receive every field, including those declared
+ *   `type: 'secret'` in the plugin's configSchema.
+ * - Authenticated mailbox users (the plugin running in their browser)
+ *   receive only non-secret fields.
+ * - Anonymous callers are rejected so unauthenticated visitors cannot
+ *   enumerate plugin secrets.
 */
 export async function GET(
-  _request: NextRequest,
+  request: NextRequest,
  { params }: { params: Promise<{ id: string }> },
 ) {
  try {
@@ -20,13 +25,34 @@ export async function GET(
      return NextResponse.json({ error: 'Invalid plugin ID' }, { status: 400 });
    }

+    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 getPlugin(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 {
@@ -8,6 +8,10 @@ import {
  deletePlugin as removePlugin,
  type ServerPlugin,
 } from '@/lib/admin/plugin-registry';
+import {
+  sanitizeFrameOrigins,
+  invalidateFrameOriginsCache,
+} from '@/lib/admin/csp-frame-origins';

 // Server-side extraction using the same validation logic
 // ZIP parsing needs to happen on the server for admin-uploaded plugins
@@ -152,6 +156,8 @@ export async function POST(request: NextRequest) {
      );
    }

+    const declaredFrameOrigins = sanitizeFrameOrigins(manifest.frameOrigins);
+
    const now = new Date().toISOString();
    const plugin: ServerPlugin = {
      id: manifest.id as string,
@@ -166,12 +172,16 @@ export async function POST(request: NextRequest) {
      ...(manifest.configSchema && typeof manifest.configSchema === 'object'
        ? { configSchema: manifest.configSchema as ServerPlugin['configSchema'] }
        : {}),
+      ...(declaredFrameOrigins.length > 0
+        ? { frameOrigins: declaredFrameOrigins }
+        : {}),
      installedAt: now,
      updatedAt: now,
    };

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

    return NextResponse.json({ plugin });
  } catch (error) {
@@ -209,6 +219,11 @@ export async function PATCH(request: NextRequest) {
      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
    }

+    // Enable/disable changes the set of plugins contributing frame origins.
+    if (typeof updates.enabled === 'boolean' || typeof updates.forceEnabled === 'boolean') {
+      invalidateFrameOriginsCache();
+    }
+
    await auditLog('plugin.update', { id, ...updates }, ip);
    return NextResponse.json({ plugin: updated });
  } catch (error) {
@@ -238,6 +253,7 @@ export async function DELETE(request: NextRequest) {
      return NextResponse.json({ error: 'Plugin not found' }, { status: 404 });
    }

+    invalidateFrameOriginsCache();
    await auditLog('plugin.delete', { id }, ip);
    return NextResponse.json({ success: true });
  } catch (error) {
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -9,6 +9,9 @@ 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';

 const COOKIE_OPTIONS = {
  ...getCookieOptions(),
@@ -25,7 +28,9 @@ function getSlot(request: NextRequest): number {

 export async function POST(request: NextRequest) {
  try {
-    if (process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true') {
+    const oauthEnabled = configManager.get<boolean>('oauthEnabled', false);
+    const oauthOnly = configManager.get<boolean>('oauthOnly', false);
+    if (oauthEnabled && oauthOnly) {
      return NextResponse.json({ error: 'Basic authentication is disabled' }, { status: 403 });
    }

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

+    // Pin the upstream URL to the configured JMAP server so an unauthenticated
+    // caller cannot point this route at internal hosts. Only when no server URL
+    // is configured AND the deployment explicitly allows custom JMAP endpoints
+    // do we honor the body URL — and even then it must be a public URL.
+    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);
+
+    let upstreamUrl: string;
+    let upstreamTrusted: boolean;
+    if (configuredServerUrl) {
+      upstreamUrl = configuredServerUrl;
+      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 <= 4 ? bodySlot : getSlot(request);
    const cookieName = sessionCookieName(slot);
    const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
-    const normalizedServerUrl = await verifyJmapAuth(serverUrl, authHeader);
+    const normalizedServerUrl = await verifyJmapAuth(upstreamUrl, authHeader, { trusted: upstreamTrusted });
    const token = encryptSession(normalizedServerUrl, username, password);
    const cookieStore = await cookies();
    cookieStore.set(cookieName, token, COOKIE_OPTIONS);
@@ -47,6 +79,8 @@ export async function POST(request: NextRequest) {
      authHeader,
    });

+    void recordLogin(username, normalizedServerUrl);
+
    return NextResponse.json({ ok: true });
  } catch (error) {
    if (error instanceof JmapAuthVerificationError) {
@@ -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) {
@@ -58,9 +64,9 @@ export async function POST(request: NextRequest) {
    // Exchange code for tokens
    const tokens = await exchangeCodeForTokens(code, codeVerifier, redirectUri);

-    // 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());
    }

@@ -2,6 +2,9 @@ import { NextRequest, NextResponse } from 'next/server';
 import { logger } from '@/lib/logger';
 import { JmapAuthVerificationError, verifyJmapAuth } from '@/lib/auth/verify-jmap-auth';
 import { setStalwartAuthContext } from '@/lib/stalwart/auth-context';
+import { configManager } from '@/lib/admin/config-manager';
+import { isPublicHttpUrl } from '@/lib/security/url-guard';
+import { recordLogin } from '@/lib/telemetry/login-tracker';

 function getSlot(request: NextRequest, bodySlot: unknown): number {
  if (typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4) {
@@ -23,8 +26,35 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
    }

+    // Pin the upstream URL to the configured JMAP server so an unauthenticated
+    // caller cannot point this route at internal hosts. Only when no server URL
+    // is configured AND the deployment explicitly allows custom JMAP endpoints
+    // do we honor the body URL — and even then it must be a public URL.
+    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);
+
+    let upstreamUrl: string;
+    let upstreamTrusted: boolean;
+    if (configuredServerUrl) {
+      upstreamUrl = configuredServerUrl;
+      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);
+    const normalizedServerUrl = await verifyJmapAuth(upstreamUrl, authHeader, { trusted: upstreamTrusted });

    await setStalwartAuthContext(slot, {
      serverUrl: normalizedServerUrl,
@@ -32,6 +62,8 @@ export async function POST(request: NextRequest) {
      authHeader,
    });

+    void recordLogin(username, normalizedServerUrl);
+
    return NextResponse.json({ ok: true });
  } catch (error) {
    if (error instanceof JmapAuthVerificationError) {
@@ -5,6 +5,9 @@ import { discoverOAuth } from '@/lib/oauth/discovery';
 import { refreshTokenCookieName } from '@/lib/oauth/tokens';
 import { getCookieOptions } from '@/lib/oauth/cookie-config';
 import { readFileEnv } from '@/lib/read-file-env';
+import { configManager } from '@/lib/admin/config-manager';
+import { isPublicHttpUrl } from '@/lib/security/url-guard';
+import { recordLogin } from '@/lib/telemetry/login-tracker';

 /**
 * Exchange basic auth credentials (with TOTP appended) for OAuth tokens.
@@ -83,22 +86,39 @@ export async function POST(request: NextRequest) {

    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : 0;

-    // Use the server-side JMAP_SERVER_URL if set (may differ from the
-    // public URL the browser uses, e.g. inside Docker).
-    const internalServerUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || serverUrl;
+    // Pin the upstream URL to the configured JMAP server so an unauthenticated
+    // caller cannot point this route at internal hosts. Only when no server
+    // URL is configured (and the deployment explicitly allows custom JMAP
+    // endpoints) do we fall back to the user-supplied URL - and even then
+    // 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 tokenEndpoint = await findTokenEndpoint(internalServerUrl);
-    if (!tokenEndpoint) {
-      // Also try with the client-provided URL in case the internal one differs
-      const clientEndpoint = internalServerUrl !== serverUrl ? await findTokenEndpoint(serverUrl) : null;
-      if (!clientEndpoint) {
-        logger.warn('TOTP token exchange: no token endpoint found', { serverUrl, internalServerUrl });
-        return NextResponse.json({ error: 'no_token_endpoint', detail: 'Could not discover OAuth token endpoint on the mail server' }, { status: 404 });
+    let upstreamUrl: string;
+    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);
  } 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 });
@@ -107,14 +127,15 @@ export async function POST(request: NextRequest) {

 async function attemptAllStrategies(
  tokenEndpoint: string,
+  serverUrl: string,
  username: string,
  password: string,
  slot: number,
 ): Promise<NextResponse> {
  logger.info('TOTP token exchange: found token endpoint', { tokenEndpoint });

-  const clientId = process.env.OAUTH_CLIENT_ID;
-  const clientSecret = process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
+  const clientId = configManager.get<string>('oauthClientId', '') || process.env.OAUTH_CLIENT_ID;
+  const clientSecret = configManager.get<string>('oauthClientSecret', '') || process.env.OAUTH_CLIENT_SECRET || readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
  const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
  const attempts: Array<{ strategy: string; error: string }> = [];

@@ -125,6 +146,7 @@ async function attemptAllStrategies(
    const result = await tryTokenRequest(tokenEndpoint, params);
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (ROPC with client_id)');
+      void recordLogin(username, serverUrl);
      return await storeAndRespond(result.tokens, slot);
    }
    attempts.push({ strategy: 'ROPC with client_id', error: result.error });
@@ -136,6 +158,7 @@ async function attemptAllStrategies(
    const result = await tryTokenRequest(tokenEndpoint, params);
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (ROPC without client_id)');
+      void recordLogin(username, serverUrl);
      return await storeAndRespond(result.tokens, slot);
    }
    attempts.push({ strategy: 'ROPC without client_id', error: result.error });
@@ -147,6 +170,7 @@ async function attemptAllStrategies(
    const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (Basic Auth header)');
+      void recordLogin(username, serverUrl);
      return await storeAndRespond(result.tokens, slot);
    }
    attempts.push({ strategy: 'Basic Auth header', error: result.error });
@@ -158,6 +182,7 @@ async function attemptAllStrategies(
    const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
    if (result.ok) {
      logger.info('TOTP token exchange succeeded (client_credentials + Basic Auth)');
+      void recordLogin(username, serverUrl);
      return await storeAndRespond(result.tokens, slot);
    }
    attempts.push({ strategy: 'client_credentials + Basic Auth', error: result.error });
@@ -112,10 +112,9 @@ const emails: MockEmail[] = [
    preview: 'Hallo! This is a sample email to help you get started with the Bulwark Webmail development environment.',
    hasAttachment: false,
    textBody: [{ partId: 'p1', blobId: 'blob-001', size: 280, type: 'text/plain' }],
-    htmlBody: [{ partId: 'p2', blobId: 'blob-002', size: 420, type: 'text/html' }],
+    htmlBody: [],
    bodyValues: {
      p1: { value: 'Hallo!\n\nThis is a sample email to help you get started with the Bulwark Webmail development environment.\n\nFeel free to explore the UI - all data here is mock data.\n\nBeste Grüße,\nSophie' },
-      p2: { value: '<p>Hallo!</p><p>This is a sample email to help you get started with the <strong>Bulwark Webmail</strong> development environment.</p><p>Feel free to explore the UI - all data here is mock data.</p><p>Beste Grüße,<br>Sophie</p>' },
    },
  },
  {
@@ -1,89 +1,9 @@
-import { lookup } from 'node:dns/promises';
-import { BlockList, isIP } from 'node:net';
 import { NextRequest, NextResponse } from 'next/server';
+import { isPublicHttpUrl } from '@/lib/security/url-guard';

 const MAX_RESPONSE_SIZE = 10 * 1024 * 1024; // 10MB
 const FETCH_TIMEOUT_MS = 15000;

-const blockedAddressRanges = new BlockList();
-blockedAddressRanges.addAddress('0.0.0.0');
-blockedAddressRanges.addAddress('127.0.0.1');
-blockedAddressRanges.addSubnet('10.0.0.0', 8);
-blockedAddressRanges.addSubnet('172.16.0.0', 12);
-blockedAddressRanges.addSubnet('192.168.0.0', 16);
-blockedAddressRanges.addSubnet('169.254.0.0', 16);
-blockedAddressRanges.addAddress('::', 'ipv6');
-blockedAddressRanges.addAddress('::1', 'ipv6');
-blockedAddressRanges.addSubnet('fc00::', 7, 'ipv6');
-blockedAddressRanges.addSubnet('fe80::', 10, 'ipv6');
-
-function normalizeHostname(hostname: string): string {
-  return hostname.replace(/^\[(.*)\]$/, '$1').toLowerCase();
-}
-
-function isBlockedIpAddress(hostname: string): boolean {
-  const normalized = normalizeHostname(hostname);
-  const family = isIP(normalized);
-  if (family === 4) {
-    return blockedAddressRanges.check(normalized, 'ipv4');
-  }
-  if (family === 6) {
-    return blockedAddressRanges.check(normalized, 'ipv6');
-  }
-  return false;
-}
-
-async function isValidExternalUrl(urlString: string): Promise<boolean> {
-  let url: URL;
-  try {
-    url = new URL(urlString);
-  } catch {
-    return false;
-  }
-
-  if (url.protocol !== 'https:' && url.protocol !== 'http:') {
-    return false;
-  }
-
-  const hostname = normalizeHostname(url.hostname);
-
-  // Block private/internal hostnames
-  if (
-    hostname === 'localhost' ||
-    hostname.endsWith('.localhost') ||
-    hostname.endsWith('.local') ||
-    hostname.endsWith('.internal') ||
-    hostname.endsWith('.arpa') ||
-    hostname.endsWith('.localdomain')
-  ) {
-    return false;
-  }
-
-  // Block URLs with credentials
-  if (url.username || url.password) {
-    return false;
-  }
-
-  if (isBlockedIpAddress(hostname)) {
-    return false;
-  }
-
-  if (isIP(hostname)) {
-    return true;
-  }
-
-  try {
-    const records = await lookup(hostname, { all: true, verbatim: true });
-    if (records.length === 0) {
-      return false;
-    }
-    return records.every((record) => !isBlockedIpAddress(record.address));
-  } catch {
-    return false;
-  }
-
-}
-
 export async function POST(request: NextRequest) {
  let body: { url?: string };
  try {
@@ -98,7 +18,7 @@ export async function POST(request: NextRequest) {
    return NextResponse.json({ error: 'URL is required' }, { status: 400 });
  }

-  if (!(await isValidExternalUrl(url))) {
+  if (!(await isPublicHttpUrl(url))) {
    return NextResponse.json({ error: 'Invalid or disallowed URL' }, { status: 400 });
  }

@@ -111,7 +31,7 @@ export async function POST(request: NextRequest) {
    let response: Response | undefined;

    for (let i = 0; i <= MAX_REDIRECTS; i++) {
-      if (!(await isValidExternalUrl(currentUrl))) {
+      if (!(await isPublicHttpUrl(currentUrl))) {
        clearTimeout(timeout);
        return NextResponse.json({ error: 'Redirect to disallowed URL' }, { status: 400 });
      }
@@ -131,7 +51,6 @@ export async function POST(request: NextRequest) {
          clearTimeout(timeout);
          return NextResponse.json({ error: 'Redirect without Location header' }, { status: 502 });
        }
-        // Resolve relative redirects
        currentUrl = new URL(location, currentUrl).toString();
        continue;
      }
@@ -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 });
+  }
+}
@@ -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',
+      },
+    },
+  );
+}
@@ -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,54 @@ 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;
+}
@@ -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: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "any" },
-        { src: "/api/pwa-icon/192", sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/api/pwa-icon/512", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/api/pwa-icon/192"), sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: withBase("/api/pwa-icon/512"), sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: withBase("/api/pwa-icon/192"), sizes: "192x192", 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: "/icon-512x512.png", sizes: "512x512", type: "image/png", purpose: "any" },
-        { src: "/icon-maskable-light-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-light-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-dark-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable" },
-        { src: "/icon-maskable-dark-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-192x192.png"), sizes: "192x192", type: "image/png", purpose: "any" },
+        { src: withBase("/icon-512x512.png"), sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: withBase("/icon-maskable-light-192x192.png"), sizes: "192x192", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-light-512x512.png"), sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: withBase("/icon-maskable-dark-192x192.png"), sizes: "192x192", 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: "/",
-    scope: "/",
+    start_url: withBase("/"),
+    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: "/screenshot-1280x720.png", sizes: "1280x720", type: "image/png" },
+      { src: withBase("/screenshot-540x720.png"), sizes: "540x720", type: "image/png" },
+      { src: withBase("/screenshot-1280x720.png"), sizes: "1280x720", type: "image/png" },
    ],
  };
 }
@@ -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 isAdminRoute = window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/');
+      const prefix = getPathPrefix();
+      // Don't redirect admin routes to the webmail login page. Admin paths
+      // are mounted relative to the deployment prefix, so account for it.
+      const adminBase = `${prefix}/admin`;
+      const isAdminRoute = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
      if (!isAdminRoute) {
-        window.location.href = "/login";
+        window.location.href = `${prefix}/login`;
      }
    }
  }, [isAuthenticated]);

  if (!isAuthenticated) {
-    // Allow admin routes to render the 404 without redirecting
-    const isAdmin = typeof window !== 'undefined' &&
-      (window.location.pathname === '/admin' || window.location.pathname.startsWith('/admin/'));
+    let isAdmin = false;
+    if (typeof window !== 'undefined') {
+      const prefix = getPathPrefix();
+      const adminBase = `${prefix}/admin`;
+      isAdmin = window.location.pathname === adminBase || window.location.pathname.startsWith(`${adminBase}/`);
+    }
    if (!isAdmin) return null;
  }

+  const prefix = typeof window !== 'undefined' ? getPathPrefix() : '';
+
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="text-center max-w-md px-4">
        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
        <p className="text-muted-foreground mb-6">This page could not be found.</p>
        <a
-          href="/"
+          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
@@ -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,
@@ -119,6 +121,7 @@ export function CalendarDayView({
      created: t("notifications.event_created"),
      error: t("notifications.event_error"),
    },
+    isMobile,
  });

  const formatHour = (h: number): string => {
@@ -143,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>
@@ -239,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 }}
              />
@@ -246,9 +256,11 @@ export function CalendarDayView({

            {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
              const durMin = Math.max(15, endMinutes - startMinutes);
-              const top = (startMinutes / 60) * HOUR_HEIGHT;
+              const baseTop = (startMinutes / 60) * HOUR_HEIGHT;
              const baseHeight = Math.max(24, (durMin / 60) * HOUR_HEIGHT);
-              const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
+              const isResizing = resizeVisual?.eventId === ev.id;
+              const top = isResizing ? resizeVisual!.topPx : baseTop;
+              const height = isResizing ? resizeVisual!.heightPx : baseHeight;
              const calId = getPrimaryCalendarId(ev);
              const leftPct = (column / totalColumns) * 100;
              const widthPct = (1 / totalColumns) * 100;
@@ -270,11 +282,21 @@ export function CalendarDayView({
                    onContextMenu={onContextMenuEvent}
                    draggable
                  />
+                  <div
+                    data-resize-handle
+                    className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                    aria-label={t("events.resize")}
+                    onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
+                    onPointerMove={handleResizePointerMove}
+                    onPointerUp={handleResizePointerUp}
+                  >
+                    <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                  </div>
                  <div
                    data-resize-handle
                    className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                    aria-label={t("events.resize")}
-                    onPointerDown={(e) => handleResizePointerDown(ev.id, durMin, e)}
+                    onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                    onPointerMove={handleResizePointerMove}
                    onPointerUp={handleResizePointerUp}
                  >
@@ -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)}
@@ -1,8 +1,8 @@
 "use client";

-import { useState, useRef, useEffect, useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake } from "lucide-react";
+import { Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, Users, Plus, Eraser, Palette } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
@@ -11,6 +11,8 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useTaskStore } from "@/stores/task-store";
 import { BIRTHDAY_CALENDAR_ID } from "@/lib/birthday-calendar";
 import { toast } from "@/stores/toast-store";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
 import type { IJMAPClient } from '@/lib/jmap/client-interface';

 interface CalendarSidebarPanelProps {
@@ -18,6 +20,11 @@ interface CalendarSidebarPanelProps {
  selectedCalendarIds: string[];
  onToggleVisibility: (id: string) => void;
  onColorChange?: (calendarId: string, color: string) => void;
+  onShareCalendar?: (calendar: Calendar) => void;
+  onCreateEvent?: (calendar: Calendar) => void;
+  onClearCalendar?: (calendar: Calendar) => void;
+  onDeleteCalendar?: (calendar: Calendar) => void;
+  onCreateCalendar?: () => void;
  onSubscribe?: () => void;
  onEditSubscription?: (subscriptionId: string) => void;
  client?: IJMAPClient | null;
@@ -28,12 +35,18 @@ export function CalendarSidebarPanel({
  selectedCalendarIds,
  onToggleVisibility,
  onColorChange,
+  onShareCalendar,
+  onCreateEvent,
+  onClearCalendar,
+  onDeleteCalendar,
+  onCreateCalendar,
  onSubscribe,
  onEditSubscription,
  client,
 }: CalendarSidebarPanelProps) {
  const t = useTranslations("calendar");
  const tSub = useTranslations("calendar.subscription");
+  const tMgmt = useTranslations("calendar.management");
  const isSubscriptionCalendar = useCalendarStore((s) => s.isSubscriptionCalendar);
  const icalSubscriptions = useCalendarStore((s) => s.icalSubscriptions);
  const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
@@ -49,11 +62,8 @@ export function CalendarSidebarPanel({
    return tasks.filter(t => t.progress !== 'completed' && t.progress !== 'cancelled' && t.due && new Date(t.due) < now).length;
  }, [tasks]);

-  const [colorPickerId, setColorPickerId] = useState<string | null>(null);
-  const [contextMenuCalId, setContextMenuCalId] = useState<string | null>(null);
+  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Calendar>();
  const [refreshingSubId, setRefreshingSubId] = useState<string | null>(null);
-  const colorPickerRef = useRef<HTMLDivElement>(null);
-  const contextMenuRef = useRef<HTMLDivElement>(null);

  const personalCalendars = useMemo(() => calendars.filter(c => !c.isShared), [calendars]);
  const sharedAccountGroups = useMemo(() => {
@@ -69,30 +79,6 @@ export function CalendarSidebarPanel({
    return Array.from(groups.values());
  }, [calendars]);

-  useEffect(() => {
-    if (!colorPickerId && !contextMenuCalId) return;
-    const handleClick = (e: MouseEvent) => {
-      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target as Node)) {
-        setColorPickerId(null);
-      }
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenuCalId(null);
-      }
-    };
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setColorPickerId(null);
-        setContextMenuCalId(null);
-      }
-    };
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKey);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener('keydown', handleKey);
-    };
-  }, [colorPickerId, contextMenuCalId]);
-
  const getSubscriptionForCalendar = (calendarId: string) => {
    return icalSubscriptions.find(s => s.calendarId === calendarId);
  };
@@ -100,7 +86,6 @@ export function CalendarSidebarPanel({
  const handleRefreshSubscription = async (subId: string) => {
    if (!client) return;
    setRefreshingSubId(subId);
-    setContextMenuCalId(null);
    try {
      await refreshICalSubscription(client, subId);
      toast.success(tSub('refresh_success'));
@@ -113,7 +98,6 @@ export function CalendarSidebarPanel({

  const handleUnsubscribe = async (subId: string) => {
    if (!client) return;
-    setContextMenuCalId(null);
    try {
      await removeICalSubscription(client, subId);
      toast.success(tSub('deleted'));
@@ -127,21 +111,13 @@ export function CalendarSidebarPanel({
  const renderCalendarItem = (cal: Calendar) => {
    const isVisible = selectedCalendarIds.includes(cal.id);
    const color = cal.color || "#3b82f6";
+    const hasMenu = isSubscriptionCalendar(cal.id) ? !!client : true;

    return (
      <div key={cal.id} className="relative">
        <button
          onClick={() => onToggleVisibility(cal.id)}
-          onContextMenu={(e) => {
-            e.preventDefault();
-            if (isSubscriptionCalendar(cal.id) && client) {
-              setContextMenuCalId(contextMenuCalId === cal.id ? null : cal.id);
-              setColorPickerId(null);
-            } else if (onColorChange) {
-              setColorPickerId(colorPickerId === cal.id ? null : cal.id);
-              setContextMenuCalId(null);
-            }
-          }}
+          onContextMenu={hasMenu ? (e) => openContextMenu(e, cal) : undefined}
          className={cn(
            "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
            "hover:bg-muted"
@@ -168,71 +144,108 @@ export function CalendarSidebarPanel({
          {cal.id === BIRTHDAY_CALENDAR_ID && (
            <Cake className="w-3 h-3 text-muted-foreground flex-shrink-0" />
          )}
-        </button>
-
-        {/* Subscription context menu on right-click */}
-        {contextMenuCalId === cal.id && isSubscriptionCalendar(cal.id) && client && (() => {
-          const sub = getSubscriptionForCalendar(cal.id);
-          if (!sub) return null;
-          return (
-            <div
-              ref={contextMenuRef}
-              className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg py-1 w-48"
-            >
-              <button
-                onClick={() => {
-                  setContextMenuCalId(null);
-                  onEditSubscription?.(sub.id);
-                }}
-                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
-              >
-                <Pencil className="w-3.5 h-3.5" />
-                {tSub('edit')}
-              </button>
-              <button
-                onClick={() => handleRefreshSubscription(sub.id)}
-                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
-              >
-                <RefreshCw className="w-3.5 h-3.5" />
-                {tSub('refresh')}
-              </button>
-              <button
-                onClick={() => handleUnsubscribe(sub.id)}
-                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
-              >
-                <Trash2 className="w-3.5 h-3.5" />
-                {tSub('unsubscribe')}
-              </button>
-              {sub.lastRefreshed && (
-                <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
-                  {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
-                </div>
-              )}
-            </div>
-          );
-        })()}
-
-        {/* Color picker popover on right-click */}
-        {colorPickerId === cal.id && onColorChange && (
-          <div
-            ref={colorPickerRef}
-            className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
-          >
-            <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
-            <CalendarColorPicker
-              value={color}
-              onChange={(c) => {
-                onColorChange(cal.id, c);
-                setColorPickerId(null);
-              }}
-              allowCustom
+          {!cal.isShared && Object.keys(cal.shareWith || {}).length > 0 && (
+            <Users
+              className="w-3 h-3 text-muted-foreground flex-shrink-0"
+              aria-label={tMgmt('share')}
            />
-          </div>
-        )}
+          )}
+        </button>
      </div>
    );
  };

+  const renderCalendarMenu = () => {
+    const cal = contextMenu.data;
+    if (!cal) return null;
+
+    if (isSubscriptionCalendar(cal.id)) {
+      const sub = getSubscriptionForCalendar(cal.id);
+      if (!sub || !client) return null;
+      return (
+        <ContextMenu ref={menuRef} isOpen={contextMenu.isOpen} position={contextMenu.position} onClose={closeContextMenu}>
+          <ContextMenuItem
+            icon={Pencil}
+            label={tSub('edit')}
+            onClick={() => { closeContextMenu(); onEditSubscription?.(sub.id); }}
+          />
+          <ContextMenuItem
+            icon={RefreshCw}
+            label={tSub('refresh')}
+            onClick={() => { closeContextMenu(); handleRefreshSubscription(sub.id); }}
+          />
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            icon={Trash2}
+            label={tSub('unsubscribe')}
+            onClick={() => { closeContextMenu(); handleUnsubscribe(sub.id); }}
+            destructive
+          />
+          {sub.lastRefreshed && (
+            <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
+              {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
+            </div>
+          )}
+        </ContextMenu>
+      );
+    }
+
+    const isBirthday = cal.id === BIRTHDAY_CALENDAR_ID;
+    const canCreate = onCreateEvent && !isBirthday && cal.myRights?.mayWriteOwn !== false;
+    const canShare = onShareCalendar && cal.myRights?.mayShare && !cal.isShared;
+    const canChangeColor = !!onColorChange;
+    const canClear = onClearCalendar && !isBirthday && cal.myRights?.mayDelete !== false;
+    const canDelete = onDeleteCalendar && !isBirthday && !cal.isDefault && !cal.isShared;
+    const showSeparator = (canCreate || canShare || canChangeColor) && (canClear || canDelete);
+    const color = cal.color || "#3b82f6";
+
+    return (
+      <ContextMenu ref={menuRef} isOpen={contextMenu.isOpen} position={contextMenu.position} onClose={closeContextMenu}>
+        {canCreate && (
+          <ContextMenuItem
+            icon={Plus}
+            label={tMgmt('new_event_in_calendar')}
+            onClick={() => { closeContextMenu(); onCreateEvent(cal); }}
+          />
+        )}
+        {canShare && (
+          <ContextMenuItem
+            icon={Users}
+            label={tMgmt('share')}
+            onClick={() => { closeContextMenu(); onShareCalendar(cal); }}
+          />
+        )}
+        {canChangeColor && (
+          <ContextMenuSubMenu icon={Palette} label={tMgmt('change_color')}>
+            <div className="px-2 py-1.5 w-[200px]">
+              <CalendarColorPicker
+                value={color}
+                onChange={(c) => { onColorChange(cal.id, c); closeContextMenu(); }}
+                allowCustom
+              />
+            </div>
+          </ContextMenuSubMenu>
+        )}
+        {showSeparator && <ContextMenuSeparator />}
+        {canClear && (
+          <ContextMenuItem
+            icon={Eraser}
+            label={tMgmt('clear_events')}
+            onClick={() => { closeContextMenu(); onClearCalendar(cal); }}
+          />
+        )}
+        {canDelete && (
+          <ContextMenuItem
+            icon={Trash2}
+            label={tMgmt('delete')}
+            onClick={() => { closeContextMenu(); onDeleteCalendar(cal); }}
+            destructive
+          />
+        )}
+      </ContextMenu>
+    );
+  };
+
  return (
    <div className="mt-4">
      {enableCalendarTasks && (
@@ -250,9 +263,22 @@ export function CalendarSidebarPanel({
          )}
        </button>
      )}
-      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-        {t("my_calendars")}
-      </h3>
+      <div className="flex items-center justify-between mb-2 px-1 group">
+        {onCreateCalendar ? (
+          <button
+            onClick={onCreateCalendar}
+            className="text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors flex items-center gap-1.5"
+            title={tMgmt('add_calendar')}
+          >
+            {t('my_calendars')}
+            <Plus className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+          </button>
+        ) : (
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {t('my_calendars')}
+          </h3>
+        )}
+      </div>
      <div className="space-y-0.5">
        {personalCalendars.map(renderCalendarItem)}
      </div>
@@ -268,6 +294,8 @@ export function CalendarSidebarPanel({
          </div>
        </div>
      ))}
+
+      {renderCalendarMenu()}
    </div>
  );
 }
@@ -260,6 +260,9 @@ export function CalendarToolbar({
      {/* ── DESKTOP TOOLBAR ── */}
      {!isMobile && (
        <div className="flex items-center gap-1">
+          <Button variant="outline" size="sm" onClick={onToday} className="h-8 mr-1">
+            {t("views.today")}
+          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
            <ChevronLeft className="w-4 h-4" />
          </Button>
@@ -279,14 +282,14 @@ export function CalendarToolbar({
      <div className="flex-1" />

      {!isMobile && (
-        <div className="flex border border-border rounded-md overflow-hidden">
+        <div className="flex h-8 border border-border rounded-md overflow-hidden">
          {views.map((v) => (
            <button
              key={v}
              onClick={() => onViewModeChange(v)}
              title={t(`views.${v}_hint`)}
              className={cn(
-                "px-3 py-1.5 text-xs font-medium transition-colors",
+                "inline-flex items-center px-3 text-xs font-medium transition-colors",
                v === viewMode
                  ? "bg-primary text-primary-foreground"
                  : "hover:bg-muted text-muted-foreground"
@@ -300,7 +303,7 @@ export function CalendarToolbar({

      {(onImport || onSubscribe) && !isMobile && (
        <div className="relative" ref={importDropdownRef}>
-          <Button variant="outline" size="sm" onClick={() => setShowImportDropdown((v) => !v)}>
+          <Button variant="outline" size="sm" className="h-8" onClick={() => setShowImportDropdown((v) => !v)}>
            <Upload className="w-4 h-4 mr-1" />
            {t("import.title")}
            <ChevronDown className="w-3 h-3 ml-1" />
@@ -331,7 +334,7 @@ export function CalendarToolbar({
      )}

      {!isMobile && (
-        <Button size="sm" onClick={onCreateEvent} data-tour="create-event-button">
+        <Button size="sm" className="h-8" onClick={onCreateEvent} data-tour="create-event-button">
          <Plus className="w-4 h-4 mr-1" />
          {t("events.create")}
        </Button>
@@ -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",
@@ -183,6 +185,7 @@ export function CalendarWeekView({
      created: t("notifications.event_created"),
      error: t("notifications.event_error"),
    },
+    isMobile,
  });

  const formatHour = (h: number): string => {
@@ -218,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">
@@ -377,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 }}
                    />
@@ -384,9 +392,11 @@ export function CalendarWeekView({

                  {layouted.map(({ event: ev, column, totalColumns, startMinutes, endMinutes }) => {
                    const durMin = Math.max(15, endMinutes - startMinutes);
-                    const top = (startMinutes / 60) * HOUR_HEIGHT;
+                    const baseTop = (startMinutes / 60) * HOUR_HEIGHT;
                    const baseHeight = Math.max(20, (durMin / 60) * HOUR_HEIGHT);
-                    const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
+                    const isResizing = resizeVisual?.eventId === ev.id;
+                    const top = isResizing ? resizeVisual!.topPx : baseTop;
+                    const height = isResizing ? resizeVisual!.heightPx : baseHeight;
                    const calId = getPrimaryCalendarId(ev);
                    const leftPct = (column / totalColumns) * 100;
                    const widthPct = (1 / totalColumns) * 100;
@@ -408,11 +418,21 @@ export function CalendarWeekView({
                          onContextMenu={onContextMenuEvent}
                          draggable
                        />
+                        <div
+                          data-resize-handle
+                          className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                          aria-label={t("events.resize")}
+                          onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
+                          onPointerMove={handleResizePointerMove}
+                          onPointerUp={handleResizePointerUp}
+                        >
+                          <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                        </div>
                        <div
                          data-resize-handle
                          className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                          aria-label={t("events.resize")}
-                          onPointerDown={(e) => handleResizePointerDown(ev.id, durMin, e)}
+                          onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                          onPointerMove={handleResizePointerMove}
                          onPointerUp={handleResizePointerUp}
                        >
@@ -0,0 +1,151 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { X, Loader2, Calendar as CalendarIcon } from "lucide-react";
+import type { IJMAPClient } from "@/lib/jmap/client-interface";
+import { useCalendarStore } from "@/stores/calendar-store";
+import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
+import { toast } from "@/stores/toast-store";
+
+interface CreateCalendarModalProps {
+  client: IJMAPClient;
+  onClose: () => void;
+}
+
+export function CreateCalendarModal({ client, onClose }: CreateCalendarModalProps) {
+  const t = useTranslations("calendar.management");
+  const tCommon = useTranslations("common");
+  const createCalendar = useCalendarStore((s) => s.createCalendar);
+
+  const [name, setName] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const isValid = name.trim().length > 0;
+
+  const handleSubmit = useCallback(async () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    setIsSubmitting(true);
+    try {
+      const created = await createCalendar(client, { name: trimmed, color });
+      if (created) {
+        toast.success(t("calendar_created"));
+        onClose();
+      } else {
+        toast.error(t("error_create"));
+      }
+    } catch {
+      toast.error(t("error_create"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [name, color, client, createCalendar, onClose, t]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !isSubmitting) onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [onClose, isSubmitting]);
+
+  useEffect(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+    const focusableEls = modal.querySelectorAll<HTMLElement>(
+      'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstEl = focusableEls[0];
+    const lastEl = focusableEls[focusableEls.length - 1];
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl?.focus();
+      }
+    };
+    modal.addEventListener("keydown", handler);
+    firstEl?.focus();
+    return () => modal.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-[1px]"
+        onClick={() => !isSubmitting && onClose()}
+        aria-hidden="true"
+      />
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t("add_calendar")}
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-md mx-4 animate-in zoom-in-95 duration-200"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <CalendarIcon className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold">{t("add_calendar")}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isSubmitting}
+            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground disabled:opacity-50"
+            aria-label={tCommon("close")}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("name")}
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("name_placeholder")}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              disabled={isSubmitting}
+              onKeyDown={(e) => { if (e.key === "Enter" && isValid) handleSubmit(); }}
+            />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground mb-1 block">
+              {t("color")}
+            </label>
+            <CalendarColorPicker value={color} onChange={setColor} allowCustom />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            {tCommon("cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                {tCommon("loading")}
+              </>
+            ) : (
+              t("create")
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -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",
@@ -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>
@@ -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,8 @@ 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;
  onDuplicate?: (data: Partial<CalendarEvent>) => void;
@@ -113,6 +118,8 @@ export function EventModal({
  calendars,
  defaultDate,
  defaultEndDate,
+  defaultAllDay,
+  defaultCalendarId,
  onSave,
  onDelete,
  onDuplicate,
@@ -126,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(() => {
@@ -197,9 +205,10 @@ 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;
    const defaultCal = calendars.find(c => c.isDefault);
    return defaultCal?.id || calendars[0]?.id || "";
  });
@@ -235,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;
@@ -490,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">
-            <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")}>
-              <X className="w-5 h-5" />
-            </button>
-          </div>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+          <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
+          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+            <X className="w-5 h-5" />
+          </button>
+        </div>

-          <div className="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" />
@@ -512,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)}
@@ -545,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="flex items-center justify-between">
-              <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "accepted" ? "default" : "outline"}
-                  onClick={() => handleRsvp("accepted")}
-                  className={userCurrentStatus === "accepted"
-                    ? "bg-success hover:bg-success/80 text-success-foreground"
-                    : "text-success border-success/30 hover:bg-success/10"}
-                >
-                  {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.accepted")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "tentative" ? "default" : "outline"}
-                  onClick={() => handleRsvp("tentative")}
-                  className={userCurrentStatus === "tentative"
-                    ? "bg-warning hover:bg-warning/80 text-warning-foreground"
-                    : "border border-warning/30 text-warning hover:bg-warning/10"}
-                >
-                  {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.tentative")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "declined" ? "default" : "ghost"}
-                  onClick={() => handleRsvp("declined")}
-                  className={userCurrentStatus === "declined"
-                    ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
-                    : "text-destructive hover:bg-destructive/10"}
-                >
-                  {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.declined")}
-                </Button>
-              </div>
+        <div className="px-6 py-4 border-t border-border flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "accepted" ? "default" : "outline"}
+                onClick={() => handleRsvp("accepted")}
+                className={userCurrentStatus === "accepted"
+                  ? "bg-success hover:bg-success/80 text-success-foreground"
+                  : "text-success border-success/30 hover:bg-success/10"}
+              >
+                {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.accepted")}
+              </Button>
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "tentative" ? "default" : "outline"}
+                onClick={() => handleRsvp("tentative")}
+                className={userCurrentStatus === "tentative"
+                  ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                  : "border border-warning/30 text-warning hover:bg-warning/10"}
+              >
+                {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.tentative")}
+              </Button>
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "declined" ? "default" : "ghost"}
+                onClick={() => handleRsvp("declined")}
+                className={userCurrentStatus === "declined"
+                  ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                  : "text-destructive hover:bg-destructive/10"}
+              >
+                {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.declined")}
+              </Button>
            </div>
          </div>
+        </div>
      </div>
    );
  }
@@ -633,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>
@@ -762,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">
-          <h2 className="text-lg font-semibold">
-            {isEdit ? t("events.edit") : t("events.create")}
-          </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")}>
-            <X className="w-5 h-5" />
-          </button>
-        </div>
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+        <h2 className="text-lg font-semibold">
+          {isEdit ? t("events.edit") : t("events.create")}
+        </h2>
+        <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+          <X className="w-5 h-5" />
+        </button>
+      </div>

-        <div className="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>
@@ -916,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>
@@ -981,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 gap-1">
-            {isEdit && onDelete && (
-              showDeleteConfirm ? (
-                <div className="flex items-center gap-2">
-                  <div>
-                    <span className="text-sm text-red-600 dark:text-red-400">
-                      {t("form.delete_confirm")}
-                    </span>
-                    {hasParticipants && (
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {t("participants.cancel_notification")}
-                      </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 className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
+        <div className="flex items-center gap-1">
+          {isEdit && onDelete && (
+            showDeleteConfirm ? (
+              <div className="flex items-center gap-2">
+                <div>
+                  <span className="text-sm text-red-600 dark:text-red-400">
+                    {t("form.delete_confirm")}
+                  </span>
+                  {hasParticipants && (
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {t("participants.cancel_notification")}
+                    </p>
+                  )}
                </div>
-              ) : (
                <Button
-                  variant="ghost"
+                  variant="outline"
                  size="sm"
-                  onClick={() => setShowDeleteConfirm(true)}
-                  className="text-red-600 dark:text-red-400"
+                  onClick={() => { onDelete(event!.id, hasParticipants || undefined); onClose(); }}
+                  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>
-              )
-            )}
-            {isEdit && onDuplicate && !showDeleteConfirm && (
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
+                  {t("form.cancel")}
+                </Button>
+              </div>
+            ) : (
              <Button
                variant="ghost"
                size="sm"
-                onClick={handleDuplicate}
-                aria-label={t("events.duplicate")}
+                onClick={() => setShowDeleteConfirm(true)}
+                className="text-red-600 dark:text-red-400"
              >
-                <Copy className="w-4 h-4 mr-1" />
-                {t("events.duplicate")}
+                <Trash2 className="w-4 h-4 mr-1" />
+                {t("events.delete")}
              </Button>
-            )}
-          </div>
-
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
-              {t("form.cancel")}
+            )
+          )}
+          {isEdit && onDuplicate && !showDeleteConfirm && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDuplicate}
+              aria-label={t("events.duplicate")}
+            >
+              <Copy className="w-4 h-4 mr-1" />
+              {t("events.duplicate")}
            </Button>
-            <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>
  );
 }
@@ -90,13 +90,11 @@ export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantIn
  }, [showSuggestions, activeIndex, suggestions, query, addParticipant]);

  const handleBlur = useCallback(() => {
-    setTimeout(() => {
-      setShowSuggestions(false);
-      const trimmed = query.trim();
-      if (trimmed && EMAIL_REGEX.test(trimmed)) {
-        addParticipant({ name: "", email: trimmed });
-      }
-    }, 200);
+    const trimmed = query.trim();
+    if (trimmed && EMAIL_REGEX.test(trimmed)) {
+      addParticipant({ name: "", email: trimmed });
+    }
+    setTimeout(() => setShowSuggestions(false), 200);
  }, [query, addParticipant]);

  useImperativeHandle(ref, () => ({
@@ -167,7 +165,22 @@ export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantIn
              key={`${p.email}-${i}`}
              className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-muted text-foreground max-w-[200px]"
            >
-              <span className="truncate">{p.name || p.email}</span>
+              {!disabled ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onRemove(p.email);
+                    setQuery(p.email);
+                    setTimeout(() => inputRef.current?.focus(), 0);
+                  }}
+                  className="truncate hover:underline focus:outline-none focus:underline cursor-text"
+                  aria-label={`${t("edit")} ${p.name || p.email}`}
+                >
+                  {p.name || p.email}
+                </button>
+              ) : (
+                <span className="truncate">{p.name || p.email}</span>
+              )}
              {!disabled && (
                <button
                  type="button"
@@ -60,10 +60,8 @@ describe('ContactDetail', () => {
  it('calls onDelete when delete button is clicked', () => {
    const onDelete = vi.fn();
    render(<ContactDetail contact={contact} onEdit={vi.fn()} onDelete={onDelete} />);
-    const deleteButton = screen.getAllByRole('button').find(
-      btn => btn.className.includes('text-red')
-    );
-    fireEvent.click(deleteButton!);
+    fireEvent.click(screen.getByLabelText('detail.more_actions'));
+    fireEvent.click(screen.getByRole('menuitem', { name: /context_menu\.delete/ }));
    expect(onDelete).toHaveBeenCalledOnce();
  });
 });
@@ -36,7 +36,6 @@ const defaultProps = {
  onSearchChange: vi.fn(),
  onSelectContact: vi.fn(),
  onCreateNew: vi.fn(),
-  categoryLabel: 'All Contacts',
  selectedContactIds: new Set<string>(),
  onToggleSelection: vi.fn(),
  onSelectRangeContacts: vi.fn(),
@@ -79,8 +78,4 @@ describe('ContactList', () => {
    expect(screen.getByText('bulk.export')).toBeInTheDocument();
  });

-  it('shows category label with count', () => {
-    render(<ContactList {...defaultProps} />);
-    expect(screen.getByText('All Contacts (2)')).toBeInTheDocument();
-  });
 });
@@ -2,12 +2,13 @@

 import { useEffect, useState } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { Mail, CalendarDays, Loader2 } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useRouter } from "@/i18n/navigation";
 import { useAuthStore } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useCalendarStore } from "@/stores/calendar-store";
-import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/ui/avatar";
+import { Section } from "./contact-detail";
 import type { ContactCard, Email, CalendarEvent } from "@/lib/jmap/types";

 const EMAIL_LIMIT = 5;
@@ -43,14 +44,15 @@ function buildEmailFilter(addresses: string[]): Record<string, unknown> {
 }

 function eventInvolvesContact(event: CalendarEvent, addresses: Set<string>): boolean {
-  if (!event.participants) return false;
-  for (const p of Object.values(event.participants)) {
-    const email = p.email?.trim().toLowerCase();
-    if (email && addresses.has(email)) return true;
-    if (p.sendTo) {
-      for (const target of Object.values(p.sendTo)) {
-        const m = typeof target === "string" ? target.match(/mailto:(.+)/i) : null;
-        if (m && addresses.has(m[1].trim().toLowerCase())) return true;
+  if (event.participants) {
+    for (const p of Object.values(event.participants)) {
+      const email = p.email?.trim().toLowerCase();
+      if (email && addresses.has(email)) return true;
+      if (p.sendTo) {
+        for (const target of Object.values(p.sendTo)) {
+          const m = typeof target === "string" ? target.match(/mailto:(.+)/i) : null;
+          if (m && addresses.has(m[1].trim().toLowerCase())) return true;
+        }
      }
    }
  }
@@ -62,6 +64,26 @@ function eventInvolvesContact(event: CalendarEvent, addresses: Set<string>): boo
  return false;
 }

+function getEmailSender(email: Email): { name: string; address: string } {
+  const from = email.from?.[0];
+  return {
+    name: from?.name?.trim() || from?.email || "",
+    address: from?.email || "",
+  };
+}
+
+function groupEventsByDate(events: CalendarEvent[]): Map<string, CalendarEvent[]> {
+  const groups = new Map<string, CalendarEvent[]>();
+  for (const e of events) {
+    const d = new Date(e.start);
+    const key = isNaN(d.getTime()) ? e.start : d.toISOString().slice(0, 10);
+    const arr = groups.get(key) || [];
+    arr.push(e);
+    groups.set(key, arr);
+  }
+  return groups;
+}
+
 export function ContactActivity({ contact }: ContactActivityProps) {
  const t = useTranslations("contacts.activity");
  const format = useFormatter();
@@ -170,111 +192,115 @@ export function ContactActivity({ contact }: ContactActivityProps) {
      : { year: "numeric", month: "short", day: "numeric" });
  };

-  const formatEventDate = (event: CalendarEvent) => {
+  const formatEventTime = (event: CalendarEvent) => {
+    if (event.showWithoutTime) return t("all_day");
    const d = new Date(event.start);
-    if (isNaN(d.getTime())) return event.start;
-    if (event.showWithoutTime) {
-      return format.dateTime(d, { weekday: "short", month: "short", day: "numeric" });
-    }
-    return format.dateTime(d, {
-      weekday: "short",
-      month: "short",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
+    if (isNaN(d.getTime())) return "";
+    return format.dateTime(d, { hour: "numeric", minute: "2-digit" });
  };

+  const formatEventDateHeader = (isoDate: string) => {
+    const d = new Date(isoDate);
+    if (isNaN(d.getTime())) return isoDate;
+    const now = new Date();
+    const sameYear = d.getFullYear() === now.getFullYear();
+    return format.dateTime(d, sameYear
+      ? { weekday: "long", month: "long", day: "numeric" }
+      : { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+  };
+
+  const eventGroups = events ? Array.from(groupEventsByDate(events).entries()) : [];
+
  return (
-    <>
-      <ActivitySection icon={Mail} title={t("recent_emails")}>
+    <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-x-8">
+      <Section title={t("recent_emails")}>
        {emailsLoading ? (
          <LoadingRow />
        ) : emailsError ? (
-          <p className="text-xs text-muted-foreground">{t("load_failed")}</p>
+          <p className="text-sm text-muted-foreground">{t("load_failed")}</p>
        ) : !emails || emails.length === 0 ? (
-          <p className="text-xs text-muted-foreground">{t("no_emails")}</p>
+          <p className="text-sm text-muted-foreground">{t("no_emails")}</p>
        ) : (
-          emails.map((email) => (
-            <button
-              key={email.id}
-              type="button"
-              onClick={() => handleOpenEmail(email)}
-              className="w-full text-left p-2 -mx-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
-            >
-              <div className="flex items-baseline justify-between gap-2">
-                <span className="text-sm font-medium truncate">
-                  {email.subject || t("no_subject")}
-                </span>
-                <span className="text-xs text-muted-foreground flex-shrink-0">
-                  {formatEmailDate(email.receivedAt)}
-                </span>
-              </div>
-              {email.preview && (
-                <p className="text-xs text-muted-foreground truncate mt-0.5">
-                  {email.preview}
-                </p>
-              )}
-            </button>
-          ))
+          <div className="-mx-2">
+            {emails.map((email) => {
+              const sender = getEmailSender(email);
+              return (
+                <button
+                  key={email.id}
+                  type="button"
+                  onClick={() => handleOpenEmail(email)}
+                  className="w-full text-left flex items-start gap-3 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
+                >
+                  <Avatar name={sender.name} email={sender.address} size="sm" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-baseline justify-between gap-2">
+                      <span className="text-sm font-medium truncate">
+                        {sender.name || t("unknown_sender")}
+                      </span>
+                      <span className="text-xs text-muted-foreground flex-shrink-0">
+                        {formatEmailDate(email.receivedAt)}
+                      </span>
+                    </div>
+                    <div className="text-sm truncate">
+                      {email.subject || t("no_subject")}
+                    </div>
+                    {email.preview && (
+                      <p className="text-xs text-muted-foreground truncate mt-0.5">
+                        {email.preview}
+                      </p>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
        )}
-      </ActivitySection>
+      </Section>

-      <ActivitySection icon={CalendarDays} title={t("upcoming_events")}>
+      <Section title={t("upcoming_events")}>
        {eventsLoading ? (
          <LoadingRow />
        ) : eventsError ? (
-          <p className="text-xs text-muted-foreground">{t("load_failed")}</p>
+          <p className="text-sm text-muted-foreground">{t("load_failed")}</p>
        ) : !events || events.length === 0 ? (
-          <p className="text-xs text-muted-foreground">{t("no_events")}</p>
+          <p className="text-sm text-muted-foreground">{t("no_events")}</p>
        ) : (
-          events.map((event) => (
-            <button
-              key={event.id}
-              type="button"
-              onClick={() => handleOpenEvent(event)}
-              className="w-full text-left p-2 -mx-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
-            >
-              <div className="flex items-baseline justify-between gap-2">
-                <span className="text-sm font-medium truncate">
-                  {event.title || t("no_title")}
-                </span>
-                <span className="text-xs text-muted-foreground flex-shrink-0">
-                  {formatEventDate(event)}
-                </span>
+          <div className="space-y-4">
+            {eventGroups.map(([dateKey, group]) => (
+              <div key={dateKey}>
+                <div className="text-xs font-medium text-muted-foreground mb-1.5">
+                  {formatEventDateHeader(dateKey)}
+                </div>
+                <div className="-mx-2">
+                  {group.map((event) => (
+                    <button
+                      key={event.id}
+                      type="button"
+                      onClick={() => handleOpenEvent(event)}
+                      className="w-full text-left flex items-baseline gap-3 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors touch-manipulation"
+                    >
+                      <span className="text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0">
+                        {formatEventTime(event)}
+                      </span>
+                      <span className="text-sm truncate flex-1 min-w-0">
+                        {event.title || t("no_title")}
+                      </span>
+                    </button>
+                  ))}
+                </div>
              </div>
-            </button>
-          ))
+            ))}
+          </div>
        )}
-      </ActivitySection>
-    </>
-  );
-}
-
-function ActivitySection({
-  icon: Icon,
-  title,
-  children,
-}: {
-  icon: React.ComponentType<{ className?: string }>;
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={cn("rounded-lg border border-border bg-card p-4 border-l-[3px]", "border-l-rose-400 dark:border-l-rose-500")}>
-      <div className="flex items-center gap-2 mb-2.5">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
-      </div>
-      <div className="space-y-1 pl-6">{children}</div>
+      </Section>
    </div>
  );
 }

 function LoadingRow() {
  return (
-    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-      <Loader2 className="w-3.5 h-3.5 animate-spin" />
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <Loader2 className="w-4 h-4 animate-spin" />
    </div>
  );
 }
@@ -11,16 +11,25 @@ import {
  Eye,
  Pencil,
  Mail,
+  Phone,
  ClipboardCopy,
  Download,
  Users,
  Trash2,
+  Copy,
+  Printer,
 } from "lucide-react";
 import type { ContactCard } from "@/lib/jmap/types";
 import { getContactPrimaryEmail } from "@/stores/contact-store";
 import { exportContact } from "./contact-export";
+import { printContact } from "./contact-print";
 import { toast } from "@/stores/toast-store";

+function getContactPrimaryPhone(contact: ContactCard): string {
+  if (!contact.phones) return "";
+  return Object.values(contact.phones)[0]?.number || "";
+}
+
 interface Position {
  x: number;
  y: number;
@@ -38,6 +47,7 @@ interface ContactContextMenuProps {
  onEdit: () => void;
  onDelete: () => void;
  onAddToGroup: () => void;
+  onDuplicate?: () => void;
  onBatchExport?: () => void;
  onBatchAddToGroup?: () => void;
  onBatchDelete?: () => void;
@@ -55,12 +65,14 @@ export function ContactContextMenu({
  onEdit,
  onDelete,
  onAddToGroup,
+  onDuplicate,
  onBatchExport,
  onBatchAddToGroup,
  onBatchDelete,
 }: ContactContextMenuProps) {
  const t = useTranslations("contacts");
  const email = getContactPrimaryEmail(contact);
+  const phone = getContactPrimaryPhone(contact);
  const showBatchActions = isMultiSelect && selectedCount > 1;

  const handle = (fn: () => void) => () => {
@@ -73,10 +85,15 @@ export function ContactContextMenu({
    window.location.href = `mailto:${email}`;
  };

-  const handleCopyEmail = async () => {
-    if (!email) return;
+  const handleCall = () => {
+    if (!phone) return;
+    window.location.href = `tel:${phone}`;
+  };
+
+  const handleCopy = async (value: string) => {
+    if (!value) return;
    try {
-      await navigator.clipboard.writeText(email);
+      await navigator.clipboard.writeText(value);
      toast.success(t("detail.copied"));
    } catch {
      toast.error(t("detail.copy_failed"));
@@ -88,6 +105,10 @@ export function ContactContextMenu({
    toast.success(t("export.success", { count: 1 }));
  };

+  const handlePrint = () => {
+    printContact(contact);
+  };
+
  if (showBatchActions) {
    return (
      <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
@@ -122,20 +143,34 @@ export function ContactContextMenu({
    <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
      <ContextMenuItem icon={Eye} label={t("context_menu.open")} onClick={handle(onOpen)} />
      <ContextMenuItem icon={Pencil} label={t("context_menu.edit")} onClick={handle(onEdit)} />
+      {(email || phone) && <ContextMenuSeparator />}
      {email && (
-        <>
-          <ContextMenuSeparator />
-          <ContextMenuItem
-            icon={Mail}
-            label={t("context_menu.send_email")}
-            onClick={handle(handleSendEmail)}
-          />
-          <ContextMenuItem
-            icon={ClipboardCopy}
-            label={t("detail.copy_email")}
-            onClick={handle(handleCopyEmail)}
-          />
-        </>
+        <ContextMenuItem
+          icon={Mail}
+          label={t("context_menu.send_email")}
+          onClick={handle(handleSendEmail)}
+        />
+      )}
+      {phone && (
+        <ContextMenuItem
+          icon={Phone}
+          label={t("context_menu.call")}
+          onClick={handle(handleCall)}
+        />
+      )}
+      {email && (
+        <ContextMenuItem
+          icon={ClipboardCopy}
+          label={t("detail.copy_email")}
+          onClick={handle(() => handleCopy(email))}
+        />
+      )}
+      {phone && (
+        <ContextMenuItem
+          icon={ClipboardCopy}
+          label={t("detail.copy_phone")}
+          onClick={handle(() => handleCopy(phone))}
+        />
      )}
      <ContextMenuSeparator />
      <ContextMenuItem
@@ -143,11 +178,23 @@ export function ContactContextMenu({
        label={t("context_menu.add_to_group")}
        onClick={handle(onAddToGroup)}
      />
+      {onDuplicate && (
+        <ContextMenuItem
+          icon={Copy}
+          label={t("context_menu.duplicate")}
+          onClick={handle(onDuplicate)}
+        />
+      )}
      <ContextMenuItem
        icon={Download}
        label={t("context_menu.export_vcard")}
        onClick={handle(handleExport)}
      />
+      <ContextMenuItem
+        icon={Printer}
+        label={t("context_menu.print")}
+        onClick={handle(handlePrint)}
+      />
      <ContextMenuSeparator />
      <ContextMenuItem
        icon={Trash2}
@@ -1,23 +1,37 @@
 "use client";

-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, Tag, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download } from "lucide-react";
+import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download, MoreHorizontal, Printer } from "lucide-react";
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { ContactCard, AnniversaryDate, PartialDate } from "@/lib/jmap/types";
-import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
+import { getContactDisplayName, getContactPrimaryEmail, getContactPhotoUri } from "@/stores/contact-store";
 import { ContactActivity } from "./contact-activity";
 import { useSmimeStore } from "@/stores/smime-store";
 import { parseCertificatePemOrDer, extractCertificateInfo } from "@/lib/smime/certificate-utils";
 import type { CertificateInfo } from "@/lib/smime/types";
 import { toast } from "@/stores/toast-store";
+import { exportContact } from "./contact-export";
+import { printContact } from "./contact-print";
+
+type MoreItem =
+  | {
+      icon: React.ComponentType<{ className?: string }>;
+      label: string;
+      onClick: () => void;
+      destructive?: boolean;
+      separator?: false;
+    }
+  | { separator: true };

 interface ContactDetailProps {
  contact: ContactCard | null;
  onEdit: () => void;
  onDelete: () => void;
+  onAddToGroup?: () => void;
+  onDuplicate?: () => void;
  isMobile?: boolean;
  className?: string;
 }
@@ -27,9 +41,45 @@ function formatPhoneFeatures(features?: Record<string, boolean>): string {
  return Object.keys(features).filter(k => features[k]).join(", ");
 }

+function getDateParts(dateInput: AnniversaryDate): { year?: number; month?: number; day?: number } {
+  if (typeof dateInput === "object" && dateInput !== null) {
+    if (dateInput["@type"] === "Timestamp" && typeof dateInput.utc === "string") {
+      const d = new Date(dateInput.utc);
+      if (!isNaN(d.getTime())) {
+        return { year: d.getUTCFullYear(), month: d.getUTCMonth() + 1, day: d.getUTCDate() };
+      }
+      return {};
+    }
+    const pd = dateInput as PartialDate;
+    return { year: pd.year, month: pd.month, day: pd.day };
+  }
+  const s = String(dateInput);
+  if (s.startsWith("--")) {
+    const parts = s.substring(2).split("-");
+    return { month: parseInt(parts[0], 10), day: parts[1] ? parseInt(parts[1], 10) : undefined };
+  }
+  const d = new Date(s);
+  if (!isNaN(d.getTime())) {
+    return { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() };
+  }
+  return {};
+}
+
+function getCompletedYears(dateInput: AnniversaryDate): number | null {
+  const { year, month, day } = getDateParts(dateInput);
+  if (!year) return null;
+  const now = new Date();
+  let years = now.getFullYear() - year;
+  const m = month ?? 1;
+  const d = day ?? 1;
+  const nowM = now.getMonth() + 1;
+  const nowD = now.getDate();
+  if (nowM < m || (nowM === m && nowD < d)) years -= 1;
+  if (years < 0) return null;
+  return years;
+}
+
 function formatDate(dateInput: AnniversaryDate): string {
-  // Handle RFC 9553 PartialDate objects: { year?, month?, day?, calendarScale? }
-  // Handle RFC 9553 Timestamp objects: { "@type": "Timestamp", utc: "..." }
  if (typeof dateInput === 'object' && dateInput !== null) {
    if (dateInput['@type'] === 'Timestamp' && typeof dateInput.utc === 'string') {
      try {
@@ -41,20 +91,15 @@ function formatDate(dateInput: AnniversaryDate): string {
      return String(dateInput.utc);
    }
    const pd = dateInput as PartialDate;
-    const year = pd.year;
-    const month = pd.month;
-    const day = pd.day;
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const parts: string[] = [];
-    if (month && monthNames[month - 1]) parts.push(monthNames[month - 1]);
-    if (day) parts.push(String(day));
-    if (year) parts.push(String(year));
+    if (pd.month && monthNames[pd.month - 1]) parts.push(monthNames[pd.month - 1]);
+    if (pd.day) parts.push(String(pd.day));
+    if (pd.year) parts.push(String(pd.year));
    return parts.join(' ') || String(dateInput);
  }
  const dateStr = String(dateInput);
-  // Handle both ISO dates and partial dates like 1990-01-15 or --01-15
  if (dateStr.startsWith("--")) {
-    // Partial date without year
    const parts = dateStr.substring(2).split("-");
    const month = parseInt(parts[0], 10);
    const day = parts[1] ? parseInt(parts[1], 10) : undefined;
@@ -70,7 +115,7 @@ function formatDate(dateInput: AnniversaryDate): string {
  return dateStr;
 }

-export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }: ContactDetailProps) {
+export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, isMobile, className }: ContactDetailProps) {
  const t = useTranslations("contacts");
  const smimeStore = useSmimeStore();
  const [parsedCerts, setParsedCerts] = useState<Map<number, CertificateInfo>>(new Map());
@@ -88,7 +133,6 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
        try {
          let derBytes: ArrayBuffer | string | null = null;
          if (key.uri.startsWith('data:')) {
-            // data URI - extract base64 content
            const commaIdx = key.uri.indexOf(',');
            if (commaIdx === -1) continue;
            const b64 = key.uri.substring(commaIdx + 1);
@@ -97,7 +141,6 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
            for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
            derBytes = bytes.buffer;
          } else if (key.uri.startsWith('-----BEGIN')) {
-            // PEM-encoded certificate inline
            derBytes = key.uri;
          }
          if (!derBytes) continue;
@@ -128,6 +171,29 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }

  const name = getContactDisplayName(contact);
  const email = getContactPrimaryEmail(contact);
+  const photoUri = getContactPhotoUri(contact);
+  const phone = contact.phones ? Object.values(contact.phones)[0]?.number : undefined;
+
+  const handleExport = () => {
+    exportContact(contact);
+    toast.success(t("export.success", { count: 1 }));
+  };
+
+  const handlePrint = () => {
+    printContact(contact, name);
+  };
+
+  const moreItems: MoreItem[] = [];
+  if (onAddToGroup) {
+    moreItems.push({ icon: Users, label: t("context_menu.add_to_group"), onClick: onAddToGroup });
+  }
+  if (onDuplicate) {
+    moreItems.push({ icon: Copy, label: t("context_menu.duplicate"), onClick: onDuplicate });
+  }
+  moreItems.push({ icon: Download, label: t("context_menu.export_vcard"), onClick: handleExport });
+  moreItems.push({ icon: Printer, label: t("context_menu.print"), onClick: handlePrint });
+  moreItems.push({ separator: true });
+  moreItems.push({ icon: Trash2, label: t("context_menu.delete"), onClick: onDelete, destructive: true });
  const emails = contact.emails ? Object.values(contact.emails) : [];
  const phones = contact.phones ? Object.values(contact.phones) : [];
  const orgs = contact.organizations ? Object.values(contact.organizations) : [];
@@ -171,257 +237,259 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }

  const hasNickname = nicknames.length > 0;
  const titleLine = jobTitles.length > 0 ? jobTitles.map(t => t.name).join(", ") : undefined;
+  const subtitleParts = [titleLine, orgs[0]?.name].filter(Boolean) as string[];
+  const hasContactDetails = emails.length > 0 || phones.length > 0 || addresses.length > 0 || onlineServices.length > 0;
+  const hasWork = titles.length > 0 || orgs.length > 0;
+  const hasGender = !!(contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns));
+  const hasPersonal = anniversaries.length > 0 || personalInfo.length > 0 || hasGender || preferredLanguages.length > 0;

  return (
    <div className={cn("flex flex-col h-full overflow-y-auto", className)}>
      <div className={cn("border-b border-border", isMobile ? "px-4 py-4" : "px-6 py-6")}>
        <div className={cn("flex gap-4", isMobile ? "flex-col" : "items-start justify-between")}>
-          <div className="flex items-center gap-4">
-            <Avatar name={name} email={email} size={isMobile ? "md" : "lg"} />
+          <div className="flex items-center gap-4 min-w-0 flex-1">
+            <Avatar name={name} email={email} contactPhotoUri={photoUri} size={isMobile ? "md" : "lg"} />
            <div className="min-w-0 flex-1">
              <h2 className={cn("font-semibold truncate", isMobile ? "text-lg" : "text-xl")}>{name || "-"}</h2>
              {hasNickname && (
                <p className="text-sm text-muted-foreground truncate">&ldquo;{nicknames.map(n => n.name).join(", ")}&rdquo;</p>
              )}
-              {titleLine && (
-                <p className="text-sm text-muted-foreground truncate">{titleLine}</p>
-              )}
-              {orgs.length > 0 && orgs[0].name && (
-                <p className="text-sm text-muted-foreground truncate">{orgs[0].name}</p>
+              {subtitleParts.length > 0 && (
+                <p className="text-sm text-muted-foreground truncate">{subtitleParts.join(" · ")}</p>
              )}
            </div>
          </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-shrink-0 flex-wrap">
+            {email && (
+              <a
+                href={`mailto:${email}`}
+                className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
+              >
+                <Send className="w-4 h-4 mr-1" />
+                {t("detail.compose_email")}
+              </a>
+            )}
+            {phone && (
+              <a
+                href={`tel:${phone}`}
+                className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
+              >
+                <Phone className="w-4 h-4 mr-1" />
+                {t("context_menu.call")}
+              </a>
+            )}
            <Button variant="outline" size="sm" onClick={onEdit} className="touch-manipulation">
              <Pencil className="w-4 h-4 mr-1" />
              {t("form.edit_title")}
            </Button>
-            <Button variant="outline" size="sm" onClick={onDelete} className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950 touch-manipulation">
-              <Trash2 className="w-4 h-4" />
-            </Button>
+            <MoreActionsMenu items={moreItems} label={t("detail.more_actions")} />
          </div>
        </div>
      </div>

-      <div className="px-6 py-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <ContactActivity contact={contact} />
-
-          {/* Contact info */}
-          {emails.length > 0 && (
-            <Section icon={Mail} title={t("detail.emails")} category="contact">
+      <div className={cn("divide-y divide-border/60", isMobile ? "px-4" : "px-6")}>
+        {hasContactDetails && (
+          <Section title={t("detail.section_contact")}>
+            <div className="space-y-3">
              {emails.map((e, i) => (
-                <div key={i} className="flex items-center gap-2 group">
-                  <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline">
-                    {e.address}
-                  </a>
-                  {e.contexts && <ContextBadge contexts={e.contexts} />}
-                  {e.label && <span className="text-xs text-muted-foreground">({e.label})</span>}
-                  <div className={cn(
-                    "flex items-center gap-0.5 transition-opacity",
-                    isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                  )}>
-                    <a
-                      href={`mailto:${e.address}`}
-                      className="p-1.5 rounded hover:bg-muted transition-colors touch-manipulation"
-                      title={t("detail.compose_email")}
-                      aria-label={t("detail.compose_email")}
-                    >
-                      <Send className="w-3.5 h-3.5 text-muted-foreground" />
+                <FieldRow key={`em${i}`} icon={Mail} label={e.label || formatContexts(e.contexts) || t("detail.email_default_label")}>
+                  <div className="flex items-center gap-2 group">
+                    <a href={`mailto:${e.address}`} className="text-sm text-primary hover:underline break-all">
+                      {e.address}
                    </a>
-                    <CopyButton value={e.address} label={t("detail.copy_email")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                    <RowActions>
+                      <a
+                        href={`mailto:${e.address}`}
+                        className="p-1.5 rounded hover:bg-muted transition-colors touch-manipulation"
+                        title={t("detail.compose_email")}
+                        aria-label={t("detail.compose_email")}
+                      >
+                        <Send className="w-3.5 h-3.5 text-muted-foreground" />
+                      </a>
+                      <CopyButton value={e.address} label={t("detail.copy_email")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                    </RowActions>
                  </div>
-                </div>
+                </FieldRow>
              ))}
-            </Section>
-          )}

-          {phones.length > 0 && (
-            <Section icon={Phone} title={t("detail.phones")} category="contact">
              {phones.map((p, i) => {
-                const featureStr = formatPhoneFeatures(p.features);
+                const features = formatPhoneFeatures(p.features);
+                const labelParts = [p.label, formatContexts(p.contexts), features].filter(Boolean) as string[];
                return (
-                  <div key={i} className="flex items-center gap-2 group">
-                    <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
-                      {p.number}
-                    </a>
-                    {p.contexts && <ContextBadge contexts={p.contexts} />}
-                    {featureStr && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{featureStr}</span>
-                    )}
-                    <CopyButton
-                      value={p.number}
-                      label={t("detail.copy_phone")}
-                      successMsg={t("detail.copied")}
-                      failMsg={t("detail.copy_failed")}
-                      className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
-                    />
-                  </div>
+                  <FieldRow key={`ph${i}`} icon={Phone} label={labelParts.length ? labelParts.join(" · ") : t("detail.phone_default_label")}>
+                    <div className="flex items-center gap-2 group">
+                      <a href={`tel:${p.number}`} className="text-sm text-primary hover:underline">
+                        {p.number}
+                      </a>
+                      <RowActions>
+                        <CopyButton value={p.number} label={t("detail.copy_phone")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                      </RowActions>
+                    </div>
+                  </FieldRow>
                );
              })}
-            </Section>
-          )}

-          {(roles.length > 0 || jobTitles.length > 1) && (
-            <Section icon={Briefcase} title={t("detail.titles")} category="work">
-              {titles.map((tl, i) => (
-                <div key={i} className="text-sm flex items-center gap-2">
-                  <span>{tl.name}</span>
-                  {tl.kind && (
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{tl.kind}</span>
-                  )}
-                </div>
-              ))}
-            </Section>
-          )}
-
-          {orgs.length > 0 && (
-            <Section icon={Building} title={t("detail.organizations")} category="work">
-              {orgs.map((o, i) => (
-                <div key={i} className="text-sm">
-                  {o.name}
-                  {o.units && o.units.length > 0 && (
-                    <span className="text-muted-foreground"> - {o.units.map(u => u.name).join(", ")}</span>
-                  )}
-                </div>
-              ))}
-            </Section>
-          )}
-
-          {/* Addresses span full width */}
-          {addresses.length > 0 && (
-            <div className="md:col-span-2 xl:col-span-3">
-              <Section icon={MapPin} title={t("detail.addresses")} category="location">
-                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-                  {addresses.map((a, i) => (
-                    <div key={i} className="text-sm space-y-0.5 rounded-md border border-border/60 bg-muted/30 p-3">
-                      <div>
-                        {a.full || a.fullAddress
-                          ? (a.full || a.fullAddress)
-                          : a.components && a.components.length > 0
-                            ? a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ")
-                            : [a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
-                        {a.contexts && <ContextBadge contexts={a.contexts} />}
-                      </div>
+              {addresses.map((a, i) => {
+                const lines: string[] = [];
+                if (a.full || a.fullAddress) {
+                  lines.push((a.full || a.fullAddress) as string);
+                } else if (a.components && a.components.length > 0) {
+                  const joined = a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ");
+                  if (joined) lines.push(joined);
+                } else {
+                  const parts = [a.street, [a.postcode, a.locality].filter(Boolean).join(" "), a.region, a.country]
+                    .map(s => (typeof s === "string" ? s.trim() : ""))
+                    .filter(Boolean) as string[];
+                  lines.push(...parts);
+                }
+                return (
+                  <FieldRow key={`ad${i}`} icon={MapPin} label={formatContexts(a.contexts) || t("detail.address_default_label")}>
+                    <div className="text-sm space-y-0.5">
+                      {lines.map((line, idx) => (
+                        <div key={idx}>{line}</div>
+                      ))}
                      {a.timeZone && (
                        <div className="text-xs text-muted-foreground">{t("detail.timezone")}: {a.timeZone}</div>
                      )}
                    </div>
-                  ))}
-                </div>
-              </Section>
-            </div>
-          )}
+                  </FieldRow>
+                );
+              })}

-          {onlineServices.length > 0 && (
-            <Section icon={Globe} title={t("detail.online_services")} category="digital">
              {onlineServices.map((svc, i) => (
-                <div key={i} className="flex items-center gap-2 group">
-                  {typeof svc.uri === 'string' && svc.uri.startsWith("http") ? (
-                    <a href={svc.uri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
-                      {svc.user || svc.uri}
-                    </a>
-                  ) : (
-                    <span className="text-sm break-all">{svc.user || String(svc.uri ?? '')}</span>
-                  )}
-                  {svc.service && (
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{svc.service}</span>
-                  )}
-                  {svc.contexts && <ContextBadge contexts={svc.contexts} />}
-                  <CopyButton
-                    value={svc.user || svc.uri}
-                    label={t("detail.copy_url")}
-                    successMsg={t("detail.copied")}
-                    failMsg={t("detail.copy_failed")}
-                    className={isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
-                  />
-                </div>
+                <FieldRow
+                  key={`os${i}`}
+                  icon={Globe}
+                  label={[svc.service, formatContexts(svc.contexts)].filter(Boolean).join(" · ") || t("detail.online_service_default_label")}
+                >
+                  <div className="flex items-center gap-2 group">
+                    {typeof svc.uri === 'string' && svc.uri.startsWith("http") ? (
+                      <a href={svc.uri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                        {svc.user || svc.uri}
+                      </a>
+                    ) : (
+                      <span className="text-sm break-all">{svc.user || String(svc.uri ?? '')}</span>
+                    )}
+                    <RowActions>
+                      <CopyButton value={svc.user || svc.uri} label={t("detail.copy_url")} successMsg={t("detail.copied")} failMsg={t("detail.copy_failed")} />
+                    </RowActions>
+                  </div>
+                </FieldRow>
              ))}
-            </Section>
-          )}
+            </div>
+          </Section>
+        )}

-          {anniversaries.length > 0 && (
-            <Section icon={Cake} title={t("detail.anniversaries")} category="personal">
-              {anniversaries.map((ann, i) => (
-                <div key={i} className="flex items-center gap-2 text-sm">
-                  <span>{formatDate(ann.date)}</span>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
-                    {t(`detail.anniversary_${ann.kind}`)}
-                  </span>
-                </div>
+        {hasWork && (
+          <Section title={t("detail.section_work")}>
+            <div className="space-y-3">
+              {orgs.map((o, i) => (
+                <FieldRow key={`org${i}`} icon={Building} label={t("detail.organization_label")}>
+                  <div className="text-sm">
+                    {o.name}
+                    {o.units && o.units.length > 0 && (
+                      <span className="text-muted-foreground"> · {o.units.map(u => u.name).join(", ")}</span>
+                    )}
+                  </div>
+                </FieldRow>
              ))}
-            </Section>
-          )}
-
-          {personalInfo.length > 0 && (
-            <Section icon={Heart} title={t("detail.personal_info")} category="personal">
-              {personalInfo.map((pi, i) => (
-                <div key={i} className="flex items-center gap-2 text-sm">
-                  <span>{pi.value}</span>
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{t(`detail.personal_${pi.kind}`)}</span>
-                  {pi.level && (
-                    <span className="text-xs text-muted-foreground">({pi.level})</span>
-                  )}
-                </div>
+              {titles.map((tl, i) => (
+                <FieldRow
+                  key={`tl${i}`}
+                  icon={Briefcase}
+                  label={tl.kind === "role" ? t("detail.role_label") : t("detail.title_label")}
+                >
+                  <div className="text-sm">{tl.name}</div>
+                </FieldRow>
              ))}
-            </Section>
-          )}
+            </div>
+          </Section>
+        )}

-          {contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns) && (
-            <Section icon={UserCircle} title={t("detail.gender")} category="personal">
-              <div className="text-sm">
-                {contact.speakToAs.grammaticalGender && <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>}
-                {contact.speakToAs.pronouns && (() => {
-                  const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
-                  return firstPronoun ? (
-                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " - " : ""}{firstPronoun}</span>
-                  ) : null;
-                })()}
-              </div>
-            </Section>
-          )}
-
-          {preferredLanguages.length > 0 && (
-            <Section icon={Languages} title={t("detail.languages")} category="personal">
+        {hasPersonal && (
+          <Section title={t("detail.section_personal")}>
+            <div className="space-y-3">
+              {anniversaries.map((ann, i) => {
+                const years = getCompletedYears(ann.date);
+                const suffixKey = ann.kind === "birth" ? "detail.age_years" : "detail.years_since";
+                return (
+                  <FieldRow key={`an${i}`} icon={Cake} label={t(`detail.anniversary_${ann.kind}`)}>
+                    <div className="text-sm">
+                      {formatDate(ann.date)}
+                      {years !== null && (
+                        <span className="text-muted-foreground"> · {t(suffixKey, { count: years })}</span>
+                      )}
+                    </div>
+                  </FieldRow>
+                );
+              })}
+              {hasGender && (
+                <FieldRow icon={UserCircle} label={t("detail.gender")}>
+                  <div className="text-sm">
+                    {contact.speakToAs?.grammaticalGender && (
+                      <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>
+                    )}
+                    {contact.speakToAs?.pronouns && (() => {
+                      const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
+                      return firstPronoun ? (
+                        <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " · " : ""}{firstPronoun}</span>
+                      ) : null;
+                    })()}
+                  </div>
+                </FieldRow>
+              )}
              {preferredLanguages.map((lang, i) => (
-                <div key={i} className="flex items-center gap-2 text-sm">
-                  <span>{lang.language}</span>
-                  {lang.contexts && <ContextBadge contexts={lang.contexts} />}
-                </div>
+                <FieldRow
+                  key={`lg${i}`}
+                  icon={Languages}
+                  label={formatContexts(lang.contexts) || t("detail.language_label")}
+                >
+                  <div className="text-sm">{lang.language}</div>
+                </FieldRow>
              ))}
-            </Section>
-          )}
+              {personalInfo.map((pi, i) => (
+                <FieldRow
+                  key={`pi${i}`}
+                  icon={Heart}
+                  label={`${t(`detail.personal_${pi.kind}`)}${pi.level ? ` · ${pi.level}` : ""}`}
+                >
+                  <div className="text-sm">{pi.value}</div>
+                </FieldRow>
+              ))}
+            </div>
+          </Section>
+        )}

-          {keywords.length > 0 && (
-            <Section icon={Tag} title={t("detail.categories")} category="digital">
-              <div className="flex flex-wrap gap-1.5">
-                {keywords.map((kw, i) => (
-                  <span key={i} className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
-                    {kw}
-                  </span>
-                ))}
-              </div>
-            </Section>
-          )}
+        {keywords.length > 0 && (
+          <Section title={t("detail.categories")}>
+            <div className="flex flex-wrap gap-1.5">
+              {keywords.map((kw, i) => (
+                <span key={i} className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
+                  {kw}
+                </span>
+              ))}
+            </div>
+          </Section>
+        )}

-          {relatedTo.length > 0 && (
-            <Section icon={Users} title={t("detail.related_contacts")} category="personal">
+        {relatedTo.length > 0 && (
+          <Section title={t("detail.related_contacts")}>
+            <div className="space-y-2">
              {relatedTo.map(([uri, rel], i) => {
                const relType = rel.relation ? Object.keys(rel.relation).find(k => rel.relation![k]) : undefined;
                return (
-                  <div key={i} className="flex items-center gap-2 text-sm">
-                    <span>{uri}</span>
-                    {relType && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{relType}</span>
-                    )}
-                  </div>
+                  <FieldRow key={`rel${i}`} icon={Users} label={relType || t("detail.related_default_label")}>
+                    <div className="text-sm break-all">{uri}</div>
+                  </FieldRow>
                );
              })}
-            </Section>
-          )}
+            </div>
+          </Section>
+        )}

-          {cryptoKeys.length > 0 && (
-            <Section icon={KeyRound} title={t("detail.crypto_keys")} category="digital">
+        {cryptoKeys.length > 0 && (
+          <Section title={t("detail.crypto_keys")}>
+            <div className="space-y-3">
              {cryptoKeys.map((key, i) => {
                const certInfo = parsedCerts.get(i);
                const isExpired = certInfo ? new Date(certInfo.notAfter) < new Date() : false;
@@ -430,7 +498,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                  : false;

                return (
-                  <div key={i} className="p-3 rounded-lg border border-border space-y-1">
+                  <div key={i} className="rounded-md border border-border/60 bg-muted/30 p-3 space-y-1">
                    {certInfo ? (
                      <>
                        <div className="flex items-center gap-2">
@@ -451,12 +519,7 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                          {certInfo.algorithm && <p>{t("detail.cert_algorithm")}: {certInfo.algorithm}</p>}
                        </div>
                        {!alreadyImported && (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="ml-4 mt-1"
-                            onClick={() => handleImportContactCert(i)}
-                          >
+                          <Button variant="ghost" size="sm" className="ml-4 mt-1" onClick={() => handleImportContactCert(i)}>
                            <Download className="w-3 h-3 mr-1" />
                            {t("detail.import_to_smime")}
                          </Button>
@@ -466,7 +529,8 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                        )}
                      </>
                    ) : (
-                      <div className="text-sm break-all">
+                      <div className="flex items-start gap-2 text-sm break-all">
+                        <KeyRound className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                        {typeof key.uri === 'string' && key.uri.startsWith("http") ? (
                          <a href={key.uri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                            {key.uri}
@@ -479,91 +543,168 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                  </div>
                );
              })}
-            </Section>
-          )}
+            </div>
+          </Section>
+        )}

-          {(contact.calendarUri || contact.schedulingUri || contact.freeBusyUri) && (
-            <Section icon={Calendar} title={t("detail.calendar")} category="calendar">
+        {(contact.calendarUri || contact.schedulingUri || contact.freeBusyUri) && (
+          <Section title={t("detail.calendar")}>
+            <div className="space-y-3">
              {contact.calendarUri && (
-                <div className="text-sm">
-                  <span className="text-muted-foreground">{t("detail.calendar_uri")}: </span>
-                  <a href={contact.calendarUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.calendarUri}</a>
-                </div>
+                <FieldRow icon={Calendar} label={t("detail.calendar_uri")}>
+                  <a href={contact.calendarUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                    {contact.calendarUri}
+                  </a>
+                </FieldRow>
              )}
              {contact.schedulingUri && (
-                <div className="text-sm">
-                  <span className="text-muted-foreground">{t("detail.scheduling_uri")}: </span>
-                  <a href={contact.schedulingUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.schedulingUri}</a>
-                </div>
+                <FieldRow icon={Calendar} label={t("detail.scheduling_uri")}>
+                  <a href={contact.schedulingUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                    {contact.schedulingUri}
+                  </a>
+                </FieldRow>
              )}
              {contact.freeBusyUri && (
-                <div className="text-sm">
-                  <span className="text-muted-foreground">{t("detail.freebusy_uri")}: </span>
-                  <a href={contact.freeBusyUri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{contact.freeBusyUri}</a>
-                </div>
+                <FieldRow icon={Calendar} label={t("detail.freebusy_uri")}>
+                  <a href={contact.freeBusyUri} target="_blank" rel="noopener noreferrer" className="text-sm text-primary hover:underline break-all">
+                    {contact.freeBusyUri}
+                  </a>
+                </FieldRow>
              )}
-            </Section>
-          )}
+            </div>
+          </Section>
+        )}

-          {/* Notes span full width */}
-          {notes.length > 0 && (
-            <div className="md:col-span-2 xl:col-span-3">
-              <Section icon={StickyNote} title={t("detail.notes")} category="notes">
+        {notes.length > 0 && (
+          <Section title={t("detail.notes")}>
+            <div className="flex items-start gap-3">
+              <StickyNote className="w-4 h-4 text-muted-foreground mt-1 flex-shrink-0" />
+              <div className="text-sm space-y-2 flex-1 min-w-0">
                {notes.map((n, i) => (
-                  <p key={i} className="text-sm whitespace-pre-wrap">{n.note}</p>
+                  <p key={i} className="whitespace-pre-wrap">{n.note}</p>
                ))}
-              </Section>
+              </div>
            </div>
-          )}
+          </Section>
+        )}

-          {/* Timestamps span full width */}
-          {(contact.created || contact.updated) && (
-            <div className="md:col-span-2 xl:col-span-3 pt-2 border-t border-border text-xs text-muted-foreground space-y-1">
-              {contact.created && <div>{t("detail.created")}: {formatDate(contact.created)}</div>}
-              {contact.updated && <div>{t("detail.updated")}: {formatDate(contact.updated)}</div>}
-            </div>
-          )}
+        <ContactActivity contact={contact} />
+
+        {(contact.created || contact.updated) && (
+          <div className="py-4 text-xs text-muted-foreground space-y-1">
+            {contact.created && <div>{t("detail.created")}: {formatDate(contact.created)}</div>}
+            {contact.updated && <div>{t("detail.updated")}: {formatDate(contact.updated)}</div>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatContexts(contexts?: Record<string, boolean>): string {
+  if (!contexts) return "";
+  return Object.keys(contexts).filter(k => contexts[k]).join(", ");
+}
+
+export function Section({ title, children, className }: { title: string; children: React.ReactNode; className?: string }) {
+  return (
+    <section className={cn("py-6", className)}>
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function FieldRow({ icon: Icon, label, children }: { icon: React.ComponentType<{ className?: string }>; label?: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3">
+      <Icon className="w-4 h-4 text-muted-foreground mt-1 flex-shrink-0" />
+      <div className="flex-1 min-w-0">
+        {label && <div className="text-xs text-muted-foreground mb-0.5">{label}</div>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function RowActions({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+      {children}
+    </div>
+  );
+}
+
+function MoreActionsMenu({ items, label }: { items: MoreItem[]; label: string }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocMouseDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div ref={ref} className="relative">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setOpen((o) => !o)}
+        title={label}
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="touch-manipulation"
+      >
+        <MoreHorizontal className="w-4 h-4" />
+      </Button>
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1 z-30 min-w-[200px] rounded-md border border-border bg-popover text-popover-foreground shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+        >
+          {items.map((item, i) => {
+            if (item.separator) {
+              return <div key={i} role="separator" className="my-1 h-px bg-border" />;
+            }
+            return (
+              <button
+                key={i}
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  item.onClick();
+                  setOpen(false);
+                }}
+                className={cn(
+                  "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-muted focus:bg-muted focus:outline-none transition-colors",
+                  item.destructive && "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 focus:bg-red-50 dark:focus:bg-red-950",
+                )}
+              >
+                <item.icon className={cn("w-4 h-4 flex-shrink-0", item.destructive ? "text-red-600 dark:text-red-400" : "text-muted-foreground")} />
+                <span className="flex-1">{item.label}</span>
+              </button>
+            );
+          })}
        </div>
-      </div>
+      )}
    </div>
  );
 }

-type SectionCategory = "contact" | "work" | "location" | "personal" | "digital" | "calendar" | "notes";
-
-const categoryStyles: Record<SectionCategory, string> = {
-  contact: "border-l-blue-400 dark:border-l-blue-500",
-  work: "border-l-amber-400 dark:border-l-amber-500",
-  location: "border-l-emerald-400 dark:border-l-emerald-500",
-  personal: "border-l-violet-400 dark:border-l-violet-500",
-  digital: "border-l-cyan-400 dark:border-l-cyan-500",
-  calendar: "border-l-rose-400 dark:border-l-rose-500",
-  notes: "border-l-stone-400 dark:border-l-stone-500",
-};
-
-function Section({ icon: Icon, title, children, category = "contact" }: { icon: React.ComponentType<{ className?: string }>; title: string; children: React.ReactNode; category?: SectionCategory }) {
-  return (
-    <div className={cn("rounded-lg border border-border bg-card p-4 border-l-[3px]", categoryStyles[category])}>
-      <div className="flex items-center gap-2 mb-2.5">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
-      </div>
-      <div className="space-y-1.5 pl-6">{children}</div>
-    </div>
-  );
-}
-
-function ContextBadge({ contexts }: { contexts: Record<string, boolean> }) {
-  const labels = Object.keys(contexts).filter(k => contexts[k]);
-  if (labels.length === 0) return null;
-
-  return (
-    <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground ml-1">
-      {labels.join(", ")}
-    </span>
-  );
-}
-
 function CopyButton({ value, label, successMsg, failMsg, className }: { value: string; label: string; successMsg: string; failMsg: string; className?: string }) {
  return (
    <button
@@ -575,7 +716,7 @@ function CopyButton({ value, label, successMsg, failMsg, className }: { value: s
          toast.error(failMsg);
        }
      }}
-      className={cn("p-1.5 rounded hover:bg-muted transition-colors touch-manipulation transition-opacity", className)}
+      className={cn("p-1.5 rounded hover:bg-muted transition-colors touch-manipulation", className)}
      title={label}
      aria-label={label}
    >
@@ -2,11 +2,12 @@

 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
-import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book } from "lucide-react";
+import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book, Camera, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Avatar } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
-import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress } from "@/lib/jmap/types";
+import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress, ContactMedia } from "@/lib/jmap/types";

 interface EmailEntry {
  address: string;
@@ -49,59 +50,78 @@ interface ContactFormProps {
  contact?: ContactCard | null;
  addressBooks?: AddressBook[];
  allKeywords?: string[];
+  defaultAddressBookId?: string;
  onSave: (data: Partial<ContactCard>) => Promise<void>;
  onCancel: () => void;
 }

-type FormCategory = "contact" | "work" | "location" | "personal" | "digital" | "calendar" | "notes";
-
-const formCategoryStyles: Record<FormCategory, string> = {
-  contact: "border-l-blue-400 dark:border-l-blue-500",
-  work: "border-l-amber-400 dark:border-l-amber-500",
-  location: "border-l-emerald-400 dark:border-l-emerald-500",
-  personal: "border-l-violet-400 dark:border-l-violet-500",
-  digital: "border-l-cyan-400 dark:border-l-cyan-500",
-  calendar: "border-l-rose-400 dark:border-l-rose-500",
-  notes: "border-l-stone-400 dark:border-l-stone-500",
-};
-
-function FormSection({ icon: Icon, title, children, collapsible, defaultOpen = false, category = "contact" }: {
+function FormSection({ icon: Icon, title, children, collapsible, defaultOpen = true }: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  children: React.ReactNode;
  collapsible?: boolean;
  defaultOpen?: boolean;
-  category?: FormCategory;
 }) {
-  const [open, setOpen] = useState(defaultOpen || !collapsible);
+  const [open, setOpen] = useState(defaultOpen);

  return (
-    <div className={cn("rounded-lg border border-border bg-card border-l-[3px] px-4 py-3", formCategoryStyles[category])}>
+    <section className="py-5">
      <button
        type="button"
        className={cn(
-          "flex items-center gap-2 w-full py-0.5 text-sm font-medium text-foreground transition-colors",
-          collapsible && "hover:text-muted-foreground cursor-pointer",
-          !collapsible && "cursor-default"
+          "flex items-center gap-2 w-full text-left",
+          collapsible ? "cursor-pointer" : "cursor-default"
        )}
        onClick={() => collapsible && setOpen(!open)}
        tabIndex={collapsible ? 0 : -1}
      >
        <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
-        <span className="flex-1 text-left">{title}</span>
+        <h3 className="flex-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
        {collapsible && (
          open ? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" /> : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
        )}
      </button>
-      {open && (
-        <div className="space-y-3 pt-3 pb-1">
+      {(open || !collapsible) && (
+        <div className="space-y-3 mt-3">
          {children}
        </div>
      )}
-    </div>
+    </section>
  );
 }

+const MAX_PHOTO_DIM = 512;
+const PHOTO_QUALITY = 0.85;
+
+async function processImageFile(file: File): Promise<{ uri: string; mediaType: string }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => {
+        const ratio = Math.min(1, MAX_PHOTO_DIM / Math.max(img.width, img.height));
+        const w = Math.max(1, Math.round(img.width * ratio));
+        const h = Math.max(1, Math.round(img.height * ratio));
+        const canvas = document.createElement("canvas");
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("canvas-unsupported"));
+          return;
+        }
+        ctx.drawImage(img, 0, 0, w, h);
+        const uri = canvas.toDataURL("image/jpeg", PHOTO_QUALITY);
+        resolve({ uri, mediaType: "image/jpeg" });
+      };
+      img.onerror = () => reject(new Error("invalid-image"));
+      img.src = reader.result as string;
+    };
+    reader.onerror = () => reject(new Error("read-failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
 function Select({ value, onChange, children, className }: {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
@@ -124,11 +144,13 @@ function Select({ value, onChange, children, className }: {
  );
 }

-export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCancel }: ContactFormProps) {
+export function ContactForm({ contact, addressBooks, allKeywords, defaultAddressBookId, onSave, onCancel }: ContactFormProps) {
  const t = useTranslations("contacts.form");
  const isEditing = !!contact;

-  const findComponent = (kind: string) => contact?.name?.components?.find(c => c.kind === kind)?.value || "";
+  // Accept JSContact-standard kinds (RFC 9553) and legacy vCard-style aliases.
+  const findComponent = (...kinds: string[]) =>
+    contact?.name?.components?.find(c => kinds.includes(c.kind))?.value || "";

  // Convert RFC 9553 AnniversaryDate to ISO date string for HTML date input
  function anniversaryDateToString(date: AnniversaryDate): string {
@@ -191,11 +213,11 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
    };
  }

-  const [prefix, setPrefix] = useState(findComponent("prefix"));
+  const [prefix, setPrefix] = useState(findComponent("title", "prefix"));
  const [givenName, setGivenName] = useState(findComponent("given"));
-  const [additionalName, setAdditionalName] = useState(findComponent("additional"));
+  const [additionalName, setAdditionalName] = useState(findComponent("given2", "additional", "middle"));
  const [surname, setSurname] = useState(findComponent("surname"));
-  const [suffix, setSuffix] = useState(findComponent("suffix"));
+  const [suffix, setSuffix] = useState(findComponent("generation", "suffix"));

  const [nickname, setNickname] = useState(
    contact?.nicknames ? Object.values(contact.nicknames)[0]?.name || "" : ""
@@ -309,14 +331,61 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
        return ids[0];
      }
    }
+    if (defaultAddressBookId && addressBooks?.some(b => b.id === defaultAddressBookId)) {
+      return defaultAddressBookId;
+    }
    return "";
-  }, [contact]);
+  }, [contact, defaultAddressBookId, addressBooks]);
  const [selectedBookId, setSelectedBookId] = useState(currentBookId);

+  const initialPhotoEntry = useMemo(() => {
+    if (!contact?.media) return null;
+    for (const [key, m] of Object.entries(contact.media)) {
+      if (m.kind === "photo" && m.uri) return { key, uri: m.uri, mediaType: m.mediaType };
+    }
+    return null;
+  }, [contact]);
+  const [photoUri, setPhotoUri] = useState<string | undefined>(initialPhotoEntry?.uri);
+  const [photoMediaType, setPhotoMediaType] = useState<string | undefined>(initialPhotoEntry?.mediaType);
+  const [photoError, setPhotoError] = useState<string | null>(null);
+  const [photoUploading, setPhotoUploading] = useState(false);
+  const photoInputRef = useRef<HTMLInputElement>(null);
+
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [emailErrors, setEmailErrors] = useState<Record<number, string>>({});

+  const handlePhotoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setPhotoError(t("photo_invalid"));
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setPhotoError(t("photo_too_large"));
+      return;
+    }
+    setPhotoError(null);
+    setPhotoUploading(true);
+    try {
+      const { uri, mediaType } = await processImageFile(file);
+      setPhotoUri(uri);
+      setPhotoMediaType(mediaType);
+    } catch {
+      setPhotoError(t("photo_invalid"));
+    } finally {
+      setPhotoUploading(false);
+    }
+  };
+
+  const handlePhotoRemove = () => {
+    setPhotoUri(undefined);
+    setPhotoMediaType(undefined);
+    setPhotoError(null);
+  };
+
  const validateEmail = (address: string): boolean => {
    if (!address.trim()) return true;
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address.trim());
@@ -373,12 +442,13 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
      phonesMap[`p${i}`] = obj;
    });

+    // Emit JSContact-standard kinds (RFC 9553) so the JMAP server stores them losslessly.
    const nameComponents = [];
-    if (prefix.trim()) nameComponents.push({ kind: "prefix" as const, value: prefix.trim() });
+    if (prefix.trim()) nameComponents.push({ kind: "title" as const, value: prefix.trim() });
    if (givenName.trim()) nameComponents.push({ kind: "given" as const, value: givenName.trim() });
-    if (additionalName.trim()) nameComponents.push({ kind: "additional" as const, value: additionalName.trim() });
+    if (additionalName.trim()) nameComponents.push({ kind: "given2" as const, value: additionalName.trim() });
    if (surname.trim()) nameComponents.push({ kind: "surname" as const, value: surname.trim() });
-    if (suffix.trim()) nameComponents.push({ kind: "suffix" as const, value: suffix.trim() });
+    if (suffix.trim()) nameComponents.push({ kind: "generation" as const, value: suffix.trim() });

    const titlesMap: Record<string, { name: string; kind?: "title" | "role" }> = {};
    if (jobTitle.trim()) titlesMap["t0"] = { name: jobTitle.trim(), kind: "title" };
@@ -427,6 +497,17 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
      });
    }

+    const mediaMap: Record<string, ContactMedia> = {};
+    if (contact?.media) {
+      for (const [key, m] of Object.entries(contact.media)) {
+        if (m.kind !== "photo") mediaMap[key] = m;
+      }
+    }
+    if (photoUri) {
+      const photoKey = initialPhotoEntry?.key || "photo";
+      mediaMap[photoKey] = { kind: "photo", uri: photoUri, mediaType: photoMediaType };
+    }
+
    const data: Partial<ContactCard> = {
      name: { components: nameComponents, isOrdered: true },
      nicknames: nickname.trim() ? { n0: { name: nickname.trim() } } : undefined,
@@ -453,6 +534,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
      calendarUri: calendarUri.trim() || undefined,
      schedulingUri: schedulingUri.trim() || undefined,
      freeBusyUri: freeBusyUri.trim() || undefined,
+      media: Object.keys(mediaMap).length > 0 ? mediaMap : undefined,
      ...(selectedBookId ? { addressBookIds: { [selectedBookId]: true } } : {}),
    };

@@ -466,6 +548,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
    }
  };

+  const previewName = [givenName, surname].filter(Boolean).join(" ").trim();
+  const previewEmail = emails.find(e => e.address.trim())?.address.trim() || "";
+
  return (
    <form onSubmit={handleSubmit} className="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">
@@ -478,38 +563,82 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
      </div>

      <div className="flex-1 overflow-y-auto">
-        <div className="px-6 py-4">
+        <div className="px-6 py-4 max-w-3xl">
          {error && (
            <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded-lg border border-red-200 dark:border-red-900 mb-4">
              {error}
            </div>
          )}

-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-
-          {/* Address Book Selector */}
-          {addressBooks && addressBooks.length > 1 && (
-            <div className="md:col-span-2 xl:col-span-3">
-              <FormSection icon={Book} title={t("section_address_book") || "Directory"} category="contact">
-                <select
-                  value={selectedBookId}
-                  onChange={(e) => setSelectedBookId(e.target.value)}
-                  className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+          <div className="flex items-center gap-4 pb-4">
+            <button
+              type="button"
+              onClick={() => photoInputRef.current?.click()}
+              disabled={photoUploading}
+              className="relative group rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-60"
+              title={t("upload_photo")}
+              aria-label={t("upload_photo")}
+            >
+              <Avatar
+                name={previewName || undefined}
+                email={previewEmail || undefined}
+                contactPhotoUri={photoUri}
+                size="lg"
+                className="!w-20 !h-20 !text-xl"
+              />
+              <span
+                aria-hidden="true"
+                className="absolute inset-0 rounded-full bg-black/55 text-white flex flex-col items-center justify-center gap-0.5 opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 transition-opacity"
+              >
+                <Camera className="w-5 h-5" />
+                <span className="text-[10px] font-medium leading-none">{t("change_photo")}</span>
+              </span>
+              <input
+                ref={photoInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handlePhotoSelect}
+              />
+            </button>
+            <div className="flex flex-col gap-1 min-w-0 flex-1">
+              <p className="text-xs text-muted-foreground">{t("photo_hint")}</p>
+              {photoError && (
+                <p className="text-xs text-red-600 dark:text-red-400">{photoError}</p>
+              )}
+              {photoUri && (
+                <button
+                  type="button"
+                  onClick={handlePhotoRemove}
+                  className="inline-flex items-center gap-1 self-start text-xs text-muted-foreground hover:text-destructive transition-colors"
                >
-                  <option value="">{t("select_address_book") || "Select a directory..."}</option>
-                  {addressBooks.map((book) => (
-                    <option key={book.id} value={book.id}>
-                      {book.accountName ? `${book.name} (${book.accountName})` : book.name}
-                    </option>
-                  ))}
-                </select>
-              </FormSection>
+                  <Trash2 className="w-3 h-3" />
+                  {t("remove_photo")}
+                </button>
+              )}
            </div>
+          </div>
+
+          <div className="divide-y divide-border/60">
+
+          {addressBooks && addressBooks.length > 1 && (
+            <FormSection icon={Book} title={t("section_address_book") || "Directory"}>
+              <select
+                value={selectedBookId}
+                onChange={(e) => setSelectedBookId(e.target.value)}
+                className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+              >
+                <option value="">{t("select_address_book") || "Select a directory..."}</option>
+                {addressBooks.map((book) => (
+                  <option key={book.id} value={book.id}>
+                    {book.accountName ? `${book.name} (${book.accountName})` : book.name}
+                  </option>
+                ))}
+              </select>
+            </FormSection>
          )}

-          {/* Name & Identity - full width */}
-          <div className="md:col-span-2 xl:col-span-3">
-          <FormSection icon={User} title={t("section_identity")} category="contact">
+          <FormSection icon={User} title={t("section_identity")}>
            <div className="grid grid-cols-[auto_1fr_1fr_auto] gap-2">
              <div>
                <label className="text-xs text-muted-foreground mb-1 block">{t("prefix")}</label>
@@ -543,10 +672,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
              </div>
            </div>
          </FormSection>
-          </div>

          {/* Email */}
-          <FormSection icon={Mail} title={t("email")} collapsible defaultOpen category="contact">
+          <FormSection icon={Mail} title={t("email")}>
            <div className="space-y-2">
              {emails.map((entry, i) => (
                <div key={i}>
@@ -598,7 +726,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Phone */}
-          <FormSection icon={Phone} title={t("phone")} collapsible defaultOpen category="contact">
+          <FormSection icon={Phone} title={t("phone")}>
            <div className="space-y-2">
              {phones.map((entry, i) => (
                <div key={i} className="flex items-center gap-2">
@@ -656,7 +784,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Work & Organization */}
-          <FormSection icon={Building} title={t("section_work")} collapsible defaultOpen category="work">
+          <FormSection icon={Building} title={t("section_work")} collapsible defaultOpen={!!(organization || department || jobTitle || role)}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="text-xs text-muted-foreground mb-1 block">{t("organization")}</label>
@@ -677,9 +805,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
            </div>
          </FormSection>

-          {/* Addresses - full width */}
-          <div className="md:col-span-2 xl:col-span-3">
-          <FormSection icon={MapPin} title={t("addresses")} collapsible defaultOpen category="location">
+          {/* Addresses */}
+          <FormSection icon={MapPin} title={t("addresses")} collapsible defaultOpen={addresses.length > 0}>
            <div className="space-y-3">
              {addresses.map((addr, i) => (
                <div key={i} className="rounded-md border border-border/60 bg-muted/20 p-3 space-y-2 relative">
@@ -711,10 +838,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
              </Button>
            </div>
          </FormSection>
-          </div>

          {/* Online Services */}
-          <FormSection icon={Globe} title={t("online_services")} collapsible defaultOpen category="digital">
+          <FormSection icon={Globe} title={t("online_services")} collapsible defaultOpen={onlineServices.length > 0}>
            <div className="space-y-2">
              {onlineServices.map((svc, i) => (
                <div key={i} className="flex items-center gap-2">
@@ -743,7 +869,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Anniversaries */}
-          <FormSection icon={Cake} title={t("anniversaries")} collapsible defaultOpen category="personal">
+          <FormSection icon={Cake} title={t("anniversaries")} collapsible defaultOpen={anniversaries.length > 0}>
            <div className="space-y-2">
              {anniversaries.map((ann, i) => (
                <div key={i} className="flex items-center gap-2">
@@ -775,7 +901,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Personal Info */}
-          <FormSection icon={Heart} title={t("personal_info")} collapsible defaultOpen category="personal">
+          <FormSection icon={Heart} title={t("personal_info")} collapsible defaultOpen={personalInfoEntries.length > 0}>
            <div className="space-y-2">
              {personalInfoEntries.map((pi, i) => (
                <div key={i} className="flex items-center gap-2">
@@ -816,7 +942,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Categories */}
-          <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen category="digital">
+          <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen={!!keywordsStr}>
            <CategoryComboBox
              keywordsStr={keywordsStr}
              onChange={setKeywordsStr}
@@ -828,7 +954,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Gender */}
-          <FormSection icon={UserCircle} title={t("gender")} collapsible defaultOpen category="personal">
+          <FormSection icon={UserCircle} title={t("gender")} collapsible defaultOpen={!!(genderSex || genderIdentity)}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="text-xs text-muted-foreground mb-1 block">{t("gender_sex")}</label>
@@ -849,7 +975,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
          </FormSection>

          {/* Calendar */}
-          <FormSection icon={Calendar} title={t("calendar")} collapsible defaultOpen category="calendar">
+          <FormSection icon={Calendar} title={t("calendar")} collapsible defaultOpen={!!(calendarUri || schedulingUri || freeBusyUri)}>
            <div className="space-y-3">
              <div>
                <label className="text-xs text-muted-foreground mb-1 block">{t("calendar_uri")}</label>
@@ -866,9 +992,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
            </div>
          </FormSection>

-          {/* Notes - full width */}
-          <div className="md:col-span-2 xl:col-span-3">
-          <FormSection icon={StickyNote} title={t("note")} collapsible defaultOpen category="notes">
+          {/* Notes */}
+          <FormSection icon={StickyNote} title={t("note")} collapsible defaultOpen={!!note}>
            <textarea
              value={note}
              onChange={(e) => setNote(e.target.value)}
@@ -876,7 +1001,6 @@ export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCanc
              className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground resize-y outline-none focus:ring-2 focus:ring-ring"
            />
          </FormSection>
-          </div>

          </div>
        </div>
@@ -1,18 +1,98 @@
 "use client";

-import { useMemo } from "react";
-import { useTranslations } from "next-intl";
-import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useTranslations, useLocale } from "next-intl";
+import { Search, BookUser, Trash2, Users, Download, X, UserPlus, CheckSquare, Square, Filter, Mail, Phone, Image as ImageIcon, RotateCcw } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { ContactListItem } from "./contact-list-item";
 import { ContactContextMenu } from "./contact-context-menu";
 import { useContextMenu } from "@/hooks/use-context-menu";
 import { cn } from "@/lib/utils";
-import type { ContactCard } from "@/lib/jmap/types";
-import { getContactDisplayName } from "@/stores/contact-store";
+import type { AnniversaryDate, ContactCard } from "@/lib/jmap/types";
+import { getContactDisplayName, getContactPhotoUri } from "@/stores/contact-store";
 import { useSettingsStore } from "@/stores/settings-store";

+type TriState = boolean | null;
+
+interface ListFilters {
+  organization: string;
+  jobTitle: string;
+  location: string;
+  emailDomain: string;
+  birthdayMonth: number | null;
+  hasEmail: TriState;
+  hasPhone: TriState;
+  hasPhoto: TriState;
+}
+
+const EMPTY_FILTERS: ListFilters = {
+  organization: "",
+  jobTitle: "",
+  location: "",
+  emailDomain: "",
+  birthdayMonth: null,
+  hasEmail: null,
+  hasPhone: null,
+  hasPhoto: null,
+};
+
+function cycleTri(v: TriState): TriState {
+  return v === null ? true : v === true ? false : null;
+}
+
+function countActiveFilters(f: ListFilters): number {
+  let n = 0;
+  if (f.organization.trim()) n++;
+  if (f.jobTitle.trim()) n++;
+  if (f.location.trim()) n++;
+  if (f.emailDomain.trim()) n++;
+  if (f.birthdayMonth !== null) n++;
+  if (f.hasEmail !== null) n++;
+  if (f.hasPhone !== null) n++;
+  if (f.hasPhoto !== null) n++;
+  return n;
+}
+
+function matchTri(actual: boolean, filter: TriState): boolean {
+  if (filter === null) return true;
+  return actual === filter;
+}
+
+function getAnniversaryMonth(date: AnniversaryDate): number | null {
+  if (typeof date === "string") {
+    const iso = date.match(/^(\d{4})-(\d{2})/);
+    if (iso) return parseInt(iso[2], 10);
+    const partial = date.match(/^--(\d{2})/);
+    if (partial) return parseInt(partial[1], 10);
+    return null;
+  }
+  if ("month" in date && date.month) return date.month;
+  if ("utc" in date && date.utc) {
+    const d = new Date(date.utc);
+    return isNaN(d.getTime()) ? null : d.getMonth() + 1;
+  }
+  return null;
+}
+
+function ToggleChip({ icon, label, value, onClick }: { icon: React.ReactNode; label: string; value: TriState; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs transition-colors border",
+        value === true && "bg-primary/10 border-primary/30 text-primary",
+        value === false && "bg-muted border-border text-muted-foreground line-through",
+        value === null && "bg-background border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground",
+      )}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
 interface ContactListProps {
  contacts: ContactCard[];
  selectedContactId: string | null;
@@ -20,7 +100,6 @@ interface ContactListProps {
  onSearchChange: (query: string) => void;
  onSelectContact: (id: string) => void;
  onCreateNew: () => void;
-  categoryLabel: string;
  className?: string;
  selectedContactIds: Set<string>;
  onToggleSelection: (id: string) => void;
@@ -42,7 +121,6 @@ export function ContactList({
  onSearchChange,
  onSelectContact,
  onCreateNew,
-  categoryLabel,
  className,
  selectedContactIds,
  onToggleSelection,
@@ -57,31 +135,94 @@ export function ContactList({
  onAddContactToGroup,
 }: ContactListProps) {
  const t = useTranslations("contacts");
+  const locale = useLocale();
  const density = useSettingsStore((state) => state.density);
+  const groupByLetter = useSettingsStore((state) => state.groupContactsByLetter);
  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<ContactCard>();
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [filters, setFilters] = useState<ListFilters>(EMPTY_FILTERS);
+  const activeFilters = countActiveFilters(filters);
+
+  const monthNames = useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "long" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));
+  }, [locale]);

  const filtered = useMemo(() => {
-    if (!searchQuery) return contacts;
-    const lower = searchQuery.toLowerCase();
+    const lower = searchQuery.trim().toLowerCase();
+    const orgLower = filters.organization.trim().toLowerCase();
+    const jobLower = filters.jobTitle.trim().toLowerCase();
+    const locLower = filters.location.trim().toLowerCase();
+    const domainLower = filters.emailDomain.trim().toLowerCase().replace(/^@/, "");
+
    return contacts.filter((c) => {
+      const emails = c.emails ? Object.values(c.emails) : [];
+      const phones = c.phones ? Object.values(c.phones) : [];
+      const orgs = c.organizations ? Object.values(c.organizations) : [];
+      const titles = c.titles ? Object.values(c.titles) : [];
+      const addresses = c.addresses ? Object.values(c.addresses) : [];
+      const anniversaries = c.anniversaries ? Object.values(c.anniversaries) : [];
+
+      if (!matchTri(emails.length > 0, filters.hasEmail)) return false;
+      if (!matchTri(phones.length > 0, filters.hasPhone)) return false;
+      if (!matchTri(!!getContactPhotoUri(c), filters.hasPhoto)) return false;
+
+      if (orgLower) {
+        const match = orgs.some((o) => {
+          if (o.name?.toLowerCase().includes(orgLower)) return true;
+          if (o.units?.some((u) => u.name?.toLowerCase().includes(orgLower))) return true;
+          return false;
+        });
+        if (!match) return false;
+      }
+
+      if (jobLower) {
+        if (!titles.some((ti) => ti.name?.toLowerCase().includes(jobLower))) return false;
+      }
+
+      if (locLower) {
+        const match = addresses.some((a) => {
+          const parts: string[] = [];
+          if (a.full) parts.push(a.full);
+          if (a.fullAddress) parts.push(a.fullAddress);
+          if (a.locality) parts.push(a.locality);
+          if (a.region) parts.push(a.region);
+          if (a.country) parts.push(a.country);
+          if (a.postcode) parts.push(a.postcode);
+          if (a.street) parts.push(a.street);
+          if (a.components) {
+            for (const comp of a.components) {
+              if (comp.value) parts.push(comp.value);
+            }
+          }
+          return parts.some((p) => p.toLowerCase().includes(locLower));
+        });
+        if (!match) return false;
+      }
+
+      if (domainLower) {
+        const match = emails.some((e) => {
+          const at = e.address?.toLowerCase().split("@");
+          return at && at.length > 1 && at[1].includes(domainLower);
+        });
+        if (!match) return false;
+      }
+
+      if (filters.birthdayMonth !== null) {
+        const target = filters.birthdayMonth;
+        const match = anniversaries.some((a) => a.kind === "birth" && getAnniversaryMonth(a.date) === target);
+        if (!match) return false;
+      }
+
+      if (!lower) return true;
      const name = getContactDisplayName(c).toLowerCase();
-      const emails = c.emails
-        ? Object.values(c.emails).map((e) => e.address.toLowerCase())
-        : [];
-      const phones = c.phones
-        ? Object.values(c.phones).map((p) => p.number?.toLowerCase() || "")
-        : [];
-      const org = c.organizations
-        ? Object.values(c.organizations).map((o) => o.name?.toLowerCase() || "")
-        : [];
-      return (
-        name.includes(lower) ||
-        emails.some((e) => e.includes(lower)) ||
-        phones.some((p) => p.includes(lower)) ||
-        org.some((o) => o.includes(lower))
-      );
+      if (name.includes(lower)) return true;
+      if (emails.some((e) => e.address?.toLowerCase().includes(lower))) return true;
+      if (phones.some((p) => p.number?.toLowerCase().includes(lower))) return true;
+      if (orgs.some((o) => o.name?.toLowerCase().includes(lower))) return true;
+      return false;
    });
-  }, [contacts, searchQuery]);
+  }, [contacts, searchQuery, filters]);

  const sorted = useMemo(() => {
    return [...filtered].sort((a, b) => {
@@ -93,29 +234,214 @@ export function ContactList({

  const sortedIds = useMemo(() => sorted.map(c => c.id), [sorted]);

+  // Group sorted contacts by first letter of display name. Non-letter
+  // starters (digits, symbols, empty) collect under "#" which sorts last.
+  const groupedSections = useMemo(() => {
+    const collator = new Intl.Collator(locale, { sensitivity: "base" });
+    const groups = new Map<string, ContactCard[]>();
+    for (const contact of sorted) {
+      const name = getContactDisplayName(contact).trim();
+      const first = name.charAt(0);
+      const letter = first && first.toLocaleUpperCase(locale).match(/\p{L}/u)
+        ? first.toLocaleUpperCase(locale)
+        : "#";
+      const bucket = groups.get(letter);
+      if (bucket) bucket.push(contact);
+      else groups.set(letter, [contact]);
+    }
+    return Array.from(groups.entries())
+      .sort(([a], [b]) => {
+        if (a === "#") return 1;
+        if (b === "#") return -1;
+        return collator.compare(a, b);
+      })
+      .map(([letter, items]) => ({ letter, items }));
+  }, [sorted, locale]);
+
  const hasSelection = selectedContactIds.size > 0;
  const allSelected = sorted.length > 0 && sorted.every(c => selectedContactIds.has(c.id));

  return (
    <div className={cn("flex flex-col h-full", className)}>
-      {/* Search header */}
-      <div className="px-3 border-b border-border space-y-1.5" style={{ paddingBlock: 'var(--density-header-py)' }}>
-        <div className="flex items-center justify-between">
-          <span className="text-xs font-medium text-muted-foreground truncate">
-            {categoryLabel} ({contacts.length})
-          </span>
-        </div>
-        <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" />
-          <Input
-            placeholder={t("search_placeholder")}
-            value={searchQuery}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="pl-8 h-8 text-sm"
-          />
+      {/* Toolbar: select / search / filter */}
+      <div className="border-b border-border bg-background">
+        <div className="px-3 py-3">
+          <div className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => {
+                if (hasSelection) {
+                  if (allSelected) onClearSelection();
+                  else onSelectAll(sortedIds);
+                } else if (sortedIds.length > 0) {
+                  const target = selectedContactId && sortedIds.includes(selectedContactId)
+                    ? selectedContactId
+                    : sortedIds[0];
+                  onToggleSelection(target);
+                }
+              }}
+              className={cn(
+                "flex-shrink-0 p-2 rounded-md transition-colors",
+                hasSelection
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
+              title={hasSelection ? (allSelected ? t("bulk.clear") : t("bulk.select_all")) : t("filters.select")}
+            >
+              {hasSelection ? <CheckSquare className="w-4 h-4" /> : <Square className="w-4 h-4" />}
+            </button>
+            <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={t("search_placeholder")}
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className={cn("pl-9 h-9", searchQuery && "pr-8")}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => onSearchChange("")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={t("clear_search")}
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => setFiltersOpen((v) => !v)}
+              className={cn(
+                "relative flex-shrink-0 p-2 rounded-md transition-colors",
+                filtersOpen || activeFilters > 0
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
+              )}
+              title={t("filters.toggle")}
+              aria-label={t("filters.toggle")}
+            >
+              <Filter className="w-4 h-4" />
+              {!filtersOpen && activeFilters > 0 && (
+                <span className="absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-primary-foreground">
+                  {activeFilters}
+                </span>
+              )}
+            </button>
+          </div>
        </div>
+
      </div>

+      {filtersOpen && (
+        <div className="border-b border-border bg-muted/30 animate-in slide-in-from-top-2 fade-in duration-200">
+          <div className="px-4 py-3 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-foreground">{t("filters.title")}</span>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setFilters(EMPTY_FILTERS)}
+                  className="h-7 px-2 text-xs"
+                >
+                  <RotateCcw className="w-3 h-3 mr-1" />
+                  {t("filters.clear")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setFiltersOpen(false)}
+                  className="h-7 w-7"
+                  aria-label={t("filters.close")}
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.organization")}</label>
+                <Input
+                  value={filters.organization}
+                  onChange={(e) => setFilters((f) => ({ ...f, organization: e.target.value }))}
+                  placeholder={t("filters.organization_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.job_title")}</label>
+                <Input
+                  value={filters.jobTitle}
+                  onChange={(e) => setFilters((f) => ({ ...f, jobTitle: e.target.value }))}
+                  placeholder={t("filters.job_title_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.location")}</label>
+                <Input
+                  value={filters.location}
+                  onChange={(e) => setFilters((f) => ({ ...f, location: e.target.value }))}
+                  placeholder={t("filters.location_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">{t("filters.email_domain")}</label>
+                <Input
+                  value={filters.emailDomain}
+                  onChange={(e) => setFilters((f) => ({ ...f, emailDomain: e.target.value }))}
+                  placeholder={t("filters.email_domain_placeholder")}
+                  className="h-8 text-sm"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">{t("filters.birthday_month")}</label>
+              <select
+                value={filters.birthdayMonth ?? ""}
+                onChange={(e) => setFilters((f) => ({ ...f, birthdayMonth: e.target.value === "" ? null : Number(e.target.value) }))}
+                className="h-8 w-full text-sm rounded-md border border-input bg-background px-2"
+                aria-label={t("filters.birthday_month")}
+              >
+                <option value="">{t("filters.any_month")}</option>
+                {monthNames.map((name, i) => (
+                  <option key={i} value={i + 1}>{name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="flex items-center gap-2 flex-wrap">
+              <ToggleChip
+                icon={<Mail className="w-3.5 h-3.5" />}
+                label={t("filters.has_email")}
+                value={filters.hasEmail}
+                onClick={() => setFilters((f) => ({ ...f, hasEmail: cycleTri(f.hasEmail) }))}
+              />
+              <ToggleChip
+                icon={<Phone className="w-3.5 h-3.5" />}
+                label={t("filters.has_phone")}
+                value={filters.hasPhone}
+                onClick={() => setFilters((f) => ({ ...f, hasPhone: cycleTri(f.hasPhone) }))}
+              />
+              <ToggleChip
+                icon={<ImageIcon className="w-3.5 h-3.5" />}
+                label={t("filters.has_photo")}
+                value={filters.hasPhoto}
+                onClick={() => setFilters((f) => ({ ...f, hasPhoto: cycleTri(f.hasPhoto) }))}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
      {/* Bulk action bar */}
      {hasSelection && (
        <div className="px-3 py-1.5 border-b border-border bg-accent/30 flex items-center gap-2 flex-wrap">
@@ -166,19 +492,32 @@ export function ContactList({
      <div className="flex-1 overflow-y-auto">
        {sorted.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full px-6 text-center">
-            {searchQuery ? (
+            {searchQuery || activeFilters > 0 ? (
              <>
-                <Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
-                <p className="text-sm font-medium text-foreground">{t("empty_search")}</p>
-                <p className="text-xs text-muted-foreground mt-1">{t("empty_search_hint")}</p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="mt-3"
-                  onClick={() => onSearchChange("")}
-                >
-                  {t("clear_search")}
-                </Button>
+                {activeFilters > 0 && !searchQuery ? (
+                  <Filter className="w-10 h-10 mb-3 text-muted-foreground/30" />
+                ) : (
+                  <Search className="w-10 h-10 mb-3 text-muted-foreground/30" />
+                )}
+                <p className="text-sm font-medium text-foreground">
+                  {searchQuery ? t("empty_search") : t("empty_filtered")}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {searchQuery ? t("empty_search_hint") : t("empty_filtered_hint")}
+                </p>
+                <div className="flex gap-2 mt-3">
+                  {searchQuery && (
+                    <Button variant="outline" size="sm" onClick={() => onSearchChange("")}>
+                      {t("clear_search")}
+                    </Button>
+                  )}
+                  {activeFilters > 0 && (
+                    <Button variant="outline" size="sm" onClick={() => setFilters(EMPTY_FILTERS)}>
+                      <RotateCcw className="w-3.5 h-3.5 mr-1" />
+                      {t("filters.clear")}
+                    </Button>
+                  )}
+                </div>
              </>
            ) : (
              <>
@@ -193,8 +532,8 @@ export function ContactList({
            )}
          </div>
        ) : (
-          <div>
-            {sorted.map((contact) => (
+          (() => {
+            const renderItem = (contact: ContactCard) => (
              <ContactListItem
                key={contact.id}
                contact={contact}
@@ -221,8 +560,22 @@ export function ContactList({
                }}
                onContextMenu={(e, c) => openContextMenu(e, c)}
              />
-            ))}
-          </div>
+            );
+            return groupByLetter ? (
+              <div>
+                {groupedSections.map(({ letter, items }) => (
+                  <section key={letter}>
+                    <div className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                      {letter}
+                    </div>
+                    {items.map(renderItem)}
+                  </section>
+                ))}
+              </div>
+            ) : (
+              <div>{sorted.map(renderItem)}</div>
+            );
+          })()
        )}
      </div>

@@ -0,0 +1,120 @@
+import type { ContactCard, PartialDate } from "@/lib/jmap/types";
+import { getContactDisplayName, getContactPhotoUri } from "@/stores/contact-store";
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function printContact(contact: ContactCard, displayName?: string): void {
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+
+  const name = displayName || getContactDisplayName(contact);
+  const photoUri = getContactPhotoUri(contact);
+  const emails = contact.emails ? Object.values(contact.emails) : [];
+  const phones = contact.phones ? Object.values(contact.phones) : [];
+  const orgs = contact.organizations ? Object.values(contact.organizations) : [];
+  const titles = contact.titles ? Object.values(contact.titles) : [];
+  const addresses = contact.addresses ? Object.values(contact.addresses) : [];
+  const onlineServices = contact.onlineServices ? Object.values(contact.onlineServices) : [];
+  const notes = contact.notes ? Object.values(contact.notes) : [];
+  const anniversaries = contact.anniversaries ? Object.values(contact.anniversaries) : [];
+
+  const rows: string[] = [];
+  const section = (title: string, items: string[]) => {
+    if (items.length === 0) return;
+    rows.push(`<section><h2>${escapeHtml(title)}</h2><dl>${items.join("")}</dl></section>`);
+  };
+  const row = (label: string, value: string) =>
+    `<dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd>`;
+
+  section("Email", emails.map(e => row(e.label || "Email", e.address || "")));
+  section("Phone", phones.map(p => row(p.label || "Phone", p.number || "")));
+  section(
+    "Organization",
+    orgs.map(o => {
+      const units = o.units ? Object.values(o.units).map(u => u.name).filter(Boolean).join(", ") : "";
+      const value = [o.name, units].filter(Boolean).join(" \u2014 ");
+      return row("Organization", value);
+    }),
+  );
+  section("Title", titles.map(t => row(t.kind === "role" ? "Role" : "Title", t.name || "")));
+  section(
+    "Address",
+    addresses.map(a => {
+      const parts = [a.street, a.locality, a.region, a.postcode, a.country]
+        .map(p => (typeof p === "string" ? p : ""))
+        .filter(Boolean);
+      return row(a.label || "Address", parts.join(", "));
+    }),
+  );
+  section(
+    "Online",
+    onlineServices.map(s => row(s.label || s.service || "Online", s.uri || s.user || "")),
+  );
+  section(
+    "Anniversary",
+    anniversaries.map(a => {
+      const date = a.date;
+      let formatted = "";
+      if (typeof date === "object" && date !== null) {
+        if ("utc" in date && typeof date.utc === "string") formatted = date.utc;
+        else {
+          const parts: string[] = [];
+          const pd = date as PartialDate;
+          if (pd.year) parts.push(String(pd.year));
+          if (pd.month) parts.push(String(pd.month).padStart(2, "0"));
+          if (pd.day) parts.push(String(pd.day).padStart(2, "0"));
+          formatted = parts.join("-");
+        }
+      } else if (date) {
+        formatted = String(date);
+      }
+      return row(a.kind || "Date", formatted);
+    }),
+  );
+  section("Notes", notes.map(n => row("", n.note || "")));
+
+  const photoTag = photoUri
+    ? `<img class="photo" src="${escapeHtml(photoUri)}" alt="" />`
+    : `<div class="photo placeholder">${escapeHtml((name || "?").charAt(0).toUpperCase())}</div>`;
+
+  const html = `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>${escapeHtml(name || "Contact")}</title>
+<style>
+  * { box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #111; margin: 32px; }
+  header { display: flex; align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #ccc; }
+  .photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+  .photo.placeholder { background: #e5e7eb; color: #4b5563; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; }
+  h1 { margin: 0; font-size: 22px; }
+  section { margin-top: 20px; }
+  h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #555; margin: 0 0 8px; }
+  dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; column-gap: 16px; font-size: 14px; }
+  dt { color: #555; }
+  dd { margin: 0; word-break: break-word; }
+  @media print { body { margin: 16mm; } }
+</style>
+</head>
+<body>
+<header>
+  ${photoTag}
+  <div><h1>${escapeHtml(name || "Contact")}</h1></div>
+</header>
+${rows.join("")}
+</body>
+</html>`;
+
+  printWindow.document.write(html);
+  printWindow.document.close();
+  printWindow.focus();
+  printWindow.print();
+}
@@ -27,6 +27,9 @@ interface ContactsSidebarProps {
  onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
  onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
  onRenameAddressBook?: (addressBook: AddressBook) => void;
+  onShareAddressBook?: (addressBook: AddressBook) => void;
+  onCreateContactInBook?: (addressBook: AddressBook) => void;
+  onDeleteAddressBook?: (addressBook: AddressBook) => void;
  onRenameKeyword?: (keyword: string) => void;
  className?: string;
 }
@@ -62,6 +65,9 @@ export function ContactsSidebar({
  onDropContacts,
  onDropContactsToCategory,
  onRenameAddressBook,
+  onShareAddressBook,
+  onCreateContactInBook,
+  onDeleteAddressBook,
  onRenameKeyword,
  className,
 }: ContactsSidebarProps) {
@@ -288,7 +294,7 @@ export function ContactsSidebar({
                contactCount={contactCountByBook[book.id] || 0}
                onSelect={() => onSelectCategory({ addressBookId: book.id })}
                onDropContacts={onDropContacts}
-                onContextMenu={onRenameAddressBook ? (e) => openBookContextMenu(e, book) : undefined}
+                onContextMenu={(onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) ? (e) => openBookContextMenu(e, book) : undefined}
              />
            ))}
          </div>
@@ -430,7 +436,7 @@ export function ContactsSidebar({
                contactCount={contactCountByBook[book.id] || 0}
                onSelect={() => onSelectCategory({ addressBookId: book.id })}
                onDropContacts={onDropContacts}
-                onContextMenu={onRenameAddressBook ? (e) => openBookContextMenu(e, book) : undefined}
+                onContextMenu={(onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) ? (e) => openBookContextMenu(e, book) : undefined}
              />
            ))}
          </div>
@@ -438,24 +444,65 @@ export function ContactsSidebar({
      </div>

      {/* Address book context menu */}
-      {bookContextMenu.data && onRenameAddressBook && (
-        <ContextMenu
-          ref={bookMenuRef}
-          isOpen={bookContextMenu.isOpen}
-          position={bookContextMenu.position}
-          onClose={closeBookContextMenu}
-        >
-          <ContextMenuItem
-            icon={Pencil}
-            label={t("address_books.rename")}
-            onClick={() => {
-              const book = bookContextMenu.data!;
-              closeBookContextMenu();
-              onRenameAddressBook(book);
-            }}
-          />
-        </ContextMenu>
-      )}
+      {bookContextMenu.data && (onRenameAddressBook || onShareAddressBook || onCreateContactInBook || onDeleteAddressBook) && (() => {
+        const book = bookContextMenu.data;
+        const canCreate = onCreateContactInBook && book.myRights?.mayWrite !== false;
+        const canRename = onRenameAddressBook && book.myRights?.mayWrite !== false;
+        const canShare = onShareAddressBook && book.myRights?.mayShare && !book.isShared;
+        const canDelete = onDeleteAddressBook && !book.isDefault && !book.isShared && book.myRights?.mayDelete !== false;
+        const showSeparator = (canCreate || canRename || canShare) && canDelete;
+        return (
+          <ContextMenu
+            ref={bookMenuRef}
+            isOpen={bookContextMenu.isOpen}
+            position={bookContextMenu.position}
+            onClose={closeBookContextMenu}
+          >
+            {canCreate && (
+              <ContextMenuItem
+                icon={UserPlus}
+                label={t("address_books.new_contact_in_book")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onCreateContactInBook(book);
+                }}
+              />
+            )}
+            {canRename && (
+              <ContextMenuItem
+                icon={Pencil}
+                label={t("address_books.rename")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onRenameAddressBook(book);
+                }}
+              />
+            )}
+            {canShare && (
+              <ContextMenuItem
+                icon={Users}
+                label={t("address_books.share")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onShareAddressBook(book);
+                }}
+              />
+            )}
+            {showSeparator && <ContextMenuSeparator />}
+            {canDelete && (
+              <ContextMenuItem
+                icon={Trash2}
+                label={t("address_books.delete")}
+                onClick={() => {
+                  closeBookContextMenu();
+                  onDeleteAddressBook(book);
+                }}
+                destructive
+              />
+            )}
+          </ContextMenu>
+        );
+      })()}

      {/* Keyword (category) context menu */}
      {keywordContextMenu.data && onRenameKeyword && (
@@ -638,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>
@@ -15,6 +15,7 @@ import {
  X,
  AlertCircle,
  ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
 import { useTranslations, useFormatter } from 'next-intl';
 import { useRouter } from '@/i18n/navigation';
@@ -372,6 +373,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
  const [showCalendarPicker, setShowCalendarPicker] = useState(false);
  const [selectedCalendarId, setSelectedCalendarId] = useState<string>('');
  const [rawIcsMethod, setRawIcsMethod] = useState<InvitationMethod>('unknown');
+  const [isCollapsed, setIsCollapsed] = useState(true);

  const attachment = findCalendarAttachment(email);

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

@@ -750,9 +754,22 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
          )}
          <span className="text-sm font-medium text-foreground truncate">{bannerTitle}</span>
        </div>
+        {canCollapse && (
+          <button
+            type="button"
+            onClick={() => setIsCollapsed((prev) => !prev)}
+            aria-expanded={!isCollapsed}
+            aria-label={isCollapsed ? t('expand') : t('collapse')}
+            title={isCollapsed ? t('expand') : t('collapse')}
+            className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex-shrink-0"
+          >
+            {isCollapsed ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+          </button>
+        )}
      </div>

      {/* Content */}
+      {showDetails && (
      <div className="px-4 py-3 space-y-2.5">
        <div className="lg:flex lg:gap-6">
          {/* Left: Event info */}
@@ -894,8 +911,10 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
          </div>
        )}
      </div>
+      )}

      {/* Actions */}
+      {showDetails && (
      <div className="px-4 py-2.5 border-t border-border bg-muted/20 flex items-center gap-2 flex-wrap">
        {canRespond && (
          <>
@@ -1020,6 +1039,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
          <Loader2 className="w-4 h-4 animate-spin text-muted-foreground ml-auto" />
        )}
      </div>
+      )}
    </div>
  );
 }
@@ -10,6 +10,8 @@ import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
 import { debug } from "@/lib/debug";
 import { toast } from "@/stores/toast-store";
 import { sanitizeEmailHtml } from "@/lib/email-sanitization";
+import { emailHooks, contactHooks } from "@/lib/plugin-hooks";
+import type { OutgoingEmail, RecipientSuggestion } from "@/lib/plugin-types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useAccountStore } from "@/stores/account-store";
@@ -31,6 +33,7 @@ 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 { 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 */
@@ -67,6 +70,8 @@ interface EmailComposerProps {
    fromName?: string;
    identityId?: 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 +92,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,6 +126,7 @@ 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);
@@ -317,6 +328,9 @@ export function EmailComposer({
      ? `<div>${getPlainTextSignature(currentIdentity).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();
@@ -437,10 +451,13 @@ export function EmailComposer({
      return;
    }

-    autocompleteTimeoutRef.current = setTimeout(() => {
-      const results = getAutocomplete(lastPart);
-      setAutocompleteResults(results);
-      setActiveAutoField(results.length > 0 ? field : null);
+    autocompleteTimeoutRef.current = setTimeout(async () => {
+      const localResults = getAutocomplete(lastPart);
+      // Let plugins contribute extra suggestions (Slack handles, GitHub, CRM, …).
+      const initial: RecipientSuggestion[] = localResults.map(r => ({ name: r.name, email: r.email }));
+      const merged = await contactHooks.onProvideRecipientSuggestions.transform(initial, { query: lastPart });
+      setAutocompleteResults(merged.map(s => ({ name: s.name, email: s.email })));
+      setActiveAutoField(merged.length > 0 ? field : null);
      setAutoSelectedIndex(-1);
    }, 200);
  }, [getAutocomplete]);
@@ -550,6 +567,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 +608,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);
@@ -721,7 +757,7 @@ export function EmailComposer({
    // Generate sub-addressed email if tag is set
    const fromEmail = currentIdentity?.email
      ? subAddressTag
-        ? generateSubAddress(currentIdentity.email, subAddressTag)
+        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;

@@ -736,7 +772,8 @@ export function EmailComposer({
        fromEmail,
        draftId || undefined,
        uploadedAttachments,
-        currentIdentity?.name || undefined
+        currentIdentity?.name || undefined,
+        plainTextMode ? undefined : body
      );

      setDraftId(savedDraftId);
@@ -772,6 +809,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 +862,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) => {
-      const cid = img.getAttribute('data-cid');
-      if (!cid) return;
-      const entry = known.find((e) => e.cid === cid);
-      if (!entry) return;
-      img.setAttribute('src', `cid:${cid}`);
-      img.removeAttribute('data-cid');
-      used.set(cid, entry);
+    if (known.length > 0) {
+      doc.querySelectorAll('img[data-cid]').forEach((img) => {
+        const cid = img.getAttribute('data-cid');
+        if (!cid) return;
+        const entry = known.find((e) => e.cid === cid);
+        if (!entry) return;
+        img.setAttribute('src', `cid:${cid}`);
+        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 {
@@ -889,7 +947,7 @@ export function EmailComposer({

    const fromEmail = currentIdentity?.email
      ? subAddressTag
-        ? generateSubAddress(currentIdentity.email, subAddressTag)
+        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;

@@ -905,6 +963,11 @@ export function EmailComposer({
      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)
@@ -968,12 +1031,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 +1059,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 +1105,48 @@ 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 || '',
+          attachments: uploadedAttachments.map(a => ({ name: a.name, type: a.type, size: a.size })),
+          inReplyTo: threadingHeaders?.inReplyTo?.[0],
+        };
+        const outgoing = await emailHooks.onTransformOutgoingEmail.transform(transformInput);
+
+        await onSend?.({
+          to: outgoing.to,
+          cc: outgoing.cc,
+          bcc: outgoing.bcc,
+          subject: outgoing.subject,
+          body: outgoing.textBody,
+          htmlBody: outgoing.htmlBody || undefined,
          draftId: finalDraftId || undefined,
          fromEmail,
          fromName: currentIdentity?.name || undefined,
-          identityId: currentIdentity?.id,
+          identityId: outgoing.identityId || currentIdentity?.id,
          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("");
@@ -1100,8 +1204,14 @@ export function EmailComposer({
  };

  return (
+    <div className={cn("flex h-full bg-background", className)}>
+      <PluginSlot
+        name="composer-sidebar"
+        className="hidden md:flex shrink-0 h-full overflow-hidden border-r border-border"
+      />
+      {/* Right-side composer sidebar slot is rendered after the main content div below. */}
    <div
-      className={cn("flex flex-col h-full bg-background relative", className)}
+      className="flex flex-col h-full bg-background relative flex-1 min-w-0"
      data-tour="composer"
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
@@ -1173,7 +1283,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}>
@@ -1186,7 +1296,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>
                  ) : (
                    <>
@@ -1674,6 +1784,11 @@ export function EmailComposer({
        </div>
      )}
    </div>
+      <PluginSlot
+        name="composer-sidebar-right"
+        className="hidden md:flex shrink-0 h-full overflow-hidden border-l border-border"
+      />
+    </div>
  );
 }

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

@@ -37,6 +37,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
  const density = useSettingsStore((state) => state.density);
  const mailLayout = useSettingsStore((state) => state.mailLayout);
  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
+  const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
  const { identities } = useAuthStore();
  const isChecked = selectedEmailIds.has(email.id);
  const isUnread = !email.keywords?.$seen;
@@ -49,6 +50,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
  const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
  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}` : '';

  // Resolve color tags using keyword definitions from settings; unknown tags fall back to gray
@@ -99,7 +101,8 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
            : "bg-background"
        ),
        selected && !colorTag && "shadow-sm",
-        !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
+        !colorTag && !selected && !isChecked && "hover:bg-muted hover:shadow-sm",
+        !colorTag && (selected || isChecked) && "hover:bg-accent hover:shadow-sm",
        colorTag && "hover:brightness-95 dark:hover:brightness-110",
        isUnread && !selected && !colorTag && "bg-warning/10",
        // Add visual feedback for checked state
@@ -163,6 +166,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
            email={sender?.email}
            size="md"
            className="flex-shrink-0 shadow-sm"
+            disableImages={hideJunkAvatarImages}
          />
        )}

@@ -284,7 +288,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
              </div>

              {/* Third Line: Preview (controlled by showPreview setting) */}
-              {showPreview && density !== 'extra-compact' && (
+              {showPreview && density !== 'extra-compact' && density !== 'compact' && (
                <p className={cn(
                  "text-sm leading-relaxed line-clamp-2",
                  isUnread
@@ -302,7 +306,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
      {/* Hover Quick Actions */}
      <EmailHoverActions
        email={email}
-        backgroundClassName={colorTag ? colorTag : (selected ? "bg-selection" : "bg-muted")}
+        backgroundClassName={colorTag ? colorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
        onToggleStar={onToggleStar}
        onMarkAsRead={onMarkAsRead}
        onDelete={onDelete}
@@ -69,6 +69,7 @@ export function EmailList({
    batchMarkAsRead,
    batchDelete,
    batchMoveToMailbox,
+    batchArchive,
    batchMarkAsSpam,
    batchUndoSpam,
    loadMoreEmails,
@@ -177,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);
    }
@@ -274,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">
@@ -329,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>
@@ -497,12 +506,12 @@ export function EmailList({
          onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
          onBatchDelete={() => client && batchDelete(client)}
          onBatchArchive={async () => {
-            if (!onArchive) return;
-            const selected = emails.filter((e) => selectedEmailIds.has(e.id));
-            for (const email of selected) {
-              await onArchive(email);
+            if (!client) return;
+            try {
+              await batchArchive(client);
+            } catch (error) {
+              console.error('Failed to batch archive:', error);
            }
-            clearSelection();
          }}
          onBatchMoveToMailbox={(mailboxId) => client && batchMoveToMailbox(client, mailboxId)}
          onBatchMarkAsSpam={async () => {
@@ -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,
@@ -109,6 +154,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 +254,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 +389,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
@@ -64,6 +64,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
    const emailKeywords = useSettingsStore((state) => state.emailKeywords);
    const density = useSettingsStore((state) => state.density);
    const mailLayout = useSettingsStore((state) => state.mailLayout);
+    const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
+    const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
    const isUnifiedView = useEmailStore((state) => state.isUnifiedView);
    const getAccountById = useAccountStore((state) => state.getAccountById);
    const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined;
@@ -133,7 +135,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
              : "bg-background"
          ),
          selected && !resolvedColorTag && "shadow-sm",
-          !resolvedColorTag && !selected && "hover:bg-muted hover:shadow-sm",
+          !resolvedColorTag && !selected && !isChecked && "hover:bg-muted hover:shadow-sm",
+          !resolvedColorTag && (selected || isChecked) && "hover:bg-accent hover:shadow-sm",
          resolvedColorTag && "hover:brightness-95 dark:hover:brightness-110",
          isUnread && !resolvedColorTag && "bg-accent/30",
          isChecked && "ring-2 ring-primary/20 bg-accent/40",
@@ -181,6 +184,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
              email={sender?.email}
              size="md"
              className="flex-shrink-0 shadow-sm"
+              disableImages={hideJunkAvatarImages}
            />
          )}

@@ -305,7 +309,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                  {email.subject || "(no subject)"}
                </div>

-                {showPreview && density !== 'extra-compact' && (
+                {showPreview && density !== 'extra-compact' && density !== 'compact' && (
                  <p className={cn(
                    "text-sm leading-relaxed line-clamp-2",
                    isUnread
@@ -323,7 +327,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
        {/* Hover Quick Actions */}
        <EmailHoverActions
          email={email}
-          backgroundClassName={resolvedColorTag ? resolvedColorTag : (selected ? "bg-accent" : "bg-muted")}
+          backgroundClassName={resolvedColorTag ? resolvedColorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
          onToggleStar={onToggleStar}
          onMarkAsRead={onMarkAsRead}
          onDelete={onDelete}
@@ -358,6 +362,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
    const showPreview = useSettingsStore((state) => state.showPreview);
    const density = useSettingsStore((state) => state.density);
    const mailLayout = useSettingsStore((state) => state.mailLayout);
+    const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
    const isMobile = useUIStore((state) => state.isMobile);
    const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, hasAnswered, hasForwarded, emailCount } = thread;
    const isFocusedMailLayout = mailLayout === 'focus';
@@ -375,6 +380,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
        )).slice(0, 4)
      : participantNames;
    const avatarPerson = showRecipient ? latestEmail.to?.[0] : latestEmail.from?.[0];
+    const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;

    const { dragHandlers, isDragging: isThreadDragging } = useEmailDrag({
      email: latestEmail,
@@ -487,7 +493,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                : "bg-background"
            ),
            isSelected && !colorTag && "shadow-sm",
-            !colorTag && !isSelected && "hover:bg-muted hover:shadow-sm",
+            !colorTag && !isSelected && !isChecked && "hover:bg-muted hover:shadow-sm",
+            !colorTag && (isSelected || isChecked) && "hover:bg-accent hover:shadow-sm",
            colorTag && "hover:brightness-95 dark:hover:brightness-110",
            hasUnread && !colorTag && !isSelected && "bg-accent/30",
            isExpanded && "border-b border-border/50",
@@ -561,6 +568,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                email={avatarPerson?.email}
                size="md"
                className="flex-shrink-0 shadow-sm"
+                disableImages={hideJunkAvatarImages}
              />
            )}

@@ -707,7 +715,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                    {latestEmail.subject || "(no subject)"}
                  </div>

-                  {showPreview && density !== 'extra-compact' && (
+                  {showPreview && density !== 'extra-compact' && density !== 'compact' && (
                    <p className={cn(
                      "text-sm leading-relaxed line-clamp-2",
                      hasUnread
@@ -725,7 +733,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
          {/* Hover Quick Actions for thread header */}
          <EmailHoverActions
            email={latestEmail}
-            backgroundClassName={colorTag ? colorTag : (isSelected ? "bg-accent" : "bg-muted")}
+            backgroundClassName={colorTag ? colorTag : ((isSelected || isChecked) ? "bg-accent" : "bg-muted")}
            onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
            onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
            onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
@@ -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 */}
@@ -0,0 +1,218 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Mailbox } from "@/lib/jmap/types";
+import { getMailboxPath } from "@/lib/utils";
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuHeader,
+} from "@/components/ui/context-menu";
+import {
+  CheckCheck,
+  ChevronRight,
+  MailOpen,
+  Mails,
+  MoreHorizontal,
+  Trash2,
+  FolderPlus,
+  Pencil,
+  FolderX,
+  RefreshCw,
+} from "lucide-react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+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;
+  onEmptyFolder?: (mailboxId: string) => void;
+  onCreateSubfolder?: (parentId: string) => void;
+  onCreateFolder?: () => void;
+  onRenameFolder?: (mailboxId: string) => void;
+  onDeleteFolder?: (mailboxId: string) => void;
+  onRefresh?: () => void;
+}
+
+export function MailboxContextMenu({
+  target,
+  position,
+  isOpen,
+  onClose,
+  menuRef,
+  mailboxes,
+  onMarkFolderRead,
+  onMarkFolderTreeRead,
+  onMarkAllFoldersRead,
+  onEmptyFolder,
+  onCreateSubfolder,
+  onCreateFolder,
+  onRenameFolder,
+  onDeleteFolder,
+  onRefresh,
+}: MailboxContextMenuProps) {
+  const t = useTranslations("mailbox_context_menu");
+
+  const handleAction = (action: () => void) => {
+    action();
+    onClose();
+  };
+
+  if (!target) return null;
+
+  if (target.kind === "folders-section") {
+    return (
+      <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+        <ContextMenuItem
+          icon={CheckCheck}
+          label={t("mark_all_folders_read")}
+          onClick={() => handleAction(onMarkAllFoldersRead!)}
+          disabled={!onMarkAllFoldersRead}
+        />
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          icon={FolderPlus}
+          label={t("new_folder")}
+          onClick={() => handleAction(onCreateFolder!)}
+          disabled={!onCreateFolder}
+        />
+        <ContextMenuItem
+          icon={RefreshCw}
+          label={t("refresh")}
+          onClick={() => handleAction(onRefresh!)}
+          disabled={!onRefresh}
+        />
+      </ContextMenu>
+    );
+  }
+
+  const mailbox = target.mailbox;
+  const isTrashOrJunk = mailbox.role === "trash" || mailbox.role === "junk";
+  const isSystem =
+    !!mailbox.role &&
+    ["inbox", "sent", "drafts", "trash", "junk", "archive"].includes(mailbox.role);
+  const canRename = mailbox.myRights?.mayRename !== false && !isSystem;
+  const canDelete = mailbox.myRights?.mayDelete !== false && !isSystem;
+  const canCreateChild = mailbox.myRights?.mayCreateChild !== false;
+  const canSetSeen = mailbox.myRights?.maySetSeen !== false;
+  const canRemoveItems = mailbox.myRights?.mayRemoveItems !== false;
+
+  const fullPath = getMailboxPath(mailbox, mailboxes);
+
+  return (
+    <ContextMenu ref={menuRef} isOpen={isOpen} position={position} onClose={onClose}>
+      <ContextMenuHeader>
+        <span title={fullPath}>{renderShortenedPath(fullPath)}</span>
+      </ContextMenuHeader>
+
+      <ContextMenuItem
+        icon={MailOpen}
+        label={t("mark_folder_read")}
+        onClick={() => handleAction(() => onMarkFolderRead?.(mailbox.id))}
+        disabled={!onMarkFolderRead || !canSetSeen}
+      />
+      {target.hasChildren && (
+        <ContextMenuItem
+          icon={Mails}
+          label={t("mark_folder_tree_read")}
+          onClick={() => handleAction(() => onMarkFolderTreeRead?.(mailbox.id))}
+          disabled={!onMarkFolderTreeRead || !canSetSeen}
+        />
+      )}
+
+      <ContextMenuSeparator />
+
+      <ContextMenuItem
+        icon={FolderPlus}
+        label={t("new_subfolder")}
+        onClick={() => handleAction(() => onCreateSubfolder?.(mailbox.id))}
+        disabled={!onCreateSubfolder || !canCreateChild}
+      />
+      <ContextMenuItem
+        icon={Pencil}
+        label={t("rename")}
+        onClick={() => handleAction(() => onRenameFolder?.(mailbox.id))}
+        disabled={!onRenameFolder || !canRename}
+      />
+
+      <ContextMenuSeparator />
+
+      <ContextMenuItem
+        icon={FolderX}
+        label={isTrashOrJunk ? t("empty_folder") : t("empty_folder_generic")}
+        onClick={() => handleAction(() => onEmptyFolder?.(mailbox.id))}
+        disabled={!onEmptyFolder || mailbox.totalEmails === 0 || !canRemoveItems}
+        destructive
+      />
+      <ContextMenuItem
+        icon={Trash2}
+        label={t("delete_folder")}
+        onClick={() => handleAction(() => onDeleteFolder?.(mailbox.id))}
+        disabled={!onDeleteFolder || !canDelete}
+        destructive
+      />
+
+      <ContextMenuSeparator />
+
+      <ContextMenuItem
+        icon={RefreshCw}
+        label={t("refresh")}
+        onClick={() => handleAction(onRefresh!)}
+        disabled={!onRefresh}
+      />
+    </ContextMenu>
+  );
+}
@@ -8,7 +8,6 @@ import { icons as lucideIcons, type LucideIcon } from "lucide-react";
 import { useConfig } from "@/hooks/use-config";
 import { useThemeStore } from "@/stores/theme-store";
 import { usePathname, Link, useRouter } from "@/i18n/navigation";
-import NextLink from "next/link";
 import { useTranslations } from "next-intl";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useEmailStore } from "@/stores/email-store";
@@ -17,6 +16,7 @@ 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 { cn, formatFileSize } from "@/lib/utils";
@@ -176,6 +176,11 @@ 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);
@@ -336,9 +341,9 @@ export function NavigationRail({
          );
        })}

-        {/* Admin (Stalwart admins) */}
+        {/* Admin (Stalwart admins) - hard nav because /admin lives outside the [locale] tree */}
        {isStalwartAdmin && (
-          <NextLink
+          <a
            href="/admin"
            className={cn(
              "flex flex-col items-center justify-center gap-1 py-2 px-1 min-h-[44px] grow shrink-0 basis-[64px]",
@@ -346,9 +351,20 @@ 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>
-          </NextLink>
+          </a>
        )}

        {/* Settings */}
@@ -401,7 +417,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"
@@ -514,13 +530,22 @@ export function NavigationRail({
      {/* Footer: Admin + Settings + Help + Storage Quota + Sign Out + Push Status */}
      <div className="mt-auto flex flex-col items-center gap-2 pb-3 px-1">
        {isStalwartAdmin && (
-          <NextLink
+          <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]" />
-          </NextLink>
+            {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>
        )}

        <Link
@@ -31,6 +31,8 @@ import {
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { Mailbox } from "@/lib/jmap/types";
+import { useContextMenu } from "@/hooks/use-context-menu";
+import { MailboxContextMenu, type MailboxContextTarget } from "./mailbox-context-menu";
 import { useAccountStore } from '@/stores/account-store';
 import { UNIFIED_MAILBOX_IDS } from '@/lib/jmap/types';
 import type { UnifiedMailboxRole } from '@/lib/jmap/types';
@@ -56,6 +58,15 @@ interface SidebarProps {
  onCompose?: () => void;
  onSidebarClose?: () => void;
  onUnreadFilterClick?: (mailboxId: string) => void;
+  onMarkFolderRead?: (mailboxId: string) => void;
+  onMarkFolderTreeRead?: (mailboxId: string) => void;
+  onMarkAllFoldersRead?: () => void;
+  onEmptyFolder?: (mailboxId: string) => void;
+  onCreateSubfolder?: (parentId: string) => void;
+  onCreateFolder?: () => void;
+  onRenameFolder?: (mailboxId: string) => void;
+  onDeleteFolder?: (mailboxId: string) => void;
+  onRefreshMailboxes?: () => void;
  className?: string;
 }

@@ -187,6 +198,7 @@ interface SidebarRowProps {
  dropHandlers?: Record<string, unknown>;
  isValidDropTarget?: boolean;
  isInvalidDropTarget?: boolean;
+  onContextMenu?: (e: React.MouseEvent) => void;
 }

 function SidebarRow({
@@ -206,6 +218,7 @@ function SidebarRow({
  dropHandlers,
  isValidDropTarget,
  isInvalidDropTarget,
+  onContextMenu,
 }: SidebarRowProps) {
  const t = useTranslations('sidebar');
  const leftPad = isCollapsed ? 0 : ROW_PX_BASE + depth * INDENT_STEP;
@@ -213,6 +226,7 @@ function SidebarRow({
  return (
    <div
      {...(dropHandlers || {})}
+      onContextMenu={onContextMenu}
      style={{ paddingBlock: 'var(--density-sidebar-py)' }}
      className={cn(
        "group w-full flex items-center max-lg:min-h-[44px] text-sm transition-colors duration-150",
@@ -365,6 +379,7 @@ function MailboxTreeItem({
  isCollapsed,
  onUnreadFilterClick,
  colorful,
+  onContextMenu,
 }: {
  node: MailboxNode;
  selectedMailbox: string;
@@ -374,6 +389,7 @@ function MailboxTreeItem({
  isCollapsed: boolean;
  onUnreadFilterClick?: (mailboxId: string) => void;
  colorful: boolean;
+  onContextMenu?: (e: React.MouseEvent, node: MailboxNode) => void;
 }) {
  const tNotifications = useTranslations('notifications');
  const hasChildren = node.children.length > 0;
@@ -423,6 +439,7 @@ function MailboxTreeItem({
        dropHandlers={globalDragging ? (dropHandlers as Record<string, unknown>) : undefined}
        isValidDropTarget={isValidDropTarget}
        isInvalidDropTarget={isInvalidDropTarget}
+        onContextMenu={onContextMenu && !isVirtualNode ? (e) => onContextMenu(e, node) : undefined}
      />

      {hasChildren && isExpanded && !isCollapsed && node.children.map((child) => (
@@ -436,6 +453,7 @@ function MailboxTreeItem({
          isCollapsed={isCollapsed}
          onUnreadFilterClick={onUnreadFilterClick}
          colorful={colorful}
+          onContextMenu={onContextMenu}
        />
      ))}
    </>
@@ -610,6 +628,15 @@ export function Sidebar({
  onCompose: _onCompose,
  onSidebarClose,
  onUnreadFilterClick,
+  onMarkFolderRead,
+  onMarkFolderTreeRead,
+  onMarkAllFoldersRead,
+  onEmptyFolder,
+  onCreateSubfolder,
+  onCreateFolder,
+  onRenameFolder,
+  onDeleteFolder,
+  onRefreshMailboxes,
  className,
 }: SidebarProps) {
  const router = useRouter();
@@ -790,6 +817,23 @@ export function Sidebar({
    router.push('/settings');
  };

+  const {
+    contextMenu: mailboxContextMenu,
+    openContextMenu: openMailboxContextMenu,
+    closeContextMenu: closeMailboxContextMenu,
+    menuRef: mailboxMenuRef,
+  } = useContextMenu<MailboxContextTarget>();
+
+  const handleMailboxContextMenu = (e: React.MouseEvent, node: MailboxNode) => {
+    const mailbox = mailboxes.find(mb => mb.id === node.id);
+    if (!mailbox) return;
+    openMailboxContextMenu(e, { kind: "mailbox", mailbox, hasChildren: node.children.length > 0 });
+  };
+
+  const handleFoldersHeaderContextMenu = (e: React.MouseEvent) => {
+    openMailboxContextMenu(e, { kind: "folders-section" });
+  };
+
  return (
    <div
      className={cn(
@@ -866,7 +910,7 @@ export function Sidebar({
          </div>
        )}

-        <div>
+        <div onContextMenu={handleFoldersHeaderContextMenu}>
          <SidebarSectionHeader
            label={t("folders")}
            expanded={foldersExpanded}
@@ -894,6 +938,7 @@ export function Sidebar({
                    isCollapsed={isCollapsed}
                    onUnreadFilterClick={onUnreadFilterClick}
                    colorful={colorfulSidebarIcons}
+                    onContextMenu={handleMailboxContextMenu}
                  />
                ))
              )}
@@ -934,6 +979,7 @@ export function Sidebar({
                          isCollapsed={isCollapsed}
                          onUnreadFilterClick={onUnreadFilterClick}
                          colorful={colorfulSidebarIcons}
+                          onContextMenu={handleMailboxContextMenu}
                        />
                      ))}
                    </div>
@@ -975,6 +1021,24 @@ export function Sidebar({

        {!isCollapsed && <PluginSlot name="sidebar-widget" className="border-t border-border" />}
      </div>
+
+      <MailboxContextMenu
+        target={mailboxContextMenu.data}
+        position={mailboxContextMenu.position}
+        isOpen={mailboxContextMenu.isOpen}
+        onClose={closeMailboxContextMenu}
+        menuRef={mailboxMenuRef}
+        mailboxes={mailboxes}
+        onMarkFolderRead={onMarkFolderRead}
+        onMarkFolderTreeRead={onMarkFolderTreeRead}
+        onMarkAllFoldersRead={onMarkAllFoldersRead}
+        onEmptyFolder={onEmptyFolder}
+        onCreateSubfolder={onCreateSubfolder}
+        onCreateFolder={onCreateFolder}
+        onRenameFolder={onRenameFolder}
+        onDeleteFolder={onDeleteFolder}
+        onRefresh={onRefreshMailboxes}
+      />
    </div>
  );
 }
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { NextIntlClientProvider } from 'next-intl';
 import { useLocaleStore } from '@/stores/locale-store';
+import csMessages from '@/locales/cs/common.json';
 import enMessages from '@/locales/en/common.json';
 import frMessages from '@/locales/fr/common.json';
 import jaMessages from '@/locales/ja/common.json';
@@ -15,11 +16,13 @@ import nlMessages from '@/locales/nl/common.json';
 import plMessages from '@/locales/pl/common.json';
 import ptMessages from '@/locales/pt/common.json';
 import ruMessages from '@/locales/ru/common.json';
+import trMessages from '@/locales/tr/common.json';
 import ukMessages from '@/locales/uk/common.json';
 import zhMessages from '@/locales/zh/common.json';

 // Pre-loaded translations (loaded at build time, not runtime)
 const ALL_MESSAGES = {
+  cs: csMessages,
  en: enMessages,
  fr: frMessages,
  ja: jaMessages,
@@ -32,6 +35,7 @@ const ALL_MESSAGES = {
  pl: plMessages,
  pt: ptMessages,
  ru: ruMessages,
+  tr: trMessages,
  uk: ukMessages,
  zh: zhMessages,
 };
@@ -2,6 +2,8 @@

 import { useEffect } from "react";

+const BASE_PATH = (process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/, "");
+
 export function ServiceWorkerRegistration() {
  useEffect(() => {
    if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
@@ -23,7 +25,7 @@ export function ServiceWorkerRegistration() {
    }

    navigator.serviceWorker
-      .register("/sw.js")
+      .register(`${BASE_PATH}/sw.js`, { scope: `${BASE_PATH}/` })
      .then((registration) => {
        console.log("Service Worker registered successfully:", registration);
      })
@@ -1,28 +1,60 @@
 "use client";

-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSettingsStore } from '@/stores/settings-store';
 import { useConfig } from '@/hooks/use-config';
 import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import { Button } from '@/components/ui/button';
 import { usePolicyStore } from '@/stores/policy-store';
-import { ALL_DEBUG_CATEGORIES } from '@/stores/settings-store';
+import { useUpdateStore } from '@/stores/update-store';
 import { ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { SpamSiegeGame } from './spam-siege-game';

 const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "0.0.0";
 const GIT_COMMIT = process.env.NEXT_PUBLIC_GIT_COMMIT || "unknown";

-export function AdvancedSettings() {
+function VersionUpdateTag() {
+  const status = useUpdateStore((s) => s.status);
+  const startPolling = useUpdateStore((s) => s.startPolling);
+
+  useEffect(() => {
+    startPolling();
+  }, [startPolling]);
+
+  if (!status?.updateAvailable) return null;
+  if (status.severity === 'unknown' || status.severity === 'none') return null;
+
+  const important = status.severity === 'security' || status.severity === 'deprecated';
+  const label =
+    status.severity === 'security' ? 'security'
+    : status.severity === 'deprecated' ? 'deprecated'
+    : status.latest ?? 'update';
+
+  return (
+    <span
+      className={cn(
+        "ml-2 inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium align-middle",
+        important
+          ? "bg-red-500/15 text-red-700 dark:text-red-300"
+          : "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+      )}
+    >
+      {important ? label : `update: ${label}`}
+    </span>
+  );
+}
+
+export function AboutDataSettings() {
  const t = useTranslations('settings.advanced');
  const tCommon = useTranslations('common');
-  const { debugMode, debugCategories, senderFavicons, settingsSyncDisabled, updateSetting, resetToDefaults, exportSettings, importSettings } =
+  const { settingsSyncDisabled, updateSetting, resetToDefaults, exportSettings, importSettings } =
    useSettingsStore();
  const { settingsSyncEnabled } = useConfig();
  const [showResetConfirm, setShowResetConfirm] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
-  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
+  const { isFeatureEnabled } = usePolicyStore();
  const [showGame, setShowGame] = useState(false);
  const logoClickCount = useRef(0);
  const logoClickTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -86,7 +118,6 @@ export function AdvancedSettings() {
  return (
    <>
      {showGame && <SpamSiegeGame onClose={() => setShowGame(false)} />}
-      {/* About */}
      <div className="rounded-lg border border-border bg-card p-5 mb-6">
        <div className="flex items-center gap-4">
          <button onClick={handleLogoClick} className="flex items-center gap-4 flex-1 text-left focus:outline-none group/about cursor-pointer" aria-label="About">
@@ -108,6 +139,7 @@ export function AdvancedSettings() {
              </p>
              <p className="text-xs text-muted-foreground group-hover/about:translate-x-0.5 group-active/about:translate-y-px transition-transform">
                v{APP_VERSION} <span className="text-muted-foreground/60">({GIT_COMMIT})</span>
+                <VersionUpdateTag />
              </p>
            </div>
          </button>
@@ -122,88 +154,48 @@ export function AdvancedSettings() {
        </div>
      </div>

-    <SettingsSection title={t('title')} description={t('description')}>
-      {/* Debug Mode */}
-      {!isSettingHidden('debugMode') && isFeatureEnabled('debugModeEnabled') && (
-      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')} locked={isSettingLocked('debugMode')}>
-        <ToggleSwitch checked={debugMode} onChange={(checked) => updateSetting('debugMode', checked)} />
-      </SettingItem>
-      )}
+      <SettingsSection title={t('title')} description={t('description')}>
+        {settingsSyncEnabled && (
+          <SettingItem label={t('settings_sync.label')} description={t('settings_sync.description')}>
+            <ToggleSwitch checked={!settingsSyncDisabled} onChange={(checked) => updateSetting('settingsSyncDisabled', !checked)} />
+          </SettingItem>
+        )}

-      {/* Debug Categories */}
-      {debugMode && !isSettingHidden('debugMode') && isFeatureEnabled('debugModeEnabled') && (
-        <div className="ml-4 border-l-2 border-muted pl-4 space-y-1">
-          <p className="text-xs text-muted-foreground mb-2">{t('debug_categories.description')}</p>
-          {ALL_DEBUG_CATEGORIES.map((cat) => (
-            <SettingItem
-              key={cat.id}
-              label={t(`debug_categories.${cat.labelKey}`)}
-              description={t(`debug_categories.${cat.labelKey}_description`)}
-            >
-              <ToggleSwitch
-                checked={debugCategories?.[cat.id] !== false}
-                onChange={(checked) => {
-                  updateSetting('debugCategories', {
-                    ...debugCategories,
-                    [cat.id]: checked,
-                  });
-                }}
-              />
-            </SettingItem>
-          ))}
-        </div>
-      )}
-
-      {/* Settings Sync */}
-      {settingsSyncEnabled && (
-        <SettingItem label={t('settings_sync.label')} description={t('settings_sync.description')}>
-          <ToggleSwitch checked={!settingsSyncDisabled} onChange={(checked) => updateSetting('settingsSyncDisabled', !checked)} />
-        </SettingItem>
-      )}
-
-      {/* Sender Favicons (Experimental) */}
-      <SettingItem label={t('sender_favicons.label')} description={t('sender_favicons.description')}>
-        <ToggleSwitch checked={senderFavicons} onChange={(checked) => updateSetting('senderFavicons', checked)} />
-      </SettingItem>
-
-      {/* Export Settings */}
-      {isFeatureEnabled('settingsExportEnabled') && (
-      <SettingItem label={t('export_settings.label')} description={t('export_settings.description')}>
-        <Button variant="outline" size="sm" onClick={handleExport}>
-          {t('export_settings.button')}
-        </Button>
-      </SettingItem>
-      )}
-
-      {/* Import Settings */}
-      {isFeatureEnabled('settingsExportEnabled') && (
-      <SettingItem label={t('import_settings.label')} description={t('import_settings.description')}>
-        <>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="application/json,.json"
-            onChange={handleFileChange}
-            className="hidden"
-          />
-          <Button variant="outline" size="sm" onClick={handleImport}>
-            {t('import_settings.button')}
+        {isFeatureEnabled('settingsExportEnabled') && (
+        <SettingItem label={t('export_settings.label')} description={t('export_settings.description')}>
+          <Button variant="outline" size="sm" onClick={handleExport}>
+            {t('export_settings.button')}
          </Button>
-        </>
-      </SettingItem>
-      )}
+        </SettingItem>
+        )}

-      {/* Reset Settings */}
-      <SettingItem label={t('reset_settings.label')} description={t('reset_settings.description')}>
-        <Button
-          variant={showResetConfirm ? 'destructive' : 'outline'}
-          size="sm"
-          onClick={handleReset}
-        >
-          {showResetConfirm ? tCommon('yes') : t('reset_settings.button')}
-        </Button>
-      </SettingItem>
-    </SettingsSection>
+        {isFeatureEnabled('settingsExportEnabled') && (
+        <SettingItem label={t('import_settings.label')} description={t('import_settings.description')}>
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="application/json,.json"
+              onChange={handleFileChange}
+              className="hidden"
+            />
+            <Button variant="outline" size="sm" onClick={handleImport}>
+              {t('import_settings.button')}
+            </Button>
+          </>
+        </SettingItem>
+        )}
+
+        <SettingItem label={t('reset_settings.label')} description={t('reset_settings.description')}>
+          <Button
+            variant={showResetConfirm ? 'destructive' : 'outline'}
+            size="sm"
+            onClick={handleReset}
+          >
+            {showResetConfirm ? tCommon('yes') : t('reset_settings.button')}
+          </Button>
+        </SettingItem>
+      </SettingsSection>
    </>
  );
 }
@@ -2,13 +2,14 @@

 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Book, Pencil, Share2, Tag } from "lucide-react";
+import { Book, Pencil, Share2, Tag, Users } from "lucide-react";
 import { useContactStore } from "@/stores/contact-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { toast } from "@/stores/toast-store";
 import { SettingsSection } from "./settings-section";
 import { cn } from "@/lib/utils";
-import type { AddressBook } from "@/lib/jmap/types";
+import type { AddressBook, AddressBookRights } from "@/lib/jmap/types";
+import { ShareCollectionDialog } from "./share-collection-dialog";

 function AddressBookEditRow({
  initial,
@@ -70,9 +71,10 @@ export function AddressBookManagementSettings() {
  const tContacts = useTranslations("contacts");
  const tSettings = useTranslations("settings.contacts");
  const { client } = useAuthStore();
-  const { addressBooks, contacts, supportsSync, fetchAddressBooks, renameAddressBook, renameKeyword } = useContactStore();
+  const { addressBooks, contacts, supportsSync, fetchAddressBooks, renameAddressBook, shareAddressBook, renameKeyword } = useContactStore();
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editingKeyword, setEditingKeyword] = useState<string | null>(null);
+  const [sharingId, setSharingId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
@@ -137,6 +139,19 @@ export function AddressBookManagementSettings() {
            {t("default")}
          </span>
        )}
+        {(() => {
+          const shareCount = Object.keys(book.shareWith || {}).length;
+          if (shareCount === 0 || book.isShared) return null;
+          return (
+            <span
+              className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full"
+              title={t("share")}
+            >
+              <Users className="w-3 h-3" />
+              {shareCount}
+            </span>
+          );
+        })()}
        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
          {canRename && (
            <button
@@ -148,6 +163,16 @@ export function AddressBookManagementSettings() {
              <Pencil className="w-3.5 h-3.5" />
            </button>
          )}
+          {!book.isShared && book.myRights?.mayShare && (
+            <button
+              type="button"
+              onClick={() => setSharingId(book.id)}
+              className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              title={t("share")}
+            >
+              <Users className="w-3.5 h-3.5" />
+            </button>
+          )}
        </div>
      </div>
    );
@@ -242,6 +267,24 @@ export function AddressBookManagementSettings() {
        </div>
      </SettingsSection>
    </div>
+
+    {sharingId && client && (() => {
+      const book = addressBooks.find((b) => b.id === sharingId);
+      if (!book) return null;
+      return (
+        <ShareCollectionDialog
+          client={client}
+          kind="addressBook"
+          collectionName={book.name}
+          shareWith={book.shareWith}
+          ownAccountId={client.getAccountId()}
+          onShare={async (principalId, rights) => {
+            await shareAddressBook(client, book, principalId, rights as AddressBookRights | null);
+          }}
+          onClose={() => setSharingId(null)}
+        />
+      );
+    })()}
    </>
  );
 }
@@ -2,15 +2,13 @@

 import { useTranslations } from 'next-intl';
 import { useThemeStore } from '@/stores/theme-store';
-import { useSettingsStore, type ToolbarPosition, type Density } from '@/stores/settings-store';
-import { LanguageSwitcher } from '@/components/ui/language-switcher';
+import { useSettingsStore, type Density } from '@/stores/settings-store';
 import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
 import { cn } from '@/lib/utils';
 import { useTour } from '@/components/tour/tour-provider';
 import { Button } from '@/components/ui/button';
 import { PlayCircle } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
-import { useAccountStore } from '@/stores/account-store';

 const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: boolean; showPreview: boolean }> = {
  'extra-compact': { py: 'py-0.5', gap: 'gap-1.5', showAvatar: false, showPreview: false },
@@ -66,16 +64,15 @@ function DensityPreview({ density }: { density: Density }) {

 export function AppearanceSettings() {
  const t = useTranslations('settings.appearance');
+  const tAdvanced = useTranslations('settings.advanced');
  const tTour = useTranslations('tour');
  const { theme, setTheme } = useThemeStore();
-  const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, colorfulSidebarIcons, updateSetting } = useSettingsStore();
+  const { fontSize, density, animationsEnabled, senderFavicons, showAvatarsInJunk, updateSetting } = useSettingsStore();
  const { startTour, resetTourCompletion } = useTour();
  const { isSettingLocked, isSettingHidden } = usePolicyStore();
-  const accounts = useAccountStore(s => s.accounts);

  return (
    <SettingsSection title={t('title')} description={t('description')}>
-      {/* Theme */}
      <SettingItem label={t('theme.label')} description={t('theme.description')}>
        <RadioGroup
          value={theme}
@@ -88,12 +85,6 @@ export function AppearanceSettings() {
        />
      </SettingItem>

-      {/* Language */}
-      <SettingItem label={t('language.label')} description={t('language.description')}>
-        <LanguageSwitcher />
-      </SettingItem>
-
-      {/* Font Size */}
      {!isSettingHidden('fontSize') && (
      <SettingItem label={t('font_size.label')} description={t('font_size.description')} locked={isSettingLocked('fontSize')}>
        <RadioGroup
@@ -108,7 +99,6 @@ export function AppearanceSettings() {
      </SettingItem>
      )}

-      {/* Density */}
      {!isSettingHidden('density') && (
      <SettingItem label={t('list_density.label')} description={t('list_density.description')} locked={isSettingLocked('density')}>
        <RadioGroup
@@ -127,64 +117,6 @@ export function AppearanceSettings() {
      </SettingItem>
      )}

-      {/* Toolbar Position */}
-      <SettingItem label={t('toolbar_position.label')} description={t('toolbar_position.description')}>
-        <RadioGroup
-          value={toolbarPosition}
-          onChange={(value) => updateSetting('toolbarPosition', value as ToolbarPosition)}
-          options={[
-            { value: 'top', label: t('toolbar_position.top') },
-            { value: 'below-subject', label: t('toolbar_position.below_subject') },
-          ]}
-        />
-      </SettingItem>
-
-      {/* Toolbar Labels */}
-      <SettingItem label={t('toolbar_labels.label')} description={t('toolbar_labels.description')}>
-        <ToggleSwitch
-          checked={showToolbarLabels}
-          onChange={(checked) => updateSetting('showToolbarLabels', checked)}
-        />
-      </SettingItem>
-
-      {/* Hide Account Switcher */}
-      <SettingItem label={t('hide_account_switcher.label')} description={t('hide_account_switcher.description')}>
-        <ToggleSwitch
-          checked={hideAccountSwitcher}
-          onChange={(checked) => updateSetting('hideAccountSwitcher', checked)}
-        />
-      </SettingItem>
-
-      {/* Show Rail Account List */}
-      <SettingItem label={t('show_rail_account_list.label')} description={t('show_rail_account_list.description')}>
-        <ToggleSwitch
-          checked={showRailAccountList}
-          onChange={(checked) => updateSetting('showRailAccountList', checked)}
-        />
-      </SettingItem>
-
-      {/* Colorful Sidebar Icons */}
-      <SettingItem label={t('colorful_sidebar_icons.label')} description={t('colorful_sidebar_icons.description')}>
-        <ToggleSwitch
-          checked={colorfulSidebarIcons}
-          onChange={(checked) => updateSetting('colorfulSidebarIcons', checked)}
-        />
-      </SettingItem>
-
-      {/* Unified Mailbox */}
-      {accounts.length > 1 && (
-        <SettingItem
-          label={t('unified_mailbox.label')}
-          description={t('unified_mailbox.description')}
-        >
-          <ToggleSwitch
-            checked={enableUnifiedMailbox}
-            onChange={(v) => updateSetting('enableUnifiedMailbox', v)}
-          />
-        </SettingItem>
-      )}
-
-      {/* Animations */}
      {!isSettingHidden('animationsEnabled') && (
      <SettingItem label={t('animations.label')} description={t('animations.description')} locked={isSettingLocked('animationsEnabled')}>
        <ToggleSwitch
@@ -194,7 +126,14 @@ export function AppearanceSettings() {
      </SettingItem>
      )}

-      {/* Restart Tour */}
+      <SettingItem label={tAdvanced('sender_favicons.label')} description={tAdvanced('sender_favicons.description')}>
+        <ToggleSwitch checked={senderFavicons} onChange={(checked) => updateSetting('senderFavicons', checked)} />
+      </SettingItem>
+
+      <SettingItem label={tAdvanced('show_avatars_in_junk.label')} description={tAdvanced('show_avatars_in_junk.description')}>
+        <ToggleSwitch checked={showAvatarsInJunk} onChange={(checked) => updateSetting('showAvatarsInJunk', checked)} />
+      </SettingItem>
+
      <SettingItem label={tTour('restart_title')} description={tTour('restart_desc')}>
        <Button
          variant="outline"
@@ -7,7 +7,9 @@ import { useAuthStore } from '@/stores/auth-store';
 import { getActiveAccountSlotHeaders } from '@/lib/auth/active-account-slot';
 import { toast } from '@/stores/toast-store';
 import { SettingsSection } from './settings-section';
-import { Plus, Pencil, Trash2, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser } from 'lucide-react';
+import { Plus, Pencil, Trash2, Calendar as CalendarIcon, Copy, Link, Upload, Globe, RefreshCw, Eraser, Users } from 'lucide-react';
+import { ShareCollectionDialog } from './share-collection-dialog';
+import type { CalendarRights } from '@/lib/jmap/types';
 import { cn, formatDateTime } from '@/lib/utils';
 import { ICalImportModal } from '@/components/calendar/ical-import-modal';
 import { ICalSubscriptionModal } from '@/components/calendar/ical-subscription-modal';
@@ -83,7 +85,7 @@ function CalendarColorPicker({
  );
 }

-function CalendarEditForm({
+export function CalendarEditForm({
  initial,
  onSave,
  onCancel,
@@ -153,7 +155,7 @@ export { CalendarColorPicker, CALENDAR_COLORS };
 export function CalendarManagementSettings() {
  const t = useTranslations('calendar.management');
  const { client, serverUrl, username } = useAuthStore();
-  const { calendars, updateCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
+  const { calendars, updateCalendar, shareCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();

  const [discoveredCalDavUrls, setDiscoveredCalDavUrls] = useState<Record<string, string | null>>({});
  const [wellKnownCalDavUrl, setWellKnownCalDavUrl] = useState<string | null>(null);
@@ -164,6 +166,7 @@ export function CalendarManagementSettings() {
  const [clearingId, setClearingId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [colorPickerId, setColorPickerId] = useState<string | null>(null);
+  const [sharingId, setSharingId] = useState<string | null>(null);
  const [showImportModal, setShowImportModal] = useState(false);
  const [showSubscriptionModal, setShowSubscriptionModal] = useState(false);
  const [editingSubscription, setEditingSubscription] = useState<typeof icalSubscriptions[0] | null>(null);
@@ -513,6 +516,20 @@ export function CalendarManagementSettings() {
                </span>
              )}

+              {(() => {
+                const shareCount = Object.keys(cal.shareWith || {}).length;
+                if (shareCount === 0 || cal.isShared) return null;
+                return (
+                  <span
+                    className="flex items-center gap-1 text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full"
+                    title={t('share')}
+                  >
+                    <Users className="w-3 h-3" />
+                    {shareCount}
+                  </span>
+                );
+              })()}
+
              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <button
                  type="button"
@@ -522,6 +539,16 @@ export function CalendarManagementSettings() {
                >
                  <Pencil className="w-3.5 h-3.5" />
                </button>
+                {cal.myRights?.mayShare && !cal.isShared && !isSubscriptionCalendar(cal.id) && (
+                  <button
+                    type="button"
+                    onClick={() => setSharingId(cal.id)}
+                    className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                    title={t('share')}
+                  >
+                    <Users className="w-3.5 h-3.5" />
+                  </button>
+                )}
                <button
                  type="button"
                  onClick={() => setClearingId(cal.id)}
@@ -689,6 +716,24 @@ export function CalendarManagementSettings() {
          onClose={() => setEditingSubscription(null)}
        />
      )}
+
+      {sharingId && client && (() => {
+        const cal = calendars.find((c) => c.id === sharingId);
+        if (!cal) return null;
+        return (
+          <ShareCollectionDialog
+            client={client}
+            kind="calendar"
+            collectionName={cal.name}
+            shareWith={cal.shareWith}
+            ownAccountId={client.getAccountId()}
+            onShare={async (principalId, rights) => {
+              await shareCalendar(client, cal.id, principalId, rights as CalendarRights | null);
+            }}
+            onClose={() => setSharingId(null)}
+          />
+        );
+      })()}
    </SettingsSection>
  );
 }
@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
+import { useConfig } from '@/hooks/use-config';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+import { Mail, X } from 'lucide-react';
+import { getPathPrefix } from '@/lib/browser-navigation';
+import {
+  SUPPORTED_SUB_ADDRESS_DELIMITERS,
+  isSupportedSubAddressDelimiter,
+  isValidSubAddressDelimiter,
+} from '@/lib/sub-addressing';
+
+const CUSTOM_DELIMITER_SENTINEL = '__custom__';
+const DEFAULT_CUSTOM_DELIMITER = '~';
+
+export function ComposingSettings() {
+  const t = useTranslations('settings.email_behavior');
+  const { appName } = useConfig();
+  const [defaultMailStatus, setDefaultMailStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [newKeyword, setNewKeyword] = useState('');
+
+  const {
+    autoSelectReplyIdentity,
+    attachmentReminderEnabled,
+    attachmentReminderKeywords,
+    subAddressDelimiter,
+    updateSetting,
+  } = useSettingsStore();
+
+  const handleSetDefaultMailProgram = useCallback(() => {
+    try {
+      if (typeof navigator !== 'undefined' && navigator.registerProtocolHandler) {
+        navigator.registerProtocolHandler('mailto', `${window.location.origin}${getPathPrefix()}/compose?mailto=%s`);
+        setDefaultMailStatus('success');
+      }
+    } catch {
+      setDefaultMailStatus('error');
+    }
+  }, []);
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      <SettingItem label={t('auto_select_reply_identity.label')} description={t('auto_select_reply_identity.description')}>
+        <ToggleSwitch
+          checked={autoSelectReplyIdentity}
+          onChange={(checked) => updateSetting('autoSelectReplyIdentity', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem
+        label={t('sub_address_delimiter.label')}
+        description={t('sub_address_delimiter.description', { delimiter: subAddressDelimiter })}
+      >
+        <div className="flex flex-col items-end gap-2">
+          <Select
+            value={isSupportedSubAddressDelimiter(subAddressDelimiter) ? subAddressDelimiter : CUSTOM_DELIMITER_SENTINEL}
+            onChange={(value) => {
+              if (value === CUSTOM_DELIMITER_SENTINEL) {
+                if (isSupportedSubAddressDelimiter(subAddressDelimiter)) {
+                  updateSetting('subAddressDelimiter', DEFAULT_CUSTOM_DELIMITER);
+                }
+              } else {
+                updateSetting('subAddressDelimiter', value);
+              }
+            }}
+            options={[
+              ...SUPPORTED_SUB_ADDRESS_DELIMITERS.map((delim) => ({
+                value: delim,
+                label: t('sub_address_delimiter.option', { delimiter: delim }),
+              })),
+              { value: CUSTOM_DELIMITER_SENTINEL, label: t('sub_address_delimiter.custom') },
+            ]}
+          />
+          {!isSupportedSubAddressDelimiter(subAddressDelimiter) && (
+            <input
+              type="text"
+              maxLength={1}
+              value={subAddressDelimiter}
+              onChange={(e) => {
+                const next = e.target.value.slice(0, 1);
+                if (next && isValidSubAddressDelimiter(next)) {
+                  updateSetting('subAddressDelimiter', next);
+                }
+              }}
+              aria-label={t('sub_address_delimiter.custom_input_label')}
+              placeholder={DEFAULT_CUSTOM_DELIMITER}
+              className="w-16 px-2 py-1 text-sm font-mono text-center bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+          )}
+        </div>
+      </SettingItem>
+
+      <SettingItem label={t('attachment_reminder.label')} description={t('attachment_reminder.description')}>
+        <ToggleSwitch
+          checked={attachmentReminderEnabled}
+          onChange={(checked) => updateSetting('attachmentReminderEnabled', checked)}
+        />
+      </SettingItem>
+      {attachmentReminderEnabled && (
+        <div className="py-3 border-b border-border space-y-2">
+          <div>
+            <label className="text-sm font-medium text-foreground">{t('attachment_reminder.keywords_label')}</label>
+            <p className="text-xs text-muted-foreground mt-1">{t('attachment_reminder.keywords_description')}</p>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {attachmentReminderKeywords.map((kw) => (
+              <span key={kw} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-muted text-foreground">
+                {kw}
+                <button
+                  type="button"
+                  aria-label={t('attachment_reminder.remove')}
+                  onClick={() => updateSetting('attachmentReminderKeywords', attachmentReminderKeywords.filter(k => k !== kw))}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+          <form
+            className="flex gap-2"
+            onSubmit={(e) => {
+              e.preventDefault();
+              const trimmed = newKeyword.trim().toLowerCase();
+              if (trimmed && !attachmentReminderKeywords.includes(trimmed)) {
+                updateSetting('attachmentReminderKeywords', [...attachmentReminderKeywords, trimmed]);
+              }
+              setNewKeyword('');
+            }}
+          >
+            <input
+              type="text"
+              value={newKeyword}
+              onChange={(e) => setNewKeyword(e.target.value)}
+              placeholder={t('attachment_reminder.add_placeholder')}
+              className="flex-1 min-w-0 px-2 py-1 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
+            />
+            <button
+              type="submit"
+              disabled={!newKeyword.trim()}
+              className="px-3 py-1 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {t('attachment_reminder.add')}
+            </button>
+          </form>
+        </div>
+      )}
+
+      <SettingItem label={t('default_mail_program.label')} description={t('default_mail_program.description', { appName: appName || 'Bulwark' })}>
+        <div className="flex flex-col items-end gap-1">
+          <button
+            onClick={handleSetDefaultMailProgram}
+            className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
+          >
+            <Mail className="w-4 h-4" />
+            <span className="text-sm text-foreground">{t('default_mail_program.button')}</span>
+          </button>
+          {defaultMailStatus === 'success' && (
+            <p className="text-xs text-green-600 dark:text-green-400">{t('default_mail_program.success')}</p>
+          )}
+          {defaultMailStatus === 'error' && (
+            <p className="text-xs text-destructive">{t('default_mail_program.error')}</p>
+          )}
+        </div>
+      </SettingItem>
+    </SettingsSection>
+  );
+}
@@ -4,11 +4,12 @@ import { useState, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Upload, Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { SettingsSection, SettingItem } from "./settings-section";
+import { SettingsSection, SettingItem, ToggleSwitch } from "./settings-section";
 import { ContactImportDialog } from "@/components/contacts/contact-import-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
 import { useContactStore } from "@/stores/contact-store";
 import { useAuthStore } from "@/stores/auth-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";

 export function ContactsSettings() {
@@ -20,6 +21,8 @@ export function ContactsSettings() {
    supportsSync,
    importContacts,
  } = useContactStore();
+  const groupContactsByLetter = useSettingsStore((s) => s.groupContactsByLetter);
+  const updateSetting = useSettingsStore((s) => s.updateSetting);
  const [showImport, setShowImport] = useState(false);

  const individuals = contacts.filter(c => c.kind !== "group");
@@ -55,6 +58,16 @@ export function ContactsSettings() {
      title={tSettings("title")}
      description={tSettings("description")}
    >
+      <SettingItem
+        label={tSettings("group_by_letter_label")}
+        description={tSettings("group_by_letter_description")}
+      >
+        <ToggleSwitch
+          checked={groupContactsByLetter}
+          onChange={(checked) => updateSetting("groupContactsByLetter", checked)}
+        />
+      </SettingItem>
+
      <SettingItem
        label={tSettings("import_label")}
        description={tSettings("import_description")}
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+import { TrustedSendersModal } from '@/components/trusted-senders-modal';
+import { ChevronRight } from 'lucide-react';
+import { usePolicyStore } from '@/stores/policy-store';
+import { useContactStore } from '@/stores/contact-store';
+
+export function ContentSendersSettings() {
+  const t = useTranslations('settings.email_behavior');
+  const [showTrustedModal, setShowTrustedModal] = useState(false);
+  const { isSettingLocked, isSettingHidden } = usePolicyStore();
+
+  const {
+    externalContentPolicy,
+    emailAlwaysLightMode,
+    trustedSenders,
+    trustedSendersAddressBook,
+    updateSetting,
+  } = useSettingsStore();
+  const { trustedSenderEmails } = useContactStore();
+
+  const getTrustedSendersCount = () => {
+    const count = trustedSendersAddressBook ? trustedSenderEmails.length : trustedSenders.length;
+    if (count === 0) return t('trusted_senders.count_zero');
+    if (count === 1) return t('trusted_senders.count_one');
+    return t('trusted_senders.count_other', { count });
+  };
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {!isSettingHidden('externalContentPolicy') && (
+      <SettingItem label={t('external_content.label')} description={t('external_content.description')} locked={isSettingLocked('externalContentPolicy')}>
+        <Select
+          value={externalContentPolicy}
+          onChange={(value) =>
+            updateSetting('externalContentPolicy', value as 'ask' | 'block' | 'allow')
+          }
+          options={[
+            { value: 'ask', label: t('external_content.ask') },
+            { value: 'block', label: t('external_content.block') },
+            { value: 'allow', label: t('external_content.allow') },
+          ]}
+        />
+      </SettingItem>
+      )}
+
+      <SettingItem label={t('always_light_mode.label')} description={t('always_light_mode.description')}>
+        <ToggleSwitch
+          checked={emailAlwaysLightMode}
+          onChange={(checked) => updateSetting('emailAlwaysLightMode', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('trusted_senders.label')} description={t('trusted_senders.description')}>
+        <button
+          onClick={() => setShowTrustedModal(true)}
+          className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
+        >
+          <span className="text-sm text-foreground">{getTrustedSendersCount()}</span>
+          <ChevronRight className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </SettingItem>
+
+      <SettingItem label={t('trusted_senders.use_address_book_label')} description={t('trusted_senders.use_address_book_description')}>
+        <ToggleSwitch
+          checked={trustedSendersAddressBook}
+          onChange={(checked) => updateSetting('trustedSendersAddressBook', checked)}
+        />
+      </SettingItem>
+
+      <TrustedSendersModal
+        isOpen={showTrustedModal}
+        onClose={() => setShowTrustedModal(false)}
+      />
+    </SettingsSection>
+  );
+}
@@ -0,0 +1,51 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useSettingsStore, ALL_DEBUG_CATEGORIES } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
+import { usePolicyStore } from '@/stores/policy-store';
+
+export function DebugSettings() {
+  const t = useTranslations('settings.advanced');
+  const { debugMode, debugCategories, updateSetting } = useSettingsStore();
+  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
+
+  if (isSettingHidden('debugMode') || !isFeatureEnabled('debugModeEnabled')) {
+    return (
+      <SettingsSection title={t('debug_mode.label')} description={t('debug_mode.description')}>
+        <p className="text-sm text-muted-foreground py-2">{t('debug_mode.description')}</p>
+      </SettingsSection>
+    );
+  }
+
+  return (
+    <SettingsSection title={t('debug_mode.label')} description={t('debug_mode.description')}>
+      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')} locked={isSettingLocked('debugMode')}>
+        <ToggleSwitch checked={debugMode} onChange={(checked) => updateSetting('debugMode', checked)} />
+      </SettingItem>
+
+      {debugMode && (
+        <div className="ml-4 border-l-2 border-muted pl-4 space-y-1">
+          <p className="text-xs text-muted-foreground mb-2">{t('debug_categories.description')}</p>
+          {ALL_DEBUG_CATEGORIES.map((cat) => (
+            <SettingItem
+              key={cat.id}
+              label={t(`debug_categories.${cat.labelKey}`)}
+              description={t(`debug_categories.${cat.labelKey}_description`)}
+            >
+              <ToggleSwitch
+                checked={debugCategories?.[cat.id] !== false}
+                onChange={(checked) => {
+                  updateSetting('debugCategories', {
+                    ...debugCategories,
+                    [cat.id]: checked,
+                  });
+                }}
+              />
+            </SettingItem>
+          ))}
+        </div>
+      )}
+    </SettingsSection>
+  );
+}
@@ -0,0 +1,17 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { LanguageSwitcher } from '@/components/ui/language-switcher';
+import { SettingsSection, SettingItem } from './settings-section';
+
+export function LanguageSettings() {
+  const t = useTranslations('settings.appearance');
+
+  return (
+    <SettingsSection title={t('language.label')} description={t('language.description')}>
+      <SettingItem label={t('language.label')} description={t('language.description')}>
+        <LanguageSwitcher />
+      </SettingItem>
+    </SettingsSection>
+  );
+}
@@ -0,0 +1,162 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useSettingsStore, type ToolbarPosition, type MailLayout } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
+import { cn } from '@/lib/utils';
+import { usePolicyStore } from '@/stores/policy-store';
+import { useAccountStore } from '@/stores/account-store';
+
+const MAIL_LAYOUT_PREVIEW_ROWS = [
+  { sender: 'Alice', subject: 'Quarterly roadmap', preview: 'The draft is ready for review.', selected: false },
+  { sender: 'Nadia', subject: 'Design sync', preview: 'Pushed updated mocks and notes.', selected: true },
+  { sender: 'Billing', subject: 'Invoice 1042', preview: 'Your receipt is attached.', selected: false },
+];
+
+function MailLayoutPreview({
+  value,
+  t,
+}: {
+  value: MailLayout;
+  t: (key: string) => string;
+}) {
+  const isSplit = value === 'split';
+
+  return (
+    <div className="mt-3 rounded-xl border border-border bg-background p-3">
+      <div>
+        <div className="text-sm font-medium text-foreground">{t(`mail_layout.${value}`)}</div>
+        <div className="mt-1 text-xs text-muted-foreground">{t(`mail_layout.${value}_description`)}</div>
+      </div>
+
+      <div className="mt-3 overflow-hidden rounded-lg border border-border bg-muted/20">
+        <div className="flex h-28">
+          <div className="w-11 border-r border-border bg-muted/40" />
+
+          {isSplit ? (
+            <>
+              <div className="w-28 border-r border-border bg-background">
+                {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
+                  <div
+                    key={row.subject}
+                    className={cn(
+                      'border-b border-border px-2 py-1.5 text-[10px] last:border-b-0',
+                      row.selected && 'bg-primary/10'
+                    )}
+                  >
+                    <div className="truncate font-medium text-foreground">{row.sender}</div>
+                    <div className="truncate text-muted-foreground">{row.subject}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="flex-1 bg-background px-3 py-2">
+                <div className="h-2.5 w-20 rounded bg-foreground/10" />
+                <div className="mt-2 h-2 w-full rounded bg-foreground/10" />
+                <div className="mt-1.5 h-2 w-5/6 rounded bg-foreground/10" />
+                <div className="mt-1.5 h-2 w-2/3 rounded bg-foreground/10" />
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 bg-background px-2 py-2">
+              <div className="space-y-1.5">
+                {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
+                  <div
+                    key={row.subject}
+                    className={cn(
+                      'rounded-md px-2 py-1 text-[10px]',
+                      row.selected ? 'bg-primary/10' : 'bg-muted/20'
+                    )}
+                  >
+                    <div className="truncate text-foreground">
+                      <span className="font-medium">{row.sender}</span>
+                      <span className="mx-1.5 text-muted-foreground">{row.subject}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LayoutSettings() {
+  const t = useTranslations('settings.appearance');
+  const tEmail = useTranslations('settings.email_behavior');
+  const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, colorfulSidebarIcons, mailLayout, updateSetting } = useSettingsStore();
+  const { isSettingLocked, isSettingHidden } = usePolicyStore();
+  const accounts = useAccountStore(s => s.accounts);
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {!isSettingHidden('mailLayout') && (
+      <SettingItem label={tEmail('mail_layout.label')} description={tEmail('mail_layout.description')} locked={isSettingLocked('mailLayout')}>
+        <div className="w-[22rem] max-w-full">
+          <RadioGroup
+            value={mailLayout}
+            onChange={(value) => updateSetting('mailLayout', value as MailLayout)}
+            options={[
+              { value: 'split', label: tEmail('mail_layout.split') },
+              { value: 'focus', label: tEmail('mail_layout.focus') },
+            ]}
+          />
+          <MailLayoutPreview value={mailLayout} t={tEmail} />
+        </div>
+      </SettingItem>
+      )}
+
+      <SettingItem label={t('toolbar_position.label')} description={t('toolbar_position.description')}>
+        <RadioGroup
+          value={toolbarPosition}
+          onChange={(value) => updateSetting('toolbarPosition', value as ToolbarPosition)}
+          options={[
+            { value: 'top', label: t('toolbar_position.top') },
+            { value: 'below-subject', label: t('toolbar_position.below_subject') },
+          ]}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('toolbar_labels.label')} description={t('toolbar_labels.description')}>
+        <ToggleSwitch
+          checked={showToolbarLabels}
+          onChange={(checked) => updateSetting('showToolbarLabels', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('hide_account_switcher.label')} description={t('hide_account_switcher.description')}>
+        <ToggleSwitch
+          checked={hideAccountSwitcher}
+          onChange={(checked) => updateSetting('hideAccountSwitcher', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('show_rail_account_list.label')} description={t('show_rail_account_list.description')}>
+        <ToggleSwitch
+          checked={showRailAccountList}
+          onChange={(checked) => updateSetting('showRailAccountList', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('colorful_sidebar_icons.label')} description={t('colorful_sidebar_icons.description')}>
+        <ToggleSwitch
+          checked={colorfulSidebarIcons}
+          onChange={(checked) => updateSetting('colorfulSidebarIcons', checked)}
+        />
+      </SettingItem>
+
+      {accounts.length > 1 && (
+        <SettingItem
+          label={t('unified_mailbox.label')}
+          description={t('unified_mailbox.description')}
+        >
+          <ToggleSwitch
+            checked={enableUnifiedMailbox}
+            onChange={(v) => updateSetting('enableUnifiedMailbox', v)}
+          />
+        </SettingItem>
+      )}
+    </SettingsSection>
+  );
+}
@@ -1,13 +1,32 @@
 "use client";

+import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSettingsStore } from '@/stores/settings-store';
 import { SettingsSection, SettingItem, ToggleSwitch, Select } from './settings-section';
 import { playNotificationSound, NOTIFICATION_SOUNDS } from '@/lib/notification-sound';
 import type { NotificationSoundChoice } from '@/lib/notification-sound';
 import { Button } from '@/components/ui/button';
-import { Volume2 } from 'lucide-react';
+import { CheckCircle2, Volume2, XCircle } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
+import { useAuthStore } from '@/stores/auth-store';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { useConfirmDialog } from '@/hooks/use-confirm-dialog';
+import {
+  DEFAULT_RELAY_BASE_URL,
+  WebPushUnsupportedError,
+  disableWebPush,
+  enableWebPush,
+  isWebPushEnabled,
+  isWebPushSupported,
+} from '@/lib/web-push';
+
+type PushStatus =
+  | { kind: 'idle' }
+  | { kind: 'busy' }
+  | { kind: 'enabled' }
+  | { kind: 'unsupported' }
+  | { kind: 'error'; message: string };

 export function NotificationSettings() {
  const t = useTranslations('settings.notifications');
@@ -21,6 +40,77 @@ export function NotificationSettings() {
    updateSetting,
  } = useSettingsStore();
  const { isSettingLocked, isSettingHidden } = usePolicyStore();
+  const client = useAuthStore((s) => s.client);
+  const username = useAuthStore((s) => s.username);
+  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
+
+  const supported = typeof window !== 'undefined' && isWebPushSupported();
+  const [relayUrl, setRelayUrl] = useState(DEFAULT_RELAY_BASE_URL);
+  const [pushStatus, setPushStatus] = useState<PushStatus>(
+    supported ? { kind: 'idle' } : { kind: 'unsupported' },
+  );
+
+  useEffect(() => {
+    if (!supported) return;
+    void (async () => {
+      const enabled = await isWebPushEnabled();
+      if (enabled) setPushStatus({ kind: 'enabled' });
+    })();
+  }, [supported]);
+
+  const trimmedRelay = relayUrl.trim().replace(/\/+$/, '');
+  const isValidRelay = /^https?:\/\/.+/i.test(trimmedRelay);
+  const busy = pushStatus.kind === 'busy';
+
+  const handleEnablePush = async () => {
+    if (!client) {
+      setPushStatus({ kind: 'error', message: 'Sign in first' });
+      return;
+    }
+    if (!isValidRelay) {
+      setPushStatus({ kind: 'error', message: 'Enter a valid https:// URL' });
+      return;
+    }
+    setPushStatus({ kind: 'busy' });
+    try {
+      await enableWebPush({
+        client,
+        relayBaseUrl: trimmedRelay,
+        accountLabel: username ?? undefined,
+      });
+      setPushStatus({ kind: 'enabled' });
+    } catch (err) {
+      if (err instanceof WebPushUnsupportedError) {
+        setPushStatus({ kind: 'unsupported' });
+        return;
+      }
+      setPushStatus({
+        kind: 'error',
+        message: err instanceof Error ? err.message : 'Failed to enable push',
+      });
+    }
+  };
+
+  const handleDisablePush = async () => {
+    if (!client) return;
+    const confirmed = await confirmDialog({
+      title: t('push.confirm_disable_title'),
+      message: t('push.confirm_disable_message'),
+      confirmText: t('push.disable'),
+      variant: 'destructive',
+    });
+    if (!confirmed) return;
+    setPushStatus({ kind: 'busy' });
+    try {
+      await disableWebPush({ client, relayBaseUrl: trimmedRelay });
+      setPushStatus({ kind: 'idle' });
+    } catch (err) {
+      setPushStatus({
+        kind: 'error',
+        message: err instanceof Error ? err.message : 'Failed to disable push',
+      });
+    }
+  };

  const soundOptions = NOTIFICATION_SOUNDS.map((s) => ({
    value: s.id,
@@ -29,6 +119,46 @@ export function NotificationSettings() {

  return (
    <div className="space-y-8">
+      <SettingsSection title={t('push.title')} description={t('push.description')}>
+        <div className="rounded-md border p-4 space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <label className="text-sm font-medium" htmlFor="push-relay-url">
+              {t('push.relay_label')}
+            </label>
+            <PushStatusBadge status={pushStatus} t={t} />
+          </div>
+          <p className="text-xs text-muted-foreground">{t('push.relay_desc')}</p>
+          <input
+            id="push-relay-url"
+            type="url"
+            inputMode="url"
+            autoComplete="off"
+            spellCheck={false}
+            value={relayUrl}
+            onChange={(e) => setRelayUrl(e.target.value)}
+            placeholder={t('push.relay_placeholder')}
+            disabled={busy || pushStatus.kind === 'unsupported'}
+            className="w-full rounded border bg-background px-3 py-2 text-sm disabled:opacity-50"
+          />
+          <div className="flex flex-wrap gap-2">
+            <Button
+              onClick={handleEnablePush}
+              disabled={busy || pushStatus.kind === 'unsupported' || !isValidRelay || !client}
+            >
+              {pushStatus.kind === 'enabled' ? t('push.reenable') : t('push.enable')}
+            </Button>
+            {pushStatus.kind === 'enabled' && (
+              <Button variant="outline" onClick={handleDisablePush} disabled={busy}>
+                {t('push.disable')}
+              </Button>
+            )}
+          </div>
+          {pushStatus.kind === 'unsupported' && (
+            <p className="text-xs text-muted-foreground">{t('push.ios_hint')}</p>
+          )}
+        </div>
+      </SettingsSection>
+
      <SettingsSection title={t('sound_selection.title')} description={t('sound_selection.description')}>
        <SettingItem
          label={t('sound_selection.choose')}
@@ -118,6 +248,45 @@ export function NotificationSettings() {
          />
        </SettingItem>
      </SettingsSection>
+
+      <ConfirmDialog {...confirmDialogProps} />
    </div>
  );
 }
+
+function PushStatusBadge({
+  status,
+  t,
+}: {
+  status: PushStatus;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  if (status.kind === 'enabled') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
+        <CheckCircle2 className="w-3.5 h-3.5" />
+        {t('push.status_active')}
+      </span>
+    );
+  }
+  if (status.kind === 'busy') {
+    return <span className="text-xs text-muted-foreground">{t('push.status_busy')}</span>;
+  }
+  if (status.kind === 'unsupported') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+        <XCircle className="w-3.5 h-3.5" />
+        {t('push.status_unsupported')}
+      </span>
+    );
+  }
+  if (status.kind === 'error') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-destructive" title={status.message}>
+        <XCircle className="w-3.5 h-3.5" />
+        {status.message}
+      </span>
+    );
+  }
+  return <span className="text-xs text-muted-foreground">{t('push.status_inactive')}</span>;
+}
@@ -1,118 +1,23 @@
 "use client";

-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { useConfig } from '@/hooks/use-config';
 import { useSettingsStore } from '@/stores/settings-store';
-import type { ArchiveMode, HoverAction, MailLayout } from '@/stores/settings-store';
+import type { ArchiveMode, HoverAction } from '@/stores/settings-store';
 import { ALL_HOVER_ACTIONS } from '@/stores/settings-store';
 import { useAuthStore } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
 import { cn } from '@/lib/utils';
-import { RadioGroup, SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
-import { TrustedSendersModal } from '@/components/trusted-senders-modal';
-import { ChevronRight, AlertTriangle, FolderSync, Loader2, Mail, X } from 'lucide-react';
+import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+import { AlertTriangle, FolderSync, Loader2 } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
-import { useContactStore } from '@/stores/contact-store';

-const MAIL_LAYOUT_PREVIEW_ROWS = [
-  { sender: 'Alice', subject: 'Quarterly roadmap', preview: 'The draft is ready for review.', selected: false },
-  { sender: 'Nadia', subject: 'Design sync', preview: 'Pushed updated mocks and notes.', selected: true },
-  { sender: 'Billing', subject: 'Invoice 1042', preview: 'Your receipt is attached.', selected: false },
-];
-
-function MailLayoutPreview({
-  value,
-  t,
-}: {
-  value: MailLayout;
-  t: (key: string) => string;
-}) {
-  const isSplit = value === 'split';
-
-  return (
-    <div className="mt-3 rounded-xl border border-border bg-background p-3">
-      <div>
-        <div className="text-sm font-medium text-foreground">{t(`mail_layout.${value}`)}</div>
-        <div className="mt-1 text-xs text-muted-foreground">{t(`mail_layout.${value}_description`)}</div>
-      </div>
-
-      <div className="mt-3 overflow-hidden rounded-lg border border-border bg-muted/20">
-        <div className="flex h-28">
-          <div className="w-11 border-r border-border bg-muted/40" />
-
-          {isSplit ? (
-            <>
-              <div className="w-28 border-r border-border bg-background">
-                {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
-                  <div
-                    key={row.subject}
-                    className={cn(
-                      'border-b border-border px-2 py-1.5 text-[10px] last:border-b-0',
-                      row.selected && 'bg-primary/10'
-                    )}
-                  >
-                    <div className="truncate font-medium text-foreground">{row.sender}</div>
-                    <div className="truncate text-muted-foreground">{row.subject}</div>
-                  </div>
-                ))}
-              </div>
-              <div className="flex-1 bg-background px-3 py-2">
-                <div className="h-2.5 w-20 rounded bg-foreground/10" />
-                <div className="mt-2 h-2 w-full rounded bg-foreground/10" />
-                <div className="mt-1.5 h-2 w-5/6 rounded bg-foreground/10" />
-                <div className="mt-1.5 h-2 w-2/3 rounded bg-foreground/10" />
-              </div>
-            </>
-          ) : (
-            <div className="flex-1 bg-background px-2 py-2">
-              <div className="space-y-1.5">
-                {MAIL_LAYOUT_PREVIEW_ROWS.map((row) => (
-                  <div
-                    key={row.subject}
-                    className={cn(
-                      'rounded-md px-2 py-1 text-[10px]',
-                      row.selected ? 'bg-primary/10' : 'bg-muted/20'
-                    )}
-                  >
-                    <div className="truncate text-foreground">
-                      <span className="font-medium">{row.sender}</span>
-                      <span className="mx-1.5 text-muted-foreground">{row.subject}</span>
-                      <span className="text-muted-foreground/80">{row.preview}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function EmailSettings() {
+export function ReadingSettings() {
  const t = useTranslations('settings.email_behavior');
-  const { appName } = useConfig();
-  const [showTrustedModal, setShowTrustedModal] = useState(false);
  const [isReorganizing, setIsReorganizing] = useState(false);
  const [reorganizeResult, setReorganizeResult] = useState<string | null>(null);
-  const [defaultMailStatus, setDefaultMailStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();

-  const handleSetDefaultMailProgram = useCallback(() => {
-    try {
-      if (typeof navigator !== 'undefined' && navigator.registerProtocolHandler) {
-        navigator.registerProtocolHandler('mailto', `${window.location.origin}/compose?mailto=%s`);
-        setDefaultMailStatus('success');
-      }
-    } catch {
-      setDefaultMailStatus('error');
-    }
-  }, []);
-
-  const [newKeyword, setNewKeyword] = useState('');
-
  const {
    markAsReadDelay,
    deleteAction,
@@ -120,33 +25,18 @@ export function EmailSettings() {
    showPreview,
    mailLayout,
    disableThreading,
-    autoSelectReplyIdentity,
    plainTextMode,
    emailsPerPage,
-    externalContentPolicy,
    mailAttachmentAction,
    attachmentPosition,
-    emailAlwaysLightMode,
    archiveMode,
    hoverActions,
    hoverActionsMode,
    hoverActionsCorner,
-    trustedSenders,
-    trustedSendersAddressBook,
-    attachmentReminderEnabled,
-    attachmentReminderKeywords,
    hideInlineImageAttachments,
+    attachmentImagePreviewsEnabled,
    updateSetting,
  } = useSettingsStore();
-  const { trustedSenderEmails } = useContactStore();
-
-  // Get count label for trusted senders button
-  const getTrustedSendersCount = () => {
-    const count = trustedSendersAddressBook ? trustedSenderEmails.length : trustedSenders.length;
-    if (count === 0) return t('trusted_senders.count_zero');
-    if (count === 1) return t('trusted_senders.count_one');
-    return t('trusted_senders.count_other', { count });
-  };

  const isFocusedLayout = mailLayout === 'focus';

@@ -163,8 +53,6 @@ export function EmailSettings() {

    try {
      const archiveId = archiveMailbox.originalId || archiveMailbox.id;
-
-      // Fetch all emails in the root archive mailbox
      const emails = await client.getEmailsInMailbox(archiveId);
      let movedCount = 0;

@@ -173,10 +61,8 @@ export function EmailSettings() {
        const year = emailDate.getFullYear().toString();
        const month = (emailDate.getMonth() + 1).toString().padStart(2, '0');

-        // Re-read mailboxes from store each iteration in case new ones were created
        let currentMailboxes = useEmailStore.getState().mailboxes;

-        // Find or create year subfolder
        let yearMailbox = currentMailboxes.find(
          m => m.name === year && m.parentId === archiveId
        );
@@ -190,7 +76,6 @@ export function EmailSettings() {
          await client.moveEmail(email.id, yearMailbox.id);
          movedCount++;
        } else {
-          // month mode
          const yearId = yearMailbox.originalId || yearMailbox.id;
          let monthMailbox = currentMailboxes.find(
            m => m.name === month && m.parentId === yearId
@@ -215,7 +100,6 @@ export function EmailSettings() {

  return (
    <SettingsSection title={t('title')} description={t('description')}>
-      {/* Mark as Read */}
      {!isSettingHidden('markAsReadDelay') && (
      <SettingItem label={t('mark_read.label')} description={t('mark_read.description')} locked={isSettingLocked('markAsReadDelay')}>
        <Select
@@ -231,7 +115,6 @@ export function EmailSettings() {
      </SettingItem>
      )}

-      {/* Delete Action */}
      {!isSettingHidden('deleteAction') && (
      <SettingItem label={t('delete_action.label')} description={t('delete_action.description')} locked={isSettingLocked('deleteAction')}>
        <div className="flex flex-col gap-2">
@@ -253,7 +136,6 @@ export function EmailSettings() {
      </SettingItem>
      )}

-      {/* Archive Mode */}
      <SettingItem label={t('archive_mode.label')} description={t('archive_mode.description')}>
        <div className="flex flex-col gap-2">
          <Select
@@ -287,7 +169,6 @@ export function EmailSettings() {
        </div>
      </SettingItem>

-      {/* Permanently Delete Junk */}
      <SettingItem label={t('permanently_delete_junk.label')} description={t('permanently_delete_junk.description')}>
        <ToggleSwitch
          checked={permanentlyDeleteJunk}
@@ -295,23 +176,6 @@ export function EmailSettings() {
        />
      </SettingItem>

-      {!isSettingHidden('mailLayout') && (
-      <SettingItem label={t('mail_layout.label')} description={t('mail_layout.description')} locked={isSettingLocked('mailLayout')}>
-        <div className="w-[22rem] max-w-full">
-          <RadioGroup
-            value={mailLayout}
-            onChange={(value) => updateSetting('mailLayout', value as MailLayout)}
-            options={[
-              { value: 'split', label: t('mail_layout.split') },
-              { value: 'focus', label: t('mail_layout.focus') },
-            ]}
-          />
-          <MailLayoutPreview value={mailLayout} t={t} />
-        </div>
-      </SettingItem>
-      )}
-
-      {/* Show Preview */}
      {!isSettingHidden('showPreview') && (
      <SettingItem
        label={t('show_preview.label')}
@@ -322,7 +186,6 @@ export function EmailSettings() {
      </SettingItem>
      )}

-      {/* Disable Thread Grouping */}
      <SettingItem label={t('disable_threading.label')} description={t('disable_threading.description')}>
        <ToggleSwitch
          checked={disableThreading}
@@ -330,7 +193,6 @@ export function EmailSettings() {
        />
      </SettingItem>

-      {/* Plain Text Mode */}
      <SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
        <ToggleSwitch
          checked={plainTextMode}
@@ -338,71 +200,6 @@ export function EmailSettings() {
        />
      </SettingItem>

-      <SettingItem label={t('auto_select_reply_identity.label')} description={t('auto_select_reply_identity.description')}>
-        <ToggleSwitch
-          checked={autoSelectReplyIdentity}
-          onChange={(checked) => updateSetting('autoSelectReplyIdentity', checked)}
-        />
-      </SettingItem>
-
-      {/* Attachment Reminder */}
-      <SettingItem label={t('attachment_reminder.label')} description={t('attachment_reminder.description')}>
-        <ToggleSwitch
-          checked={attachmentReminderEnabled}
-          onChange={(checked) => updateSetting('attachmentReminderEnabled', checked)}
-        />
-      </SettingItem>
-      {attachmentReminderEnabled && (
-        <div className="py-3 border-b border-border space-y-2">
-          <div>
-            <label className="text-sm font-medium text-foreground">{t('attachment_reminder.keywords_label')}</label>
-            <p className="text-xs text-muted-foreground mt-1">{t('attachment_reminder.keywords_description')}</p>
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {attachmentReminderKeywords.map((kw) => (
-              <span key={kw} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-muted text-foreground">
-                {kw}
-                <button
-                  type="button"
-                  aria-label={t('attachment_reminder.remove')}
-                  onClick={() => updateSetting('attachmentReminderKeywords', attachmentReminderKeywords.filter(k => k !== kw))}
-                  className="text-muted-foreground hover:text-foreground"
-                >
-                  <X className="w-3 h-3" />
-                </button>
-              </span>
-            ))}
-          </div>
-          <form
-            className="flex gap-2"
-            onSubmit={(e) => {
-              e.preventDefault();
-              const trimmed = newKeyword.trim().toLowerCase();
-              if (trimmed && !attachmentReminderKeywords.includes(trimmed)) {
-                updateSetting('attachmentReminderKeywords', [...attachmentReminderKeywords, trimmed]);
-              }
-              setNewKeyword('');
-            }}
-          >
-            <input
-              type="text"
-              value={newKeyword}
-              onChange={(e) => setNewKeyword(e.target.value)}
-              placeholder={t('attachment_reminder.add_placeholder')}
-              className="flex-1 min-w-0 px-2 py-1 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
-            />
-            <button
-              type="submit"
-              disabled={!newKeyword.trim()}
-              className="px-3 py-1 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {t('attachment_reminder.add')}
-            </button>
-          </form>
-        </div>
-      )}
-
-      {/* Hide inline images from attachment list */}
      <SettingItem label={t('hide_inline_image_attachments.label')} description={t('hide_inline_image_attachments.description')}>
        <ToggleSwitch
          checked={hideInlineImageAttachments}
@@ -410,7 +207,13 @@ export function EmailSettings() {
        />
      </SettingItem>

-      {/* Quick Hover Actions */}
+      <SettingItem label={t('attachment_image_previews.label')} description={t('attachment_image_previews.description')}>
+        <ToggleSwitch
+          checked={attachmentImagePreviewsEnabled}
+          onChange={(checked) => updateSetting('attachmentImagePreviewsEnabled', checked)}
+        />
+      </SettingItem>
+
      {isFeatureEnabled('hoverActionsConfigEnabled') && (
      <div className="py-3 border-b border-border space-y-3">
        <div>
@@ -443,7 +246,6 @@ export function EmailSettings() {
          })}
        </div>

-        {/* Hover Actions Display Mode */}
        <div className="pt-2 space-y-2">
          <label className="text-xs font-medium text-foreground">{t('hover_actions.mode_label')}</label>
          <div className="flex gap-2">
@@ -465,7 +267,6 @@ export function EmailSettings() {
          </div>
        </div>

-        {/* Corner Selection (only when floating) */}
        {hoverActionsMode === 'floating' && (
          <div className="pt-1 space-y-2">
            <label className="text-xs font-medium text-foreground">{t('hover_actions.corner_label')}</label>
@@ -513,7 +314,6 @@ export function EmailSettings() {
        />
      </SettingItem>

-      {/* Emails Per Page */}
      {!isSettingHidden('emailsPerPage') && (
      <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')} locked={isSettingLocked('emailsPerPage')}>
        <Select
@@ -528,75 +328,6 @@ export function EmailSettings() {
        />
      </SettingItem>
      )}
-
-      {/* Always Light Mode for Emails */}
-      <SettingItem label={t('always_light_mode.label')} description={t('always_light_mode.description')}>
-        <ToggleSwitch
-          checked={emailAlwaysLightMode}
-          onChange={(checked) => updateSetting('emailAlwaysLightMode', checked)}
-        />
-      </SettingItem>
-
-      {/* External Content */}
-      {!isSettingHidden('externalContentPolicy') && (
-      <SettingItem label={t('external_content.label')} description={t('external_content.description')} locked={isSettingLocked('externalContentPolicy')}>
-        <Select
-          value={externalContentPolicy}
-          onChange={(value) =>
-            updateSetting('externalContentPolicy', value as 'ask' | 'block' | 'allow')
-          }
-          options={[
-            { value: 'ask', label: t('external_content.ask') },
-            { value: 'block', label: t('external_content.block') },
-            { value: 'allow', label: t('external_content.allow') },
-          ]}
-        />
-      </SettingItem>
-      )}
-
-      {/* Default Mail Program */}
-      <SettingItem label={t('default_mail_program.label')} description={t('default_mail_program.description', { appName: appName || 'Bulwark' })}>
-        <div className="flex flex-col items-end gap-1">
-          <button
-            onClick={handleSetDefaultMailProgram}
-            className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
-          >
-            <Mail className="w-4 h-4" />
-            <span className="text-sm text-foreground">{t('default_mail_program.button')}</span>
-          </button>
-          {defaultMailStatus === 'success' && (
-            <p className="text-xs text-green-600 dark:text-green-400">{t('default_mail_program.success')}</p>
-          )}
-          {defaultMailStatus === 'error' && (
-            <p className="text-xs text-destructive">{t('default_mail_program.error')}</p>
-          )}
-        </div>
-      </SettingItem>
-
-      {/* Trusted Senders */}
-      <SettingItem label={t('trusted_senders.label')} description={t('trusted_senders.description')}>
-        <button
-          onClick={() => setShowTrustedModal(true)}
-          className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
-        >
-          <span className="text-sm text-foreground">{getTrustedSendersCount()}</span>
-          <ChevronRight className="w-4 h-4 text-muted-foreground" />
-        </button>
-      </SettingItem>
-
-      {/* Trusted Senders - address book storage */}
-      <SettingItem label={t('trusted_senders.use_address_book_label')} description={t('trusted_senders.use_address_book_description')}>
-        <ToggleSwitch
-          checked={trustedSendersAddressBook}
-          onChange={(checked) => updateSetting('trustedSendersAddressBook', checked)}
-        />
-      </SettingItem>
-
-      {/* Trusted Senders Modal */}
-      <TrustedSendersModal
-        isOpen={showTrustedModal}
-        onClose={() => setShowTrustedModal(false)}
-      />
    </SettingsSection>
  );
 }
@@ -44,8 +44,8 @@ interface SettingItemProps {

 export function SettingItem({ label, description, children, locked }: SettingItemProps) {
  return (
-    <div className={cn("flex items-start justify-between py-3 border-b border-border last:border-0", locked && "opacity-60")}>
-      <div className="flex-1 pr-4">
+    <div className={cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4 py-3 border-b border-border last:border-0", locked && "opacity-60")}>
+      <div className="flex-1 min-w-0 sm:pr-4">
        <div className="flex items-center gap-1.5">
          <label className="text-sm font-medium text-foreground">{label}</label>
          {locked && <Lock className="w-3 h-3 text-muted-foreground" aria-label="Managed by administrator" />}
@@ -0,0 +1,350 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { X, Loader2, UserPlus, Trash2, Users, ChevronDown } from "lucide-react";
+import type { IJMAPClient } from "@/lib/jmap/client-interface";
+import type { Principal, CalendarRights, AddressBookRights } from "@/lib/jmap/types";
+import { toast } from "@/stores/toast-store";
+
+type ShareKind = "calendar" | "addressBook";
+type AnyRights = CalendarRights | AddressBookRights;
+
+type RolePreset = "freeBusy" | "read" | "readWrite" | "manager" | "custom";
+
+const CALENDAR_PRESETS: Record<Exclude<RolePreset, "custom">, CalendarRights> = {
+  freeBusy: {
+    mayReadFreeBusy: true, mayReadItems: false, mayWriteAll: false, mayWriteOwn: false,
+    mayUpdatePrivate: false, mayRSVP: false, mayShare: false, mayDelete: false,
+  },
+  read: {
+    mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: false, mayWriteOwn: false,
+    mayUpdatePrivate: false, mayRSVP: false, mayShare: false, mayDelete: false,
+  },
+  readWrite: {
+    mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true,
+    mayUpdatePrivate: true, mayRSVP: true, mayShare: false, mayDelete: false,
+  },
+  manager: {
+    mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true,
+    mayUpdatePrivate: true, mayRSVP: true, mayShare: true, mayDelete: true,
+  },
+};
+
+const ADDRESS_BOOK_PRESETS: Record<Exclude<RolePreset, "custom" | "freeBusy">, AddressBookRights> = {
+  read: { mayRead: true, mayWrite: false, mayShare: false, mayDelete: false },
+  readWrite: { mayRead: true, mayWrite: true, mayShare: false, mayDelete: false },
+  manager: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true },
+};
+
+function detectCalendarPreset(r: CalendarRights): RolePreset {
+  for (const [name, preset] of Object.entries(CALENDAR_PRESETS) as [Exclude<RolePreset, "custom">, CalendarRights][]) {
+    if ((Object.keys(preset) as (keyof CalendarRights)[]).every((k) => preset[k] === r[k])) {
+      return name;
+    }
+  }
+  return "custom";
+}
+
+function detectAddressBookPreset(r: AddressBookRights): RolePreset {
+  for (const [name, preset] of Object.entries(ADDRESS_BOOK_PRESETS) as [Exclude<RolePreset, "custom" | "freeBusy">, AddressBookRights][]) {
+    const keys = Object.keys(preset) as (keyof AddressBookRights)[];
+    if (keys.every((k) => preset[k] === (r[k] ?? false))) {
+      return name;
+    }
+  }
+  return "custom";
+}
+
+interface ShareCollectionDialogProps {
+  client: IJMAPClient;
+  kind: ShareKind;
+  collectionName: string;
+  shareWith: Record<string, AnyRights> | null | undefined;
+  ownAccountId: string;
+  onShare: (principalId: string, rights: AnyRights | null) => Promise<void>;
+  onClose: () => void;
+}
+
+export function ShareCollectionDialog({
+  client,
+  kind,
+  collectionName,
+  shareWith,
+  ownAccountId,
+  onShare,
+  onClose,
+}: ShareCollectionDialogProps) {
+  const t = useTranslations("sharing");
+  const tCommon = useTranslations("common");
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [allPrincipals, setAllPrincipals] = useState<Principal[]>([]);
+  const [loadingPrincipals, setLoadingPrincipals] = useState(true);
+  const [search, setSearch] = useState("");
+  const [savingId, setSavingId] = useState<string | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+
+  // Load principals on mount
+  useEffect(() => {
+    let cancelled = false;
+    setLoadingPrincipals(true);
+    client.getPrincipals().then((list) => {
+      if (cancelled) return;
+      setAllPrincipals(list);
+      setLoadingPrincipals(false);
+    }).catch(() => {
+      if (!cancelled) setLoadingPrincipals(false);
+    });
+    return () => { cancelled = true; };
+  }, [client]);
+
+  // Map of every fetched principal by id, used for name/description lookups in
+  // the shared list. Must include principals that already have a share so the
+  // list shows their name rather than the raw id.
+  const allPrincipalsById = useMemo(() => {
+    const map = new Map<string, Principal>();
+    for (const p of allPrincipals) map.set(p.id, p);
+    return map;
+  }, [allPrincipals]);
+
+  // Principals available to add: exclude self and anyone already shared with.
+  const principals = useMemo(() => {
+    const existing = new Set(Object.keys(shareWith || {}));
+    return allPrincipals.filter((p) => p.id !== ownAccountId && !existing.has(p.id));
+  }, [allPrincipals, ownAccountId, shareWith]);
+
+  // Close on Escape, focus trap, click outside
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const handleSetRights = async (principalId: string, preset: RolePreset) => {
+    if (preset === "custom") return; // custom is read-only here
+    const rights = kind === "calendar"
+      ? CALENDAR_PRESETS[preset as keyof typeof CALENDAR_PRESETS]
+      : ADDRESS_BOOK_PRESETS[preset as keyof typeof ADDRESS_BOOK_PRESETS];
+    if (!rights) return;
+    setSavingId(principalId);
+    try {
+      await onShare(principalId, rights);
+      toast.success(t("share_updated"));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("share_failed"));
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  const handleRemove = async (principalId: string) => {
+    setSavingId(principalId);
+    try {
+      await onShare(principalId, null);
+      toast.success(t("share_removed"));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("share_failed"));
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  const handleAdd = async (principal: Principal) => {
+    const defaultPreset: RolePreset = "read";
+    const rights = kind === "calendar"
+      ? CALENDAR_PRESETS[defaultPreset]
+      : ADDRESS_BOOK_PRESETS[defaultPreset];
+    setSavingId(principal.id);
+    try {
+      await onShare(principal.id, rights);
+      setShowAdd(false);
+      setSearch("");
+      toast.success(t("share_added"));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("share_failed"));
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  const filteredPrincipals = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return principals;
+    return principals.filter((p) =>
+      p.name.toLowerCase().includes(q) ||
+      p.email?.toLowerCase().includes(q) ||
+      p.description?.toLowerCase().includes(q)
+    );
+  }, [principals, search]);
+
+  const sharedEntries = useMemo(() => {
+    return Object.entries(shareWith || {}) as [string, AnyRights][];
+  }, [shareWith]);
+
+  const presetOptions = kind === "calendar"
+    ? ["freeBusy", "read", "readWrite", "manager"] as const
+    : ["read", "readWrite", "manager"] as const;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-[1px]" onClick={onClose} aria-hidden="true" />
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t("title", { name: collectionName })}
+        className="relative bg-background border border-border rounded-lg shadow-xl w-full max-w-lg mx-4 animate-in zoom-in-95 duration-200 max-h-[85vh] flex flex-col"
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Users className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold">{t("title", { name: collectionName })}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
+            aria-label={tCommon("close")}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-6 py-4 space-y-4 overflow-y-auto">
+          <p className="text-sm text-muted-foreground">{t("description")}</p>
+
+          {sharedEntries.length === 0 && !showAdd && (
+            <div className="text-sm text-muted-foreground italic py-4 text-center">
+              {t("no_shares")}
+            </div>
+          )}
+
+          {sharedEntries.length > 0 && (
+            <ul className="divide-y divide-border rounded-md border border-border overflow-hidden">
+              {sharedEntries.map(([principalId, rights]) => {
+                const principal = allPrincipalsById.get(principalId);
+                const preset = kind === "calendar"
+                  ? detectCalendarPreset(rights as CalendarRights)
+                  : detectAddressBookPreset(rights as AddressBookRights);
+                return (
+                  <li key={principalId} className="flex items-center gap-3 px-3 py-2.5">
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium truncate">
+                        {principal?.name || principal?.email || principalId}
+                      </div>
+                      {principal?.description && (
+                        <div className="text-xs text-muted-foreground truncate">
+                          {principal.description}
+                        </div>
+                      )}
+                    </div>
+                    <div className="relative">
+                      <select
+                        value={preset}
+                        onChange={(e) => handleSetRights(principalId, e.target.value as RolePreset)}
+                        disabled={savingId === principalId}
+                        className="appearance-none rounded-md border border-input bg-background pl-3 pr-8 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                      >
+                        {presetOptions.map((p) => (
+                          <option key={p} value={p}>{t(`preset.${p}`)}</option>
+                        ))}
+                        {preset === "custom" && (
+                          <option value="custom">{t("preset.custom")}</option>
+                        )}
+                      </select>
+                      <ChevronDown className="w-3 h-3 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground" />
+                    </div>
+                    <button
+                      onClick={() => handleRemove(principalId)}
+                      disabled={savingId === principalId}
+                      className="p-1.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors disabled:opacity-50"
+                      aria-label={t("remove")}
+                      title={t("remove")}
+                    >
+                      {savingId === principalId
+                        ? <Loader2 className="w-4 h-4 animate-spin" />
+                        : <Trash2 className="w-4 h-4" />}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          {!showAdd && (
+            <Button
+              variant="outline"
+              onClick={() => setShowAdd(true)}
+              className="w-full"
+            >
+              <UserPlus className="w-4 h-4 mr-2" />
+              {t("add_person")}
+            </Button>
+          )}
+
+          {showAdd && (
+            <div className="space-y-2 border border-border rounded-md p-3">
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={t("search_placeholder")}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                autoFocus
+              />
+              <div className="max-h-48 overflow-y-auto -mx-1">
+                {loadingPrincipals && (
+                  <div className="flex items-center justify-center py-4 text-muted-foreground">
+                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                    {t("loading_principals")}
+                  </div>
+                )}
+                {!loadingPrincipals && filteredPrincipals.length === 0 && (
+                  <div className="text-xs text-muted-foreground text-center py-3">
+                    {search.trim() ? t("no_match") : t("no_principals")}
+                  </div>
+                )}
+                {!loadingPrincipals && filteredPrincipals.map((p) => (
+                  <button
+                    key={p.id}
+                    onClick={() => handleAdd(p)}
+                    disabled={savingId === p.id}
+                    className="w-full text-left px-3 py-2 rounded-md hover:bg-muted disabled:opacity-50 transition-colors"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-medium truncate flex items-center gap-2">
+                          {p.name}
+                          {p.type === "group" && (
+                            <span className="text-[10px] uppercase font-normal text-muted-foreground bg-muted rounded px-1 py-0.5">
+                              {t("group")}
+                            </span>
+                          )}
+                        </div>
+                        {p.email && p.email !== p.name && (
+                          <div className="text-xs text-muted-foreground truncate">{p.email}</div>
+                        )}
+                      </div>
+                      {savingId === p.id && <Loader2 className="w-4 h-4 animate-spin" />}
+                    </div>
+                  </button>
+                ))}
+              </div>
+              <div className="flex justify-end pt-1">
+                <Button variant="ghost" size="sm" onClick={() => { setShowAdd(false); setSearch(""); }}>
+                  {tCommon("cancel")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+          <Button onClick={onClose}>{tCommon("close")}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,7 +1,7 @@
 "use client";

 import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";
-import { useRouter } from "@/i18n/navigation";
+import { useRouter, usePathname } from "@/i18n/navigation";
 import { useAuthStore } from "@/stores/auth-store";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useWebDAVStore } from "@/stores/webdav-store";
@@ -34,6 +34,7 @@ export function useTour() {

 export function TourProvider({ children }: { children: ReactNode }) {
  const router = useRouter();
+  const pathname = usePathname();
  const { isDemoMode } = useAuthStore();
  const { supportsCalendar } = useCalendarStore();
  const { supportsWebDAV } = useWebDAVStore();
@@ -63,9 +64,16 @@ export function TourProvider({ children }: { children: ReactNode }) {
    // If the resume step is beyond the current steps, start from 0
    if (resumeStep >= steps.length) resumeStep = 0;

+    // Most steps live on the mailbox — navigate there (or to the step's specific page)
+    // so we don't start the tour on a page where the targets don't exist.
+    const targetPage = steps[resumeStep]?.page ?? "/";
+    if (pathname !== targetPage) {
+      router.push(targetPage);
+    }
+
    setCurrentStep(resumeStep);
    setIsActive(true);
-  }, [steps.length]);
+  }, [steps, pathname, router]);

  const stopTour = useCallback(() => {
    setIsActive(false);
@@ -90,14 +98,17 @@ export function TourProvider({ children }: { children: ReactNode }) {
    }
    const next = currentStep + 1;
    const nextStepDef = steps[next];
+    const currentStepDef = steps[currentStep];
    setCurrentStep(next);
    try {
      localStorage.setItem(TOUR_CURRENT_STEP_KEY, String(next));
    } catch { /* */ }

-    // Navigate if the next step requires a different page
-    if (nextStepDef?.page) {
-      router.push(nextStepDef.page);
+    // Navigate when the next step is on a different page (treat "no page" as the mailbox)
+    const nextPage = nextStepDef?.page ?? "/";
+    const currentPage = currentStepDef?.page ?? "/";
+    if (nextPage !== currentPage) {
+      router.push(nextPage);
    }
  }, [currentStep, steps, completeTour, router]);

@@ -140,9 +140,11 @@ interface AvatarProps {
  contactPhotoUri?: string;
  size?: "sm" | "md" | "lg";
  className?: string;
+  /** When true, suppress all image sources (favicons, plugin avatars, profile pics, contact photos) and render initials only. */
+  disableImages?: boolean;
 }

-export function Avatar({ name, email, contactPhotoUri, size = "md", className }: AvatarProps) {
+export function Avatar({ name, email, contactPhotoUri, size = "md", className, disableImages = false }: AvatarProps) {
  const [imgError, setImgError] = useState(false);
  const [pluginAvatarUrl, setPluginAvatarUrl] = useState<string | null>(null);
  const [pluginAvatarFailed, setPluginAvatarFailed] = useState(false);
@@ -222,9 +224,11 @@ export function Avatar({ name, email, contactPhotoUri, size = "md", className }:
  // Priority: contact photo > plugin avatar (e.g. Gravatar) > custom avatar > profile picture > company favicon > initials
  const customAvatar = devMode && email ? CUSTOM_AVATARS[email.toLowerCase()] : null;
  const pluginAvatar = pluginAvatarFailed ? null : pluginAvatarUrl;
-  const imgSrc = !imgError && !domainFailed
-    ? resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || (showFavicon ? `/api/favicon?domain=${encodeURIComponent(faviconDomain!)}` : null)
-    : (resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || null);
+  const imgSrc = disableImages
+    ? null
+    : !imgError && !domainFailed
+      ? resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || (showFavicon ? `/api/favicon?domain=${encodeURIComponent(faviconDomain!)}` : null)
+      : (resolvedContactPhoto || pluginAvatar || customAvatar || profilePic || null);

  const handleImgError = useCallback(() => {
    // If the plugin avatar just failed, mark it and fall through to the next source
@@ -1,6 +1,6 @@
 "use client";

-import { forwardRef, useState, useRef, useEffect } from "react";
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 import { ChevronRight } from "lucide-react";
@@ -17,26 +17,72 @@ interface ContextMenuProps {
  children: React.ReactNode;
 }

+const VIEWPORT_MARGIN = 10;
+
 export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
  ({ isOpen, position, onClose: _onClose, children }, ref) => {
    const [mounted, setMounted] = useState(false);
+    const [adjustedPosition, setAdjustedPosition] = useState<Position | null>(null);
+    const localRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
      setMounted(true);
    }, []);

+    // Measure the rendered menu and clamp it inside the viewport before the
+    // browser paints. We hide the element until this runs so the user never
+    // sees the menu jump from an unclamped position to a clamped one.
+    useLayoutEffect(() => {
+      if (!isOpen) {
+        setAdjustedPosition(null);
+        return;
+      }
+      const node = localRef.current;
+      if (!node) return;
+
+      const rect = node.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      let x = position.x;
+      let y = position.y;
+
+      if (x + rect.width > vw - VIEWPORT_MARGIN) {
+        x = vw - rect.width - VIEWPORT_MARGIN;
+      }
+      if (y + rect.height > vh - VIEWPORT_MARGIN) {
+        y = vh - rect.height - VIEWPORT_MARGIN;
+      }
+      x = Math.max(VIEWPORT_MARGIN, x);
+      y = Math.max(VIEWPORT_MARGIN, y);
+
+      setAdjustedPosition({ x, y });
+    }, [isOpen, position.x, position.y]);
+
+    const setRefs = (node: HTMLDivElement | null) => {
+      localRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
    if (!mounted || !isOpen) return null;

+    const renderPosition = adjustedPosition ?? position;
+    const isPositioned = adjustedPosition !== null;
+
    return createPortal(
      <div
-        ref={ref}
+        ref={setRefs}
        className={cn(
-          "fixed z-50 min-w-[200px] bg-background rounded-md shadow-lg border border-border",
-          "animate-in fade-in-0 zoom-in-95 duration-100"
+          "fixed z-50 min-w-[200px] bg-background rounded-md shadow-lg border border-border"
        )}
        style={{
-          left: position.x,
-          top: position.y,
+          left: renderPosition.x,
+          top: renderPosition.y,
+          visibility: isPositioned ? "visible" : "hidden",
        }}
        role="menu"
        aria-orientation="vertical"
@@ -112,22 +158,41 @@ export function ContextMenuSubMenu({
  children,
 }: ContextMenuSubMenuProps) {
  const [isOpen, setIsOpen] = useState(false);
-  const [subMenuPosition, setSubMenuPosition] = useState<"right" | "left">("right");
+  const [subMenuPos, setSubMenuPos] = useState<Position | null>(null);
  const itemRef = useRef<HTMLDivElement>(null);
  const subMenuRef = useRef<HTMLDivElement>(null);
  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  useEffect(() => {
-    if (isOpen && itemRef.current) {
-      const rect = itemRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-
-      if (rect.right + 200 > viewportWidth - 10) {
-        setSubMenuPosition("left");
-      } else {
-        setSubMenuPosition("right");
-      }
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setSubMenuPos(null);
+      return;
    }
+    const itemEl = itemRef.current;
+    const subEl = subMenuRef.current;
+    if (!itemEl || !subEl) return;
+
+    const itemRect = itemEl.getBoundingClientRect();
+    const subRect = subEl.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let left: number;
+    if (itemRect.right + subRect.width <= vw - VIEWPORT_MARGIN) {
+      left = itemRect.right;
+    } else if (itemRect.left - subRect.width >= VIEWPORT_MARGIN) {
+      left = itemRect.left - subRect.width;
+    } else {
+      left = Math.max(VIEWPORT_MARGIN, vw - subRect.width - VIEWPORT_MARGIN);
+    }
+
+    let top = itemRect.top;
+    if (top + subRect.height > vh - VIEWPORT_MARGIN) {
+      top = vh - subRect.height - VIEWPORT_MARGIN;
+    }
+    top = Math.max(VIEWPORT_MARGIN, top);
+
+    setSubMenuPos({ x: left, y: top });
  }, [isOpen]);

  useEffect(() => {
@@ -174,13 +239,17 @@ export function ContextMenuSubMenu({
        <div
          ref={subMenuRef}
          className={cn(
-            "absolute top-0 min-w-[180px] bg-background rounded-md shadow-lg border border-border",
-            "animate-in fade-in-0 zoom-in-95 duration-100",
-            subMenuPosition === "right" ? "left-full" : "right-full"
+            "fixed z-50 min-w-[180px] bg-background rounded-md shadow-lg border border-border",
+            "animate-in fade-in-0 zoom-in-95 duration-100"
          )}
+          style={{
+            left: subMenuPos?.x ?? 0,
+            top: subMenuPos?.y ?? 0,
+            visibility: subMenuPos ? "visible" : "hidden",
+          }}
          role="menu"
        >
-          <div className="py-1 max-h-[300px] overflow-y-auto">
+          <div className="py-1 max-h-[min(300px,calc(100vh-40px))] overflow-y-auto">
            {children}
          </div>
        </div>
@@ -45,9 +45,22 @@ export function FlagKR(props: FlagProps) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
      <rect width="3" height="2" fill="#fff" />
-      <circle cx="1.5" cy="1" r="0.55" fill="#CD2E3A" />
-      <path d="M1.5,1 a0.275,0.275 0 0,1 0,0.55 a0.275,0.275 0 0,0 0,-0.55" fill="#0047A0" />
-      <path d="M1.5,1 a0.275,0.275 0 0,0 0,-0.55 a0.275,0.275 0 0,1 0,0.55" fill="#0047A0" />
+      <path d="M1.5 0.5 a0.45 0.45 0 1 1 0 0.9 a0.45 0.45 0 1 0 0 -0.9" fill="#CD2E3A" />
+      <path d="M1.5 1.5 a0.45 0.45 0 1 1 0 -0.9 a0.45 0.45 0 1 0 0 0.9" fill="#0047A0" />
+      <circle cx="1.5" cy="0.8" r="0.225" fill="#0047A0" />
+      <circle cx="1.5" cy="1.2" r="0.225" fill="#CD2E3A" />
+      <g stroke="#000" strokeWidth="0.06" strokeLinecap="round">
+        <line x1="0.42" y1="0.35" x2="0.78" y2="0.35" />
+        <line x1="0.42" y1="0.46" x2="0.78" y2="0.46" />
+        <line x1="0.42" y1="0.57" x2="0.78" y2="0.57" />
+        <line x1="2.22" y1="0.35" x2="2.58" y2="0.35" />
+        <line x1="2.22" y1="0.57" x2="2.58" y2="0.57" />
+        <line x1="0.42" y1="1.43" x2="0.78" y2="1.43" />
+        <line x1="0.42" y1="1.65" x2="0.78" y2="1.65" />
+        <line x1="2.22" y1="1.43" x2="2.58" y2="1.43" />
+        <line x1="2.22" y1="1.54" x2="2.58" y2="1.54" />
+        <line x1="2.22" y1="1.65" x2="2.58" y2="1.65" />
+      </g>
    </svg>
  );
 }
@@ -139,6 +152,18 @@ export function FlagRU(props: FlagProps) {
  );
 }

+/** Turkey - Red with white crescent and star */
+export function FlagTR(props: FlagProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" width={W} height={H} className={flagClass} {...props}>
+      <rect width="30" height="20" fill="#E30A17" />
+      <circle cx="10" cy="10" r="6" fill="#fff" />
+      <circle cx="11.5" cy="10" r="5" fill="#E30A17" />
+      <polygon points="19.5,7.8 19.994,9.32 21.592,9.32 20.299,10.26 20.793,11.78 19.5,10.84 18.207,11.78 18.701,10.26 17.408,9.32 19.006,9.32" fill="#fff" />
+    </svg>
+  );
+}
+
 /** Ukraine – Blue, Yellow horizontal */
 export function FlagUA(props: FlagProps) {
  return (
@@ -179,6 +204,7 @@ export const flagComponents: Record<string, (props: FlagProps) => ReactElement>
  pl: FlagPL,
  pt: FlagBR,
  ru: FlagRU,
+  tr: FlagTR,
  uk: FlagUA,
  zh: FlagCN,
 };
@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils';
 import { flagComponents } from './flag-icons';

 const languages = [
+  { value: 'cs', label: 'Česky' },
  { value: 'en', label: 'English' },
  { value: 'fr', label: 'Français' },
  { value: 'ja', label: '日本語' },
@@ -20,6 +21,7 @@ const languages = [
  { value: 'pl', label: 'Polski' },
  { value: 'pt', label: 'Português' },
  { value: 'ru', label: 'Русский' },
+  { value: 'tr', label: 'Türkçe' },
  { value: 'uk', label: 'Українська' },
  { value: 'zh', label: '简体中文' },
 ];
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Linus Rath	d1c5dba7d7	chore: update version to 1.6.1	2026-05-04 12:34:53 +02:00
Linus Rath	8c50abe221	fix: synchronize mobile submenu view with browser history for better navigation	2026-05-04 12:31:51 +02:00
Linus Rath	07367a8a5d	fix: update email viewer styles to improve overflow handling	2026-05-04 12:27:44 +02:00
Linus Rath	1a50788c91	fix: ensure cookieSlot consistency during account updates in auth store	2026-05-04 12:09:58 +02:00
Linus Rath	0e06bfe273	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-05-04 11:25:49 +02:00
Linus Rath	f68e41d81a	fix: enhance sharing functionality by renaming state	2026-05-04 11:24:05 +02:00
MaxwellandLinus Rath	8b164c556e	fix: thread per-account cookie slot through OAuth flows The multi-account refresh-token cookie slot wiring was half-implemented: every account's refresh token ended up on slot 0, so "+ Add Account" silently clobbered the previous account's `jmap_rt` cookie. On page refresh, only the most-recently-added account had a working refresh token; the others bounced to login. Three coordinated changes: 1. `app/[locale]/login/page.tsx` (handleOAuthLogin): write the next-free cookie slot to `sessionStorage['oauth_cookie_slot']` before redirecting to the IdP. `loginWithOAuth` already reads this key but it was never written, so it always defaulted to 0. 2. `stores/auth-store.ts` (loginWithOAuth): distinguish "no value set" (`rawSlot === null`) from "value is 0". Previously `parseInt(getItem(...) \|\| '0')` collapsed both cases, making the `getNextCookieSlot()` fallback unreachable. 3. `stores/auth-store.ts` (loginWithServerSso) + `app/api/auth/sso/complete/route.ts`: pass the slot through the body of the POST and use it for `refreshTokenCookieName(slot)`. Same pattern as the existing `/api/auth/token POST` that already accepts a slot. The server defaults to 0 for back-compat with any caller that omits it. After the fix, signing in with multiple accounts produces distinct `jmap_rt`, `jmap_rt_1`, `jmap_rt_2`, ... cookies (matching the cookieSlot field in account-store) and all accounts survive a page refresh. Repro before the fix: - Sign in with one account, refresh — works. - Click "+ Add Account", sign in with a second account, refresh — second account vanishes from the dropdown; switching to the first account in the dropdown still shows the second account's identity in the From box.	2026-05-04 11:22:45 +02:00
Linus Rath	2e1f53c899	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-05-03 20:07:20 +02:00
Linus Rath	a6d2efaf74	feat: sanitize identity display name to prevent invalid From headers	2026-05-03 20:06:41 +02:00
Luis Felipe MarzagaoandLinus Rath	01cd9644ed	i18n: update mailbox context menu across 12 locales	2026-05-03 11:01:39 +02:00
Linus Rath	1521826d37	feat: add functionality to automatically add recipients to trusted senders when replying	2026-05-02 23:50:50 +02:00
Linus Rath	0d218d0d2a	fix: square the colored left marker on calendar events	2026-05-02 23:41:08 +02:00
Linus Rath	9777dd655c	feat: add share indicators for calendars and contacts, update JMAP capabilities #244	2026-05-02 23:29:21 +02:00
Linus Rath	f970fd1822	feat: add plugin hooks for compose, attachments, search, lifecycle, and routing	2026-05-02 21:27:56 +02:00
Linus Rath	5e096240b3	feat: refresh update status on every dev reload	2026-05-02 13:23:58 +02:00
Linus Rath	bc97a1ac10	feat: make update notice non-dismissible	2026-05-02 13:07:34 +02:00
Linus Rath	4594fb2572	revert: restore VERSION to correct value	2026-05-02 01:59:27 +02:00
Linus Rath	5319562c94	feat: add update-available detection	2026-05-02 01:58:30 +02:00
Linus Rath	599fa66822	fix: show git commit in About instead of "unknown"	2026-05-02 00:28:08 +02:00
Linus Rath	8041700668	chore: update version to 1.6.0	2026-05-01 22:02:57 +02:00
Linus Rath	bade68a8b8	i18n: add missing email viewer detail and authentication translations	2026-05-01 22:02:14 +02:00
Linus Rath	4be7176802	chore: update version to 1.6.0	2026-05-01 21:56:53 +02:00
Linus Rath	8813533958	fix: respect per-email dark mode toggle when always-light setting is on	2026-05-01 21:42:02 +02:00
Linus Rath	affa239d75	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-05-01 21:35:53 +02:00
Linus Rath	5d292fa43f	fix: scroll apps list in navigation rail to prevent overflow	2026-05-01 21:35:29 +02:00
Linus Rath	878df6bb49	refactor: enhance path rendering in mailbox context menu	2026-05-01 21:26:03 +02:00
Linus Rath	607a9584fd	refactor: implement path shortening for mailbox context menu	2026-05-01 21:25:31 +02:00
Linus Rath	b8e2bfd793	fix: show full path in mailbox context menu header	2026-05-01 21:15:47 +02:00
Linus Rath	4ad6d37877	fix: clamp context submenu inside viewport	2026-05-01 21:03:54 +02:00
Linus Rath	d7c29b7bec	refactor: rework mobile mail viewer toolbar	2026-05-01 21:00:34 +02:00
Luis Felipe MarzagaoandLinus Rath	b86bc541ab	i18n: add missing keys accross 14 locales	2026-05-01 20:37:51 +02:00
Luis Felipe MarzagaoandLinus Rath	8c74e01a40	fix: add useTranslations for "selected emails" and "cancel" on email list batch operations	2026-05-01 20:37:51 +02:00
Linus Rath	231a9017d2	refactor: make settings panel mobile friendly	2026-05-01 20:30:15 +02:00
Linus Rath	9a5bb78b18	refactor: make admin panel mobile friendly	2026-05-01 20:22:29 +02:00
Linus Rath	eecf16daa2	fix: stop silently destroying emails when trash mailbox isnt found #195	2026-05-01 20:01:13 +02:00
Vadim BelovandLinus Rath	210150a02e	Fix push preview JMAP query Resolve the Inbox mailbox id before running Email/query. The previous query passed a JMAP result reference object directly into the inMailbox filter, which can make the preview endpoint return 502 and cause push notifications to fall back to the generic “New mail” text.	2026-05-01 19:53:25 +02:00
Linus Rath	e50691d6c4	fix: navigate tour to mailbox when starting from another page	2026-05-01 18:30:51 +02:00
Linus Rath	089963b1b3	refactor: redesign expanded details panel	2026-05-01 18:22:06 +02:00
Linus Rath	4af952613a	fix: prevent context menu jump and animation on open	2026-05-01 17:43:07 +02:00
Linus Rath	0d9fa0285f	fix: prevent context menu from clipping below viewport	2026-05-01 17:28:40 +02:00
Linus Rath	683fe75864	i18n: translate SPF/DKIM/DMARC tooltips	2026-05-01 17:25:52 +02:00
Linus Rath	e9c9be84ad	fix: preserve list scroll position when tagging an email	2026-05-01 17:18:11 +02:00
Linus Rath	7822a363dd	fix: render below-header overflow popup outside clipped row	2026-05-01 17:10:17 +02:00
Linus Rath	1e535e96a2	feat: image attachment thumbnails and preview chips	2026-05-01 17:03:45 +02:00
Linus Rath	32135ddb95	fix: collapse below-header attachments to single row with overflow pill	2026-05-01 16:29:38 +02:00
Linus Rath	841513e510	feat: support subpath deployment with NEXT_PUBLIC_BASE_PATH environment variable	2026-05-01 14:57:49 +02:00
Linus RathandGitHub	5964b2e456	Update README	2026-05-01 10:06:49 +02:00
Linus Rath	6a8ad525f1	chore: update version to 1.5.4	2026-05-01 02:17:33 +02:00
Linus Rath	31d17098d6	feat: open mail from push notification clicks	2026-05-01 02:13:25 +02:00
Linus Rath	3f97e6ed8d	fix: scope email notifications to genuine inbox deliveries	2026-05-01 02:08:13 +02:00
Linus Rath	2dea33e698	feat: improve new email push notification logic for inbox	2026-05-01 01:57:57 +02:00
Linus Rath	123764f8b8	feat: improve new email notification logic for inbox	2026-05-01 01:55:24 +02:00
Linus Rath	ec0f355c13	feat: allow custom sub-addressing delimiter character #239	2026-05-01 01:48:39 +02:00
Linus Rath	c555973b6b	feat: configurable sub-addressing delimiter #239	2026-05-01 01:42:06 +02:00
Linus Rath	a8db02e881	i18n: add missing keys across 15 locales	2026-05-01 01:26:22 +02:00
AbdullahandLinus Rath	7dc5984359	feat(i18n): add Turkish localization	2026-05-01 01:16:30 +02:00
Linus Rath	1c3003421e	fix: extend timeout for PushVerification and clean up leftover subscriptions	2026-05-01 00:54:40 +02:00
Linus Rath	f3d9115ecd	feat: web push notifications for PWA #233	2026-05-01 00:26:48 +02:00
Linus Rath	4400a7abba	fix: evict unrecoverable basic-auth accounts on reload	2026-04-30 15:39:11 +02:00
Linus Rath	45a4db1c22	fix: pin JMAP auth verification to configured server URL #237	2026-04-30 15:34:14 +02:00
Linus Rath	65eef4b2b8	fix: persist htmlBody in drafts to preserve rich formatting #236	2026-04-30 15:24:09 +02:00
Linus Rath	25de7d996c	feat: add tables to composer #236	2026-04-30 15:16:51 +02:00
Luis Felipe MarzagaoandLinus Rath	c406fbb73e	fixup! fix: implement useTranslations for start date on event detail popover	2026-04-30 11:08:16 +02:00
Luis Felipe MarzagaoandLinus Rath	31024396e3	fixup! fix: implement useTranslations for start date on event modal	2026-04-30 11:08:16 +02:00
Luis Felipe MarzagaoandLinus Rath	f0967f90eb	fix: implement useTranslations for start date on event modal	2026-04-30 11:08:16 +02:00
Luis Felipe MarzagaoandLinus Rath	a4bb8e0c28	fix: implement useTranslations for start date on event detail popover	2026-04-30 11:08:16 +02:00
Linus Rath	7188abc9bc	fix: set In-Reply-To and References on replies #234	2026-04-30 01:25:04 +02:00
Linus Rath	4a91cd0c44	style: drop iframe border-radius	2026-04-29 20:26:40 +02:00
Linus Rath	6abf8a5dd8	fix: detect <style> tag for padding	2026-04-29 20:25:24 +02:00
Linus Rath	3667c842c6	fix: light-mode override to body content only	2026-04-29 20:17:59 +02:00
Linus Rath	b64721b43c	fix: pad bare HTML emails like plain-text mails	2026-04-29 20:09:00 +02:00
Linus Rath	6b5ca2cb89	fix: smooth out body load, prevent flicker	2026-04-29 20:03:58 +02:00
Linus Rath	0f6e4f995f	fix: prevent iframe flash on Load images or Trust sender	2026-04-29 18:29:48 +02:00
Linus Rath	0b6fdcabfb	fix: update connect-src to include http protocol in development mode	2026-04-29 13:55:38 +02:00
Linus Rath	fc49fe0687	chore: update version to 1.5.3	2026-04-28 18:43:09 +02:00
Linus Rath	419382d25d	feat: add contacts feature gate and update telemetry payload	2026-04-28 17:54:11 +02:00
Linus Rath	8935b81f12	chore: update version to 1.5.3	2026-04-28 17:34:06 +02:00
Linus Rath	ec581ce53e	feat: update Docker configuration	2026-04-28 17:27:47 +02:00
Linus Rath	81d8465a79	fix: block telemetry endpoint from pointing at internal hosts	2026-04-28 17:16:30 +02:00
Linus Rath	0f3b506604	feat: add extension preview page and API for detailed extension information	2026-04-28 15:55:23 +02:00
Linus Rath	1b84547211	feat: add Theme API v2 with token compiler, skin slot	2026-04-28 15:39:13 +02:00
Linus Rath	dafc8ace3c	feat: track unique logins	2026-04-28 08:19:46 +02:00
Linus Rath	2c419cc4fe	feat: add right-click context menu on empty calendar space	2026-04-28 01:56:15 +02:00
Linus Rath	90acf181f3	fix: harden plugin config, TOTP token exchange, and branding file serving	2026-04-28 01:44:37 +02:00
Linus Rath	54af07f2af	feat: add anonymous instance telemetry Adds a once-per-day heartbeat that lets the project see how many instances run Bulwark, on what platforms, with what features enabled, and roughly how many accounts they have. No email addresses, hostnames, IPs, or any end-user data are ever sent. - lib/telemetry: state file, payload builder, jittered scheduler, instance_id persistence at <data-dir>/.telemetry-id (delete to reset) - app/api/admin/telemetry: admin API for status / set-consent / set-endpoint / send-now (all audit-logged) - app/admin/telemetry: settings page with status, JSON payload preview, endpoint editor, send-now button, link to the privacy page - instrumentation.node.ts: starts the scheduler on boot Default state is enabled. The first heartbeat fires 1 hour after boot so an admin who installs and immediately disables produces zero pings. Disable via the settings UI, BULWARK_TELEMETRY=off (or BULWARK_TELEMETRY_DISABLED=1), or by clearing the endpoint. Account counts are bucketed (1, 2-5, 6-10, 11-50, 51-200, 201+) so a small instance can't be re-identified by exact size. The /.telemetry-id file can be deleted to mint a fresh instance_id. Receiving collector is open source at bulwarkmail/dashboard. Self-host your own and point at it via BULWARK_TELEMETRY_URL. Full schema, retention (90d raw → aggregates), and lawful basis are documented at bulwarkmail.org/docs/legal/privacy/telemetry.	2026-04-28 01:28:41 +02:00
Linus Rath	68f1fabc4b	fix: batch shortcuts act on multi-selection when present #228	2026-04-28 00:04:29 +02:00
Linus Rath	27451807db	chore: update version to 1.5.2	2026-04-27 22:45:23 +02:00
Linus Rath	55099bdcbb	fix: disable Stalwart admin check when custom JMAP endpoints allowed	2026-04-27 22:41:51 +02:00
Linus Rath	71eb720065	chore: update version to 1.5.2	2026-04-27 22:30:32 +02:00
Linus Rath	8abb0c8717	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-04-27 22:24:59 +02:00
Linus Rath	3043639d2d	fix: validate URLs before outbound fetch	2026-04-27 22:23:39 +02:00
Linus Rath	e9b3eacbb7	fix: prevent drag creation on touch events in useTimeGridInteractions	2026-04-27 13:37:34 +02:00
Linus Rath	f37e55e285	Merge branch 'main' of https://github.com/bulwarkmail/webmail	2026-04-27 10:36:22 +02:00
Luis Felipe Marzagao Linus Rath Copilot	c0af2dbdd1	i18n: Fix word 'ficheiro' and its variants. Co-authored-by: Copilot <copilot@github.com>	2026-04-27 10:17:32 +02:00
Luis Felipe MarzagaoandLinus Rath	ae517732f7	i18n: Fix word 'contactos' and its variants.	2026-04-27 10:17:32 +02:00
Linus Rath	3e1de10213	feat: add JMAP sharing for calendars and address books	2026-04-26 20:10:04 +02:00
Roman VanicekandLinus Rath	511740bb6d	Additional Czech translations for recent changes.	2026-04-26 15:48:43 +02:00
Roman VanicekandLinus Rath	4a24d2a11d	feat: add Czech language support	2026-04-26 15:48:43 +02:00
Linus Rath	aadf56c27b	fix: emit RFC 9553 name kinds and decode QUOTED-PRINTABLE in vCard import #224 #187	2026-04-26 02:47:19 +02:00
Linus Rath	9f8588eadc	fix: hide preview line in compact density to match settings preview (#223 )	2026-04-26 02:12:28 +02:00
Linus Rath	d657aec391	feat: add support for right-side composer sidebar and update related types	2026-04-25 19:45:45 +02:00
Linus RathandCopilot	e683c90404	fix: implement inline matcher for Next.js proxy and remove unnecessary config Co-authored-by: Copilot <copilot@github.com>	2026-04-25 19:25:15 +02:00
Linus Rath	cfb4a23c9d	fix: remove unnecessary runtime config for Node.js in proxy settings	2026-04-25 18:54:15 +02:00
Linus Rath	fe1d4861bb	feat: composer-sidebar slot + plugin-declared frame-src origins	2026-04-25 18:40:54 +02:00
Linus Rath	5aa9b1d5f9	fix: honor SESSION_SECRET_FILE in dashboard warning check #222	2026-04-25 17:21:17 +02:00
Linus Rath	0913dbd3e4	chore: update version to 1.5.1	2026-04-25 16:34:45 +02:00
Linus Rath	29197ea355	feat: replace folder prompt() calls with proper modal dialog	2026-04-25 16:30:18 +02:00
Linus Rath	4788e8a91a	feat: add right-click context menu to mail folders sidebar	2026-04-25 16:26:05 +02:00
Linus Rath	b80678b00f	feat: add 'Today' button to desktop calendar toolbar	2026-04-25 03:11:16 +02:00
Linus Rath	4f7c9c332b	feat: enhance OAuth auto-setup with dialog and validation for origin and issuer URLs	2026-04-25 02:53:12 +02:00
Linus Rath	da103ff06f	feat: implement OAuth auto-setup functionality for Stalwart integration	2026-04-25 01:37:18 +02:00
Linus Rath	2111c77870	fix: restore admin panel after Stalwart v0.16 REST API removal	2026-04-25 01:13:17 +02:00
Linus Rath	e5083ec1df	fix: restore admin panel after Stalwart v0.16 REST API removal	2026-04-25 01:12:33 +02:00
Linus Rath	df8d04e233	fix: restore broken viewer toolbar actions and improve mobile menu #220	2026-04-24 19:31:38 +02:00
Linus RathandGitHub	9a11a18a44	Update README.md	2026-04-24 17:02:00 +02:00
Christian Lepthien	ce9f7af330	fix: improve corean flag	2026-04-24 14:56:58 +02:00
Linus Rath	081e8a0310	feat: add setting to show avatars in junk folder, disabled by default	2026-04-23 18:23:48 +02:00
Linus Rath	6c3529b368	fix: stop flicker on background folder refresh	2026-04-23 18:06:40 +02:00
Linus Rath	077a4f03a7	fix: preserve search/filter on batch move and archive	2026-04-23 18:01:21 +02:00
Linus Rath	b04dfaf252	fix: preserve search/filter when moving emails via drag-drop	2026-04-23 16:37:17 +02:00
Linus Rath	9c7452e7fd	chore: add admin dashboard data directory configuration to environment files	2026-04-23 11:22:14 +02:00
Linus Rath	ec5593f567	Merge branch 'dev' into main	2026-04-23 00:10:22 +02:00
Linus Rath	c30c38a7af	chore: update version to 1.5.0	2026-04-23 00:07:34 +02:00
Linus Rath	7494fc1776	chore: update version to 1.5.0	2026-04-22 23:49:44 +02:00
Linus Rath	16fe92d2e9	chore: update version to 1.5.0	2026-04-22 23:31:32 +02:00
Linus Rath	3544e6a9e7	chore: bump dependencies to latest compatible versions	2026-04-22 23:03:05 +02:00
Linus Rath	dd1f3e11e6	fix: retry mailbox fetch on first login to handle lazy provisioning #217	2026-04-22 22:45:49 +02:00
Linus Rath	6503482b55	feat: support resizing events from the top edge	2026-04-22 21:14:28 +02:00
Linus Rath	cab57f6cd7	feat: add timezone-aware formatting for event start times and update utcEnd on duration change	2026-04-22 21:05:41 +02:00
Linus Rath	27f4fbdce4	feat: optimize layout of overlapping events in calendar	2026-04-22 20:53:04 +02:00
Linus Rath	39a228b20e	feat: streamline mobile email viewer header layout	2026-04-22 20:50:12 +02:00
Linus Rath	4b069808d6	feat: add isMobile prop to calendar views and time grid interactions	2026-04-22 20:37:00 +02:00
Linus Rath	468851ff25	feat: show full folder path in move/drop toast	2026-04-22 00:14:49 +02:00
Linus Rath	b7374570c8	feat: implement bulk email moving functionality in email store	2026-04-22 00:10:40 +02:00
Linus Rath	3c9fa5dc25	feat: implement batch archiving of emails	2026-04-22 00:05:38 +02:00
Linus Rath	3ade1c6473	fix: update mailbox retrieval logic in archive handling to use fresh state	2026-04-22 00:00:43 +02:00
Linus Rath	1810a474a2	fix: enhance error message for mailbox creation failure	2026-04-22 00:00:01 +02:00
Linus Rath	40982bc37b	fix: align hover styles and selection-toggle target with focused item	2026-04-21 23:50:55 +02:00
Linus Rath	76f6149841	feat: add setting to toggle alphabetical grouping in contacts list	2026-04-21 23:22:18 +02:00
Linus Rath	7d6a3c8c76	feat: group contacts by first letter with sticky section headers	2026-04-21 23:15:13 +02:00
Linus Rath	361ad49f5f	fix: read matchMedia synchronously on client to prevent layout flicker	2026-04-21 23:02:21 +02:00
Linus Rath	f9aa5cbaee	fix: skip checkAuth on route change when already authenticated	2026-04-21 22:54:02 +02:00
Linus Rath	3f36045990	feat: reorganize settings into 6 groups with clearer tabs	2026-04-21 22:22:02 +02:00
Linus Rath	9a44babcf1	feat: add collapsible details to calendar invitation banner and update sanitization config for iframe rendering	2026-04-21 21:21:42 +02:00
Linus Rath	f032758303	feat: revamp contact detail, filters, and add photo/print/duplicate	2026-04-21 21:16:54 +02:00
@@ -1 +1 @@
 .4.14
 .6.1