Merge dev into main - version 1.4.7

- Add VisualRuleSummary component showing conditions and actions as
  labeled inline pills with IF/THEN flow layout
- Add expandedFilterView toggle to settings store (persisted)
- Fix RuleSummary to allow multi-line wrapping instead of truncating
- Use items-start on rule cards so drag handle and toggle align to top
- Add translations for expanded view keys in all 8 locales

.dockerignore

@@ -5,9 +5,7 @@ node_modules
 .env*
 !.env.example
 !.env.dev.example
-.claude/
 scripts/
 TODO.md
-CLAUDE.md
 *.md
 !README.md

.env.example

@@ -64,7 +64,10 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # SETTINGS_SYNC_ENABLED=true
 
 # Directory for storing encrypted settings files (default: ./data/settings).
-# For Docker, mount a persistent volume at this path.
+# For Docker, the working directory is /app, so the default resolves to
+# /app/data/settings — mount a persistent volume there:
+#   volumes:
+#     - bulwark-settings:/app/data/settings
 # SETTINGS_DATA_DIR=./data/settings
 
 # =============================================================================

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

@@ -0,0 +1,118 @@
+name: Publish Docker Image on Release
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+env:
+  IMAGE_NAME: ghcr.io/${{ github.repository }}
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest
+            type=semver,pattern=v{{version}}
+            type=semver,pattern={{version}}
+            type=semver,pattern=v{{major}}.{{minor}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern=v{{major}}
+            type=semver,pattern={{major}}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/docker-publish.yml

@@ -2,7 +2,9 @@ name: Publish Docker Image
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
+      - dev
     paths:
       - "Dockerfile"
       - ".dockerignore"
@@ -17,12 +19,22 @@ on:
       - "package.json"
       - "package-lock.json"
       - ".github/workflows/docker-publish.yml"
-    tags: ["v*.*.*"]
   workflow_dispatch:
 
+env:
+  IMAGE_NAME: ghcr.io/${{ github.repository }}
+
 jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    runs-on: ${{ matrix.runner }}
     permissions:
       contents: read
       packages: write
@@ -31,9 +43,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
@@ -48,21 +57,73 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: |
-            ghcr.io/${{ github.repository }}
-          tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=sha,prefix=
+          images: ${{ env.IMAGE_NAME }}
 
-      - name: Build and push
+      - name: Build and push by digest
+        id: build
         uses: docker/build-push-action@v6
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
+          platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          outputs: type=image,name=${{ env.IMAGE_NAME }},push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value={{branch}}
+            type=sha,prefix={{branch}}-
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.gitignore

@@ -42,9 +42,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# claude code
-.claude/
-
 # settings sync data
 /data/
 

CHANGELOG.md

@@ -1,5 +1,102 @@
 # Changelog
 
+## 1.4.7 (2026-03-21)
+
+### Features
+
+- **Calendar**: Add task management features with task creation, editing, and status tracking
+- **Calendar**: Add option to show week numbers in mini-calendar
+- **Email**: Add resizable image component and rich text editor with image upload support
+- **Files**: Support uploading folders via drag-and-drop and toolbar button
+- **Filters**: Add expanded visual view for filter rules
+- **Auth**: Add non-interactive SSO login flow for embedded/iframe deployments (#69)
+- **DevOps**: Add separate Docker build workflow for releases and dev branch images
+
+### Fixes
+
+- **Calendar**: Handle updates and deletions for synthetic JMAP IDs in calendar events with fallback to destroy and recreate
+- **Security**: Extend CryptoEngine to support legacy algorithms and integrate with LinerEngine for decryption
+- **Auth**: Refactor logout to use synchronous flow with full page redirect
+- **Email**: Update iframe sandbox attributes to allow popups to escape sandbox
+- **i18n**: Add missing translation keys across all locales
+- **Docker**: Update .env.example to clarify Docker volume mounting for settings data directory
+
+## 1.4.6 (2026-03-21)
+
+### Features
+
+- **Demo**: Add full demo mode with fixture data for emails, calendars, contacts, files, filters, identities, mailboxes, and vacation responses
+- **Demo**: Implement JMAP client interface abstraction to support demo and live backends
+- **Contacts**: Add no-category filter, drag-and-drop to category, and category combo box in contact form
+- **Email**: Add hover actions for emails with configurable quick-action buttons
+- **Settings**: Implement keyword migration functionality for upgrading legacy email tags
+- **Security**: Enhance S/MIME certificate extraction and add legacy PBE (password-based encryption) support
+- **Tour**: Add interactive guided tour overlay for new user onboarding
+
+### Fixes
+
+- **Settings**: Add missing `showTimeInMonthView` and `showOnMobile` type definitions to settings store
+- **UI**: Adjust padding and size of sidebar buttons for improved layout
+
+## 1.4.5 (2026-03-20)
+
+### Features
+
+- **Calendar**: Add prev/next navigation buttons and date label to desktop calendar toolbar
+- **Calendar**: Add pending event preview functionality to calendar views and event modal
+- **Calendar**: Add setting to show event start time in month view
+- **Contacts**: Implement pagination for fetching contacts with maxObjectsInGet capability
+- **Email**: Add attachment position setting in email settings
+- **Layout**: Add mobile visibility toggle for sidebar apps
+- **Error**: Add NotFound component to handle 404 errors and redirect unauthenticated users
+
+### Fixes
+
+- **Auth**: Enhance account switching logic and clear stores on account change
+- **Auth**: Improve account restoration logic and handle stale accounts
+- **Auth**: Improve draft handling in email composer and enhance session cookie verification
+- **Calendar**: Expand recurring events in CalendarEvent/query so individual occurrences are returned (#65)
+- **Calendar**: Validate event start field when fetching calendar events
+- **Calendar**: Auto-scroll agenda view to today's events and include today's date in groups
+- **Calendar**: Correct JSX syntax in CalendarToolbar component
+- **Dependencies**: Update flatted to 3.4.2
+- **DevOps**: Use native ARM runners instead of QEMU for Docker builds
+- **DevOps**: Enhance health check with detailed memory diagnostics and stable liveness probe
+
+## 1.4.4 (2026-03-19)
+
+### Features
+
+- **Calendar**: Implement CalDAV discovery API with automatic calendar home resolution for multi-account setups
+- **Calendar**: Enhance calendar management settings with mailbox role reassignment controls
+- **Email**: Add signature rendering utilities with HTML-to-text conversion and sanitization
+
+### Fixes
+
+- **Auth**: Fix account session handling to update existing accounts instead of duplicating entries
+- **Auth**: Fix logout redirects and unauthenticated home page rendering
+- **Calendar**: Fix duplicate calendar edits and prevent double-save submissions in event modal
+- **Calendar**: Remove stale calendar ID references in favor of CalDAV-discovered IDs
+- **Contacts**: Improve RFC 9553 compliance for contact birthdays and address formatting
+- **Email**: Fix email signature rendering for identity signatures
+- **Folders**: Improve mailbox role management by clearing roles from all mailboxes before reassigning
+
+## 1.4.3 (2026-03-19)
+
+### Features
+
+- **Auth**: Implement multi-account support with up to 5 simultaneous accounts and instant switching
+- **Auth**: Add account switcher component with connection status, default account selection, and per-account logout
+- **Auth**: Support multi-account OAuth and basic auth with per-account session persistence
+- **Contacts**: Enhance contacts sidebar with collapsible sections, bulk operations, and address book grouping
+- **Contacts**: Add contact import functionality and keyword filtering
+- **Settings**: Add per-account encrypted settings storage with server-side sync support
+
+### Fixes
+
+- **UI**: Adjust popover alignment in sub-address helper component
+- **Settings**: Improve error logging in settings sync functionality
+
 ## 1.4.2 (2026-03-19)
 
 ### Features

README.md

@@ -3,7 +3,7 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="public/branding/Bulwark_Logo_with_Lettering_White_and_Color.svg" />
   <source media="(prefers-color-scheme: light)" srcset="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" />
-  <img src="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" alt="Bulwark Webmail" width="480" />
+  <img src="public/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg" alt="Bulwark Webmail" width="280" />
 </picture>
 
 # Bulwark Webmail
@@ -12,7 +12,7 @@ A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.ar
 Built with Next.js and the JMAP protocol.
 
 [![License: AGPL v3](https://img.shields.io/badge/license-AGPL%20v3-blue.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-1.4.2-green.svg)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-1.4.7-green.svg)](CHANGELOG.md)
 [![Docker](https://img.shields.io/badge/docker-ghcr.io%2Fbulwarkmail%2Fwebmail-blue)](https://ghcr.io/bulwarkmail/webmail)
 
 </div>
@@ -25,16 +25,16 @@ Built with Next.js and the JMAP protocol.
 <tr>
 <td width="50%">
 
-<img src="screenshots/inbox.png" width="100%" alt="Inbox - three-pane layout with sidebar, email list, and viewer (dark mode)">
+<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
+**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
+**Calendar** — Month, week, day, and agenda views with event management
 
 </td>
 </tr>
@@ -43,14 +43,14 @@ Built with Next.js and the JMAP protocol.
 
 <img src="screenshots/contacts.png" width="100%" alt="Contacts">
 
-**Contacts** - Contact management with groups and vCard support
+**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
+**Files** — Cloud file browser with upload, preview, and folder navigation
 
 </td>
 </tr>
@@ -62,16 +62,16 @@ Built with Next.js and the JMAP protocol.
 <tr>
 <td width="50%">
 
-<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox - light mode">
+<img src="screenshots/inbox%20whitemode.png" width="100%" alt="Inbox — light mode">
 
-**Light mode** - Full theme support with intelligent color transformation
+**Light mode** — Full theme support with intelligent color transformation
 
 </td>
 <td width="50%">
 
 <img src="screenshots/settings.png" width="100%" alt="Settings">
 
-**Settings** - Appearance, identities, filters, templates, and more
+**Settings** — Appearance, identities, filters, templates, and more
 
 </td>
 </tr>
@@ -80,7 +80,7 @@ Built with Next.js and the JMAP protocol.
 
 <img src="screenshots/login.png" width="100%" alt="Login page">
 
-**Login** - Configurable branding with OAuth2/OIDC and 2FA support
+**Login** — Configurable branding with OAuth2/OIDC and 2FA support
 
 </td>
 <td width="50%">
@@ -94,21 +94,21 @@ Built with Next.js and the JMAP protocol.
 ### Mail
 
 - **Read, compose, reply, reply-all, forward** with rich HTML rendering
-- **Threading** - Gmail-style inline expansion with thread navigation
+- **Threading** — Gmail-style inline expansion with thread navigation
 - **Draft auto-save** with discard confirmation
-- **Attachments** - upload, download, and inline preview
-- **Search** - full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
-- **Batch operations** - multi-select with checkboxes, archive, delete, move, tag
-- **Archive modes** - archive directly or organize archived mail by year or month
+- **Attachments** — upload, download, and inline preview
+- **Search** — full-text with JMAP filter panel, search chips, cross-mailbox queries, wildcard support, and OR conditions
+- **Batch operations** — multi-select with checkboxes, archive, delete, move, tag
+- **Archive modes** — archive directly or organize archived mail by year or month
 - **Print** emails directly from the viewer
 - **Color tags/labels** and star/unstar
 - **Virtual scrolling** for large mailboxes
 - **Quick reply** from the viewer
-- **Sender avatars** - favicon-based with negative caching for performance
+- **Sender avatars** — favicon-based with negative caching for performance
 - **Recipient popover** for quick contact interaction
-- **Folder management** - create, rename, delete folders with icon picker and subfolder support
-- **Tag counts** - unread and total counts displayed in sidebar
-- **TNEF support** - extract Outlook `winmail.dat` message bodies and attachments automatically
+- **TNEF support** — extract Outlook `winmail.dat` message bodies and attachments automatically
+- **Folder management** — create, rename, delete folders with icon picker and subfolder support
+- **Tag counts** — unread and total counts displayed in sidebar
 
 ### Calendar
 
@@ -116,8 +116,8 @@ Built with Next.js and the JMAP protocol.
 - **Event hover preview** popover with details
 - **Drag-and-drop rescheduling**, click-drag creation, edge-resize (15-min snap)
 - **Recurring events** with edit/delete scope (this / this and following / all)
-- **Participant scheduling** - iTIP invitations, organizer/attendee UI, RSVP
-- **Inline calendar invitations** in email viewer - auto-detect `.ics`, RSVP, import
+- **Participant scheduling** — iTIP invitations, organizer/attendee UI, RSVP
+- **Inline calendar invitations** in email viewer — auto-detect `.ics`, RSVP, import
 - **iCalendar import** with preview and bulk create
 - **Notifications** with configurable sound and alert persistence
 - **Real-time sync** via JMAP push
@@ -128,15 +128,15 @@ Built with Next.js and the JMAP protocol.
 - **Contact groups** with group expansion and member management
 - **vCard import/export** (RFC 6350) with duplicate detection
 - **Autocomplete** in composer (To/Cc/Bcc)
-- **Bulk operations** - multi-select, delete, group add, export
+- **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…)
+- **Visual rule builder** — conditions (From, To, Subject, Size, Body…) and actions (Move, Forward, Star, Discard…)
 - **Raw Sieve editor** with syntax validation
 - **Vacation responder** with date range scheduling and sidebar indicator
-- **Email templates** - reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
+- **Email templates** — reusable, categorized, with placeholder auto-fill (`{{recipientName}}`, `{{date}}`, etc.)
 
 ### Files
 
@@ -144,39 +144,39 @@ Built with Next.js and the JMAP protocol.
 - **Upload and download** files with progress tracking and folder upload support
 - **Folder navigation** with breadcrumb path and tree sidebar
 - **Grid and list views** with sorting by name, size, or date
-- **Clipboard operations** - cut, copy, paste, duplicate files
+- **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
+- **Bulk operations** — multi-select, delete, move, download
 
 ### Security & Privacy
 
-- **External content blocked** by default - trusted senders list for auto-load
+- **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
+- **S/MIME** — manage certificates, sign outgoing mail, encrypt to recipients, decrypt messages, and verify signatures
 - **SPF/DKIM/DMARC** status indicators
 - **OAuth2/OIDC with PKCE** for SSO (Keycloak, Authentik, or built-in), with OAuth-only mode
 - **TOTP two-factor authentication**
-- **Account security panel** - manage passwords and 2FA via Stalwart admin API
-- **"Remember me"** - AES-256-GCM encrypted httpOnly cookie (opt-in)
-- **Security headers** - CSP with per-request nonce, X-Frame-Options, Referrer-Policy
+- **Account security panel** — manage passwords and 2FA via Stalwart admin API
+- **"Remember me"** — AES-256-GCM encrypted httpOnly cookie (opt-in)
+- **Security headers** — CSP with per-request nonce, X-Frame-Options, Referrer-Policy
 - **Newsletter unsubscribe** (RFC 2369)
 
 ### Interface
 
-- **Three-pane layout** - sidebar, email list, viewer with resizable columns
+- **Three-pane layout** — sidebar, email list, viewer with resizable columns
 - **Dark and light themes** with intelligent email color transformation
-- **Responsive** - desktop sidebar + mobile bottom tab bar with tablet support
-- **Keyboard shortcuts** - full navigation without a mouse
+- **Always-light email rendering** option for problematic HTML messages in dark theme
+- **Responsive** — desktop sidebar + mobile bottom tab bar with tablet support
+- **Keyboard shortcuts** — full navigation without a mouse
 - **Drag-and-drop** email organization between mailboxes and tag assignment
 - **Right-click context menus**, toast notifications with undo, form validation with shake feedback
-- **Always-light email rendering** option for problematic HTML messages in dark theme
 - **Customizable toolbar** position, custom favicon, sidebar/login logos, and login page branding
-- **Sidebar apps** - pin custom tools to the navigation rail and open them inline or in a new tab
-- **Settings sync** - preferences synchronized with the server (encrypted)
+- **Sidebar apps** — pin custom tools to the navigation rail and open them inline or in a new tab
+- **Settings sync** — preferences synchronized with the server (encrypted)
 - **Storage quota** display
-- **Shared folders** - multi-account access
-- **Accessibility** - WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
+- **Shared folders** — multi-account access
+- **Accessibility** — WCAG AA contrast, reduced-motion support, focus trap, screen reader live regions
 
 ### Internationalization
 
@@ -187,13 +187,13 @@ Automatic browser detection with persistent preference.
 ### Identity Management
 
 - **Multiple sender identities** with per-identity signatures
-- **Sub-addressing** - `user+tag@domain.com` with contextual tag suggestions
-- **Identity refresh** - keep the identity manager aligned with server-side changes after edits
+- **Identity refresh** — keep the identity manager aligned with server-side changes after edits
+- **Sub-addressing** — `user+tag@domain.com` with contextual tag suggestions
 - **Identity badges** in viewer and email list
 
 ### Operations
 
-- **Automatic update check** - server logs when a newer release is available
+- **Automatic update check** — server logs when a newer release is available
 
 ---
 
@@ -211,7 +211,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
 ```
 
@@ -222,7 +222,7 @@ 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
 ```
 
@@ -246,7 +246,7 @@ JMAP_SERVER_URL=https://mail.example.com
 APP_NAME=My Webmail
 ```
 
-All variables are **runtime** - Docker deployments can be configured without rebuilding.
+All variables are **runtime** — Docker deployments can be configured without rebuilding.
 
 <details>
 <summary>Server Listen Address</summary>
@@ -313,7 +313,7 @@ Credentials encrypted with AES-256-GCM, stored in an httpOnly cookie (30-day exp
 
 ## 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 mail server written in Rust with **native JMAP support** — not IMAP/SMTP with JMAP bolted on. It handles JMAP, IMAP, SMTP, and ManageSieve in a single binary. Self-hosted, no third-party dependencies.
 
 ## Contributing
 

VERSION

@@ -1 +1 @@
-1.4.2
+1.4.7

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

@@ -13,7 +13,7 @@ function OAuthCallbackInner() {
   const params = useParams();
   const searchParams = useSearchParams();
   const t = useTranslations("login");
-  const { loginWithOAuth } = useAuthStore();
+  const { loginWithOAuth, loginWithServerSso } = useAuthStore();
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -32,43 +32,71 @@ function OAuthCallbackInner() {
     }
 
     const savedState = sessionStorage.getItem("oauth_state");
-    if (!state || state !== savedState) {
-      setError("invalid_state");
-      return;
-    }
 
-    const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
-    const serverUrl = sessionStorage.getItem("oauth_server_url");
+    if (savedState) {
+      // Classic flow — sessionStorage has the PKCE state (same-tab OAuth)
+      if (!state || state !== savedState) {
+        setError("invalid_state");
+        return;
+      }
 
-    if (!codeVerifier || !serverUrl) {
-      setError("missing_params");
-      return;
-    }
+      const codeVerifier = sessionStorage.getItem("oauth_code_verifier");
+      const serverUrl = sessionStorage.getItem("oauth_server_url");
 
-    const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+      if (!codeVerifier || !serverUrl) {
+        setError("missing_params");
+        return;
+      }
 
-    loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
-      .then((success) => {
-        if (success) {
-          sessionStorage.removeItem("oauth_state");
-          sessionStorage.removeItem("oauth_code_verifier");
-          sessionStorage.removeItem("oauth_server_url");
-          let redirectTo = `/${params.locale}`;
-          try {
-            const saved = sessionStorage.getItem('redirect_after_login');
-            if (saved) {
-              sessionStorage.removeItem('redirect_after_login');
-              redirectTo = saved;
-            }
-          } catch { /* sessionStorage may be unavailable */ }
-          router.push(redirectTo);
-        } else {
+      const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+
+      loginWithOAuth(serverUrl, code, codeVerifier, redirectUri)
+        .then((success) => {
+          if (success) {
+            sessionStorage.removeItem("oauth_state");
+            sessionStorage.removeItem("oauth_code_verifier");
+            sessionStorage.removeItem("oauth_server_url");
+            sessionStorage.removeItem("oauth_add_account_mode");
+            let redirectTo = `/${params.locale}`;
+            try {
+              const saved = sessionStorage.getItem('redirect_after_login');
+              if (saved) {
+                sessionStorage.removeItem('redirect_after_login');
+                redirectTo = saved;
+              }
+            } catch { /* sessionStorage may be unavailable */ }
+            router.push(redirectTo);
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
           setError("token_exchange_failed");
-        }
-      })
-      .catch(() => {
-        setError("token_exchange_failed");
-      });
+        });
+    } else if (state) {
+      // Server-side SSO flow — state was stored in encrypted httpOnly cookie
+      loginWithServerSso(code, state)
+        .then((success) => {
+          if (success) {
+            let redirectTo = `/${params.locale}`;
+            try {
+              const saved = sessionStorage.getItem('redirect_after_login');
+              if (saved) {
+                sessionStorage.removeItem('redirect_after_login');
+                redirectTo = saved;
+              }
+            } catch { /* sessionStorage may be unavailable */ }
+            router.push(redirectTo);
+          } else {
+            setError("token_exchange_failed");
+          }
+        })
+        .catch(() => {
+          setError("token_exchange_failed");
+        });
+    } else {
+      setError("invalid_state");
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (error) {

app/[locale]/calendar/page.tsx

@@ -7,11 +7,11 @@ import { Plus } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addWeeks, subWeeks, addDays, subDays,
-  format, parseISO,
+  startOfDay, format, parseISO,
 } from "date-fns";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { isCalendarViewMode } from "@/stores/calendar-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
@@ -23,9 +23,12 @@ import { CalendarMonthView } from "@/components/calendar/calendar-month-view";
 import { CalendarWeekView } from "@/components/calendar/calendar-week-view";
 import { CalendarDayView } from "@/components/calendar/calendar-day-view";
 import { CalendarAgendaView } from "@/components/calendar/calendar-agenda-view";
+import { TaskListView } from "@/components/calendar/task-list-view";
+import { TaskToolbar } from "@/components/calendar/task-toolbar";
+import { TaskModal } from "@/components/calendar/task-modal";
 import { MiniCalendar } from "@/components/calendar/mini-calendar";
 import { CalendarSidebarPanel } from "@/components/calendar/calendar-sidebar-panel";
-import { EventModal } from "@/components/calendar/event-modal";
+import { EventModal, type PendingEventPreview } from "@/components/calendar/event-modal";
 import { EventDetailPopover } from "@/components/calendar/event-detail-popover";
 import { ICalImportModal } from "@/components/calendar/ical-import-modal";
 import { ICalSubscriptionModal } from "@/components/calendar/ical-subscription-modal";
@@ -35,6 +38,7 @@ import { SidebarAppsModal } from "@/components/layout/sidebar-apps-modal";
 import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
+import { useTaskStore } from "@/stores/task-store";
 import { cn } from "@/lib/utils";
 import type { CalendarEvent, CalendarParticipant } from "@/lib/jmap/types";
 import { getUserParticipantId } from "@/lib/calendar-participants";
@@ -63,7 +67,8 @@ export default function CalendarPage() {
     setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
     refreshAllSubscriptions,
   } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat } = useSettingsStore();
+  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar } = useSettingsStore();
+  const taskStore = useTaskStore();
   const { identities } = useIdentityStore();
   const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";
 
@@ -82,6 +87,9 @@ export default function CalendarPage() {
   const [pendingScopeAction, setPendingScopeAction] = useState<PendingScopeAction | null>(null);
   const [detailEvent, setDetailEvent] = useState<CalendarEvent | null>(null);
   const [detailAnchorRect, setDetailAnchorRect] = useState<DOMRect | null>(null);
+  const [pendingPreview, setPendingPreview] = useState<PendingEventPreview | null>(null);
+  const [showTaskModal, setShowTaskModal] = useState(false);
+  const [editTask, setEditTask] = useState<import("@/lib/jmap/types").CalendarTask | null>(null);
   const hasFetched = useRef(false);
 
   // Sidebar resize state
@@ -104,7 +112,7 @@ export default function CalendarPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     } else if (client && !supportsCalendar) {
       router.push("/");
     }
@@ -156,14 +164,27 @@ export default function CalendarPage() {
           start: format(d, "yyyy-MM-dd'T'00:00:00"),
           end: format(d, "yyyy-MM-dd'T'23:59:59"),
         };
-      case "agenda":
+      case "agenda": {
+        // Agenda always starts from today at the earliest
+        const today = startOfDay(new Date());
+        const agendaStart = d >= today ? d : today;
         return {
-          start: format(d, "yyyy-MM-dd'T'00:00:00"),
-          end: format(addDays(d, 30), "yyyy-MM-dd'T'23:59:59"),
+          start: format(agendaStart, "yyyy-MM-dd'T'00:00:00"),
+          end: format(addDays(agendaStart, 30), "yyyy-MM-dd'T'23:59:59"),
         };
+      }
+      case "tasks":
+        return null;
     }
   }, [selectedDate, normalizedViewMode, firstDayOfWeek]);
 
+  // Fetch tasks when tasks view is active or when tasks are shown on calendar grid
+  useEffect(() => {
+    if (client && enableCalendarTasks && (normalizedViewMode === "tasks" || showTasksOnCalendar)) {
+      taskStore.fetchTasks(client);
+    }
+  }, [client, enableCalendarTasks, normalizedViewMode, showTasksOnCalendar]);
+
   useEffect(() => {
     if (client && calendars.length > 0 && dateRange) {
       fetchEvents(client, dateRange.start, dateRange.end);
@@ -177,6 +198,7 @@ export default function CalendarPage() {
       case "week": next = subWeeks(selectedDate, 1); break;
       case "day": next = subDays(selectedDate, 1); break;
       case "agenda": next = subMonths(selectedDate, 1); break;
+      case "tasks": return;
     }
     setSelectedDate(next);
     setMiniMonth(next);
@@ -189,6 +211,7 @@ export default function CalendarPage() {
       case "week": next = addWeeks(selectedDate, 1); break;
       case "day": next = addDays(selectedDate, 1); break;
       case "agenda": next = addMonths(selectedDate, 1); break;
+      case "tasks": return;
     }
     setSelectedDate(next);
     setMiniMonth(next);
@@ -249,6 +272,34 @@ export default function CalendarPage() {
     setShowEventModal(true);
   }, []);
 
+  const openCreateTaskModal = useCallback(() => {
+    setEditTask(null);
+    setShowTaskModal(true);
+  }, []);
+
+  const openEditTaskModal = useCallback((task: import("@/lib/jmap/types").CalendarTask) => {
+    setEditTask(task);
+    setShowTaskModal(true);
+  }, []);
+
+  const handleSaveTask = useCallback(async (data: Partial<import("@/lib/jmap/types").CalendarTask>) => {
+    if (!client) return;
+    if (editTask) {
+      await taskStore.updateTask(client, editTask.id, data);
+    } else {
+      await taskStore.createTask(client, data);
+    }
+    setShowTaskModal(false);
+    setEditTask(null);
+  }, [client, editTask, taskStore]);
+
+  const handleDeleteTask = useCallback(async (id: string) => {
+    if (!client) return;
+    await taskStore.deleteTask(client, id);
+    setShowTaskModal(false);
+    setEditTask(null);
+  }, [client, taskStore]);
+
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const closeDetail = useCallback(() => {
@@ -264,12 +315,13 @@ export default function CalendarPage() {
   }, [closeDetail, openEditModal]);
 
   const handleHoverEvent = useCallback((event: CalendarEvent, anchorRect: DOMRect) => {
+    if (isMobile) return;
     if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
     // Don't show hover popover if the sidebar is already open for this event
     if (showEventModal && editEvent?.id === event.id) return;
     setDetailEvent(event);
     setDetailAnchorRect(anchorRect);
-  }, [showEventModal, editEvent]);
+  }, [isMobile, showEventModal, editEvent]);
 
   const handleHoverLeave = useCallback(() => {
     hoverTimerRef.current = setTimeout(() => {
@@ -418,9 +470,22 @@ export default function CalendarPage() {
     try {
       if (type === "edit" && updates) {
         switch (scope) {
-          case "this":
-            await updateEvent(client, event.id, updates, sendScheduling);
+          case "this": {
+            // Synthetic IDs (from expandRecurrences) can't be updated directly.
+            // Patch the master event's recurrenceOverrides instead.
+            const master = await findMasterEvent(event);
+            if (master && event.recurrenceId) {
+              const patchUpdates: Record<string, unknown> = {};
+              for (const [key, value] of Object.entries(updates)) {
+                if (['id', 'uid', '@type', 'calendarIds', 'recurrenceRules', 'recurrenceOverrides', 'excludedRecurrenceRules'].includes(key)) continue;
+                patchUpdates[`recurrenceOverrides/${event.recurrenceId}/${key}`] = value;
+              }
+              await updateEvent(client, master.id, patchUpdates as Partial<CalendarEvent>, sendScheduling);
+            } else {
+              await updateEvent(client, event.id, updates, sendScheduling);
+            }
             break;
+          }
           case "this_and_future": {
             const result = await truncateRecurrenceAtEvent(event);
             if (!result) {
@@ -478,9 +543,20 @@ export default function CalendarPage() {
         toast.success(t("notifications.event_updated"));
       } else {
         switch (scope) {
-          case "this":
-            await deleteEvent(client, event.id, sendScheduling);
+          case "this": {
+            // Synthetic IDs (from expandRecurrences) can't be destroyed directly.
+            // Exclude the instance via recurrenceOverrides on the master event.
+            const delMaster = await findMasterEvent(event);
+            if (delMaster && event.recurrenceId) {
+              await updateEvent(
+                client, delMaster.id,
+                { [`recurrenceOverrides/${event.recurrenceId}`]: { excluded: true } } as Partial<CalendarEvent>,
+              );
+            } else {
+              await deleteEvent(client, event.id, sendScheduling);
+            }
             break;
+          }
           case "this_and_future": {
             const result = await truncateRecurrenceAtEvent(event);
             if (!result) {
@@ -592,6 +668,7 @@ export default function CalendarPage() {
     const handleKey = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") return;
+      if (target.getAttribute("contenteditable") === "true") return;
       if (showEventModal || detailEvent) return;
 
       switch (e.key) {
@@ -602,6 +679,7 @@ export default function CalendarPage() {
         case "w": setViewMode("week"); break;
         case "d": setViewMode("day"); break;
         case "a": setViewMode("agenda"); break;
+        case "k": if (enableCalendarTasks) setViewMode("tasks"); break;
         case "n": openCreateModal(); break;
       }
     };
@@ -611,6 +689,7 @@ export default function CalendarPage() {
 
   const visibleEvents = useMemo(() =>
     events.filter((e) => {
+      if (!e.start || !e.calendarIds) return false;
       const calIds = Object.keys(e.calendarIds);
       return calIds.some((id) => selectedCalendarIds.includes(id));
     }),
@@ -643,6 +722,7 @@ export default function CalendarPage() {
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
             />
           );
         case "week":
@@ -659,6 +739,9 @@ export default function CalendarPage() {
               firstDayOfWeek={firstDayOfWeek}
               timeFormat={timeFormat}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
             />
           );
         case "day":
@@ -673,6 +756,9 @@ export default function CalendarPage() {
               onCreateAtTime={openCreateModal}
               timeFormat={timeFormat}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
+              tasks={enableCalendarTasks && showTasksOnCalendar ? taskStore.tasks : undefined}
+              onToggleTaskComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
             />
           );
         case "agenda":
@@ -687,6 +773,33 @@ export default function CalendarPage() {
               timeFormat={timeFormat}
             />
           );
+        case "tasks":
+          return (
+            <div className="flex flex-col h-full">
+              <TaskToolbar
+                filter={taskStore.filter}
+                showCompleted={taskStore.showCompleted}
+                onFilterChange={taskStore.setFilter}
+                onShowCompletedChange={taskStore.setShowCompleted}
+                onCreateTask={openCreateTaskModal}
+              />
+              <TaskListView
+                tasks={taskStore.tasks}
+                calendars={calendars}
+                selectedCalendarIds={selectedCalendarIds}
+                filter={taskStore.filter}
+                showCompleted={taskStore.showCompleted}
+                onSelectTask={openEditTaskModal}
+                onToggleComplete={(task) => { if (client) taskStore.toggleTaskComplete(client, task); }}
+                selectedTaskId={taskStore.selectedTaskId}
+                onQuickCreate={(title) => {
+                  if (client) {
+                    taskStore.createTask(client, { "@type": "Task", title, progress: "needs-action", calendarIds: { [calendars[0]?.id ?? ""]: true } });
+                  }
+                }}
+              />
+            </div>
+          );
       }
     })();
 
@@ -703,7 +816,7 @@ export default function CalendarPage() {
   };
 
   return (
-    <div className="flex h-dvh bg-background overflow-hidden">
+    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
       {/* Left Navigation Rail */}
       {!isMobile && (
         <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
@@ -711,7 +824,7 @@ export default function CalendarPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -741,6 +854,7 @@ export default function CalendarPage() {
               onChangeMonth={handleMiniMonthChange}
               events={events}
               firstDayOfWeek={firstDayOfWeek}
+              showWeekNumbers={showWeekNumbers}
             />
             <CalendarSidebarPanel
               calendars={calendars}
@@ -766,7 +880,7 @@ export default function CalendarPage() {
       )}
 
       {!inlineApp && (
-      <div className="flex flex-col flex-1 min-w-0">
+      <div className="flex flex-col flex-1 min-w-0 min-h-0">
         <CalendarToolbar
           selectedDate={selectedDate}
           viewMode={normalizedViewMode}
@@ -781,10 +895,12 @@ export default function CalendarPage() {
           calendars={calendars}
           selectedCalendarIds={selectedCalendarIds}
           onToggleVisibility={toggleCalendarVisibility}
+          enableCalendarTasks={enableCalendarTasks}
         />
 
         <div
           className="flex flex-1 overflow-hidden relative"
+          data-tour="calendar-view"
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >
@@ -803,13 +919,29 @@ export default function CalendarPage() {
                 onDelete={handleDeleteEvent}
                 onDuplicate={handleDuplicateEvent}
                 onRsvp={handleRsvp}
-                onClose={() => { setShowEventModal(false); setEditEvent(null); }}
+                onClose={() => { setShowEventModal(false); setEditEvent(null); setPendingPreview(null); }}
+                onPreviewChange={setPendingPreview}
                 currentUserEmails={currentUserEmails}
                 isMobile={false}
               />
             </div>
           )}
 
+          {/* Desktop task panel */}
+          {!isMobile && showTaskModal && (
+            <div className="w-[400px] border-l border-border flex-shrink-0 overflow-hidden">
+              <TaskModal
+                key={editTask?.id ?? 'new-task'}
+                task={editTask}
+                calendars={calendars}
+                onSave={handleSaveTask}
+                onDelete={handleDeleteTask}
+                onClose={() => { setShowTaskModal(false); setEditTask(null); }}
+                isMobile={false}
+              />
+            </div>
+          )}
+
           {/* Floating Create Event Button (mobile) */}
           {isMobile && (
             <Button
@@ -826,13 +958,15 @@ export default function CalendarPage() {
 
       {/* Mobile Bottom Navigation */}
       {isMobile && (
-        <NavigationRail
-          orientation="horizontal"
-          onManageApps={handleManageApps}
-          onInlineApp={handleInlineApp}
-          onCloseInlineApp={closeInlineApp}
-          activeAppId={inlineApp?.id ?? null}
-        />
+        <div className="shrink-0">
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        </div>
       )}
 
       {detailEvent && detailAnchorRect && (

app/[locale]/contacts/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { ArrowLeft, Users } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -13,9 +12,10 @@ import { ContactForm } from "@/components/contacts/contact-form";
 import { ContactGroupForm } from "@/components/contacts/contact-group-form";
 import { ContactGroupDetail } from "@/components/contacts/contact-group-detail";
 import { ContactsSidebar, type ContactCategory } from "@/components/contacts/contacts-sidebar";
+import { ContactImportDialog } from "@/components/contacts/contact-import-dialog";
 import { exportContacts } from "@/components/contacts/contact-export";
 import { useContactStore, getContactDisplayName } from "@/stores/contact-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { toast } from "@/stores/toast-store";
 import { cn } from "@/lib/utils";
@@ -38,7 +38,6 @@ type View =
   | "bulk-add-to-group";
 
 export default function ContactsPage() {
-  const router = useRouter();
   const t = useTranslations("contacts");
   const { client, isAuthenticated, logout, checkAuth, isLoading: authLoading } = useAuthStore();
   const { showAppsModal, inlineApp, loadedApps, handleManageApps, handleInlineApp, closeInlineApp, closeAppsModal } = useSidebarApps();
@@ -73,10 +72,12 @@ export default function ContactsPage() {
     bulkDeleteContacts,
     bulkAddToGroup,
     moveContactToAddressBook,
+    importContacts,
   } = useContactStore();
 
   const [view, setView] = useState<View>("list");
   const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
+  const [showImportDialog, setShowImportDialog] = useState(false);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const hasFetched = useRef(false);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
@@ -84,10 +85,10 @@ export default function ContactsPage() {
 
   // Panel resize state - sidebar (categories)
   const [sidebarWidth, setSidebarWidth] = useState(() => {
-    try { const v = localStorage.getItem("contacts-sidebar-width"); return v ? Number(v) : 180; } catch { return 180; }
+    try { const v = localStorage.getItem("contacts-sidebar-width"); return v ? Number(v) : 256; } catch { return 256; }
   });
   const [isSidebarResizing, setIsSidebarResizing] = useState(false);
-  const sidebarDragStartWidth = useRef(180);
+  const sidebarDragStartWidth = useRef(256);
 
   // Panel resize state - contact list
   const [listWidth, setListWidth] = useState(() => {
@@ -106,9 +107,9 @@ export default function ContactsPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   useEffect(() => {
     if (client && supportsSync && !hasFetched.current) {
@@ -123,23 +124,34 @@ export default function ContactsPage() {
   const selectedGroup = selectedGroupId ? contacts.find(c => c.id === selectedGroupId) || null : null;
   const selectedGroupMembers = selectedGroupId ? getGroupMembers(selectedGroupId) : [];
 
+  // Collect all unique keywords across contacts
+  const allKeywords = useMemo(() => {
+    const kws = new Set<string>();
+    for (const contact of individuals) {
+      if (!contact.keywords) continue;
+      for (const [kw, active] of Object.entries(contact.keywords)) {
+        if (active) kws.add(kw);
+      }
+    }
+    return Array.from(kws).sort((a, b) => a.localeCompare(b));
+  }, [individuals]);
+
   // Contacts to display based on active category
   const displayedContacts = useMemo(() => {
-    if (activeCategory === "all") return individuals.filter(c => !c.isShared);
+    if (activeCategory === "all") return individuals;
+    if (activeCategory === "uncategorized") {
+      return individuals.filter(c => !c.keywords || Object.keys(c.keywords).filter(k => c.keywords![k]).length === 0);
+    }
     if ("addressBookId" in activeCategory) {
       const bookId = activeCategory.addressBookId;
       return individuals.filter(c => {
         if (!c.addressBookIds) return false;
-        // Check both namespaced (accountId:bookId) and raw bookId
-        if (c.addressBookIds[bookId]) return true;
-        // For shared contacts, match namespaced id
-        if (c.isShared && c.accountId) {
-          const namespacedId = `${c.accountId}:${Object.keys(c.addressBookIds).find(k => c.addressBookIds[k])}`;
-          return namespacedId === bookId;
-        }
-        return false;
+        return c.addressBookIds[bookId] === true;
       });
     }
+    if ("keyword" in activeCategory) {
+      return individuals.filter(c => c.keywords?.[activeCategory.keyword]);
+    }
     // Show members of the selected group
     return getGroupMembers(activeCategory.groupId);
   }, [activeCategory, individuals, getGroupMembers]);
@@ -147,10 +159,14 @@ export default function ContactsPage() {
   // 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]);
@@ -160,6 +176,7 @@ export default function ContactsPage() {
     clearSelection();
     if (typeof category === "object" && "groupId" in category) {
       setSelectedGroupId(category.groupId);
+      setView("group-detail");
     } else {
       setSelectedGroupId(null);
     }
@@ -179,6 +196,38 @@ export default function ContactsPage() {
     }
   }, [client, moveContactToAddressBook, t]);
 
+  const handleDropContactsToCategory = useCallback(async (contactIds: string[], keyword: string) => {
+    if (!client && supportsSync) return;
+    try {
+      for (const contactId of contactIds) {
+        const contact = contacts.find(c => c.id === contactId);
+        if (!contact) continue;
+        const existingKeywords = contact.keywords || {};
+        if (existingKeywords[keyword]) continue; // already has this keyword
+        const updatedKeywords = { ...existingKeywords, [keyword]: true };
+        if (supportsSync && client) {
+          await updateContact(client, contactId, { keywords: updatedKeywords });
+        } else {
+          updateLocalContact(contactId, { keywords: updatedKeywords });
+        }
+      }
+      const msg = contactIds.length === 1
+        ? t("category_added", { name: keyword })
+        : t("category_added_plural", { count: contactIds.length, name: keyword });
+      toast.success(msg);
+    } catch (error) {
+      console.error('Failed to add contacts to category:', error);
+      toast.error(t("toast.error_update"));
+    }
+  }, [client, supportsSync, contacts, updateContact, updateLocalContact, t]);
+
+  const handleImportContacts = useCallback(async (importedContacts: ContactCard[]) => {
+    return importContacts(
+      supportsSync && client ? client : null,
+      importedContacts
+    );
+  }, [supportsSync, client, importContacts]);
+
   const handleSelectContact = (id: string) => {
     setSelectedContact(id);
     clearSelection();
@@ -273,6 +322,35 @@ export default function ContactsPage() {
     setView("group-edit");
   };
 
+  const handleEditGroupFromSidebar = useCallback((groupId: string) => {
+    setSelectedGroupId(groupId);
+    setActiveCategory({ groupId });
+    setView("group-edit");
+  }, []);
+
+  const handleDeleteGroupFromSidebar = useCallback(async (groupId: string) => {
+    const confirmed = await confirmDialog({
+      title: t("groups.delete_confirm_title"),
+      message: t("groups.delete_confirm"),
+      confirmText: t("form.delete"),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+
+    try {
+      await deleteGroup(supportsSync && client ? client : null, groupId);
+      toast.success(t("toast.deleted"));
+      if (selectedGroupId === groupId) {
+        setSelectedGroupId(null);
+        setActiveCategory("all");
+        setView("list");
+      }
+    } catch (error) {
+      console.error('Failed to delete group:', error);
+      toast.error(t("toast.error_delete"));
+    }
+  }, [confirmDialog, deleteGroup, supportsSync, client, selectedGroupId, t]);
+
   const handleDeleteGroup = async () => {
     if (!selectedGroup) return;
 
@@ -391,7 +469,7 @@ export default function ContactsPage() {
   const renderRightPanel = () => {
     switch (view) {
       case "create":
-        return <ContactForm addressBooks={addressBooks} onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;
 
       case "edit":
         if (!selectedContact) return null;
@@ -399,6 +477,7 @@ export default function ContactsPage() {
           <ContactForm
             contact={selectedContact}
             addressBooks={addressBooks}
+            allKeywords={allKeywords}
             onSave={handleSaveEdit}
             onCancel={handleCancel}
           />
@@ -416,7 +495,6 @@ export default function ContactsPage() {
             isMobile={isMobile}
             onSelectMember={(id) => {
               setSelectedContact(id);
-              setActiveCategory("all");
               setView("detail");
             }}
           />
@@ -506,7 +584,7 @@ export default function ContactsPage() {
   };
 
   return (
-    <div className="flex h-dvh bg-background overflow-hidden">
+    <div className={cn("flex h-dvh bg-background overflow-hidden", isMobile && "flex-col")}>
       {/* Navigation Rail - desktop only */}
       {!isMobile && (
         <div className="w-14 bg-secondary flex flex-col flex-shrink-0" style={{ borderRight: '1px solid rgba(128, 128, 128, 0.3)' }}>
@@ -514,7 +592,7 @@ export default function ContactsPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}
@@ -548,23 +626,28 @@ export default function ContactsPage() {
                       onSelectCategory={handleSelectCategory}
                       onCreateGroup={handleCreateGroup}
                       onCreateContact={handleCreateNew}
+                      onImport={() => setShowImportDialog(true)}
+                      onEditGroup={handleEditGroupFromSidebar}
+                      onDeleteGroup={handleDeleteGroupFromSidebar}
                       onDropContacts={handleDropContacts}
+                      onDropContactsToCategory={handleDropContactsToCategory}
                     />
                   </div>
                   <ResizeHandle
                     onResizeStart={() => { sidebarDragStartWidth.current = sidebarWidth; setIsSidebarResizing(true); }}
-                    onResize={(delta) => setSidebarWidth(Math.max(140, Math.min(300, sidebarDragStartWidth.current + delta)))}
+                    onResize={(delta) => setSidebarWidth(Math.max(180, Math.min(400, sidebarDragStartWidth.current + delta)))}
                     onResizeEnd={() => {
                       setIsSidebarResizing(false);
                       localStorage.setItem("contacts-sidebar-width", String(sidebarWidth));
                     }}
-                    onDoubleClick={() => { setSidebarWidth(180); localStorage.setItem("contacts-sidebar-width", "180"); }}
+                    onDoubleClick={() => { setSidebarWidth(256); localStorage.setItem("contacts-sidebar-width", "256"); }}
                   />
                 </>
               )}
 
               {/* Panel 2: Contact list */}
               <div
+                data-tour="contacts-list"
                 className={cn(
                   "border-r border-border bg-background flex flex-col flex-shrink-0",
                   isMobile ? "w-full" : "",
@@ -642,6 +725,17 @@ export default function ContactsPage() {
 
       <SidebarAppsModal isOpen={showAppsModal} onClose={closeAppsModal} />
       <ConfirmDialog {...confirmDialogProps} />
+      {showImportDialog && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+          <div className="bg-background rounded-lg border border-border shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+            <ContactImportDialog
+              existingContacts={contacts}
+              onImport={handleImportContacts}
+              onClose={() => setShowImportDialog(false)}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/[locale]/files/page.tsx

@@ -7,7 +7,7 @@ import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
 import { useFileStore } from "@/stores/file-store";
 import { toast } from "@/stores/toast-store";
@@ -112,9 +112,9 @@ export default function FilesPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push("/login");
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   // Initialize JMAP files client
   useEffect(() => {
@@ -357,7 +357,7 @@ export default function FilesPage() {
             collapsed
             quota={quota}
             isPushConnected={isPushConnected}
-            onLogout={() => { logout(); router.push('/login'); }}
+            onLogout={logout}
             onManageApps={handleManageApps}
             onInlineApp={handleInlineApp}
             onCloseInlineApp={closeInlineApp}

app/[locale]/layout.tsx

@@ -2,6 +2,8 @@ import { notFound } from "next/navigation";
 import { IntlProvider } from "@/components/providers/intl-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { CalendarAlertProvider } from "@/components/providers/calendar-alert-provider";
+import { EmbeddedBridgeProvider } from "@/components/providers/embedded-bridge-provider";
+import { TourProvider } from "@/components/tour/tour-provider";
 import { locales } from "@/i18n/routing";
 
 export default async function LocaleLayout({
@@ -26,7 +28,11 @@ export default async function LocaleLayout({
     <IntlProvider locale={locale} messages={messages}>
       <ThemeProvider>
         <CalendarAlertProvider>
-          {children}
+          <EmbeddedBridgeProvider>
+            <TourProvider>
+              {children}
+            </TourProvider>
+          </EmbeddedBridgeProvider>
         </CalendarAlertProvider>
       </ThemeProvider>
     </IntlProvider>

app/[locale]/login/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "@/i18n/navigation";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -11,12 +11,12 @@ import { useThemeStore } from "@/stores/theme-store";
 import { useShallow } from "zustand/react/shallow";
 import { useConfig } from "@/hooks/use-config";
 import { cn } from "@/lib/utils";
-import { Mail, AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield } from "lucide-react";
+import { Mail, AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play } from "lucide-react";
 import { discoverOAuth, type OAuthMetadata } from "@/lib/oauth/discovery";
 import { generateCodeVerifier, generateCodeChallenge, generateState } from "@/lib/oauth/pkce";
 import { OAUTH_SCOPES } from "@/lib/oauth/tokens";
 
-const APP_VERSION = "1.4.2";
+const APP_VERSION = "1.4.7";
 
 const THEME_OPTIONS = [
   { value: "light" as const, icon: Sun, label: "Light" },
@@ -28,9 +28,11 @@ export default function LoginPage() {
   const router = useRouter();
   const t = useTranslations("login");
   const params = useParams();
-  const { login, isLoading, error, clearError, isAuthenticated } = useAuthStore();
+  const searchParams = useSearchParams();
+  const isAddAccountMode = searchParams.get("mode") === "add-account";
+  const { login, loginDemo, isLoading, error, clearError, isAuthenticated } = useAuthStore();
   const { theme, setTheme, initializeTheme } = useThemeStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, initializeTheme: s.initializeTheme })));
-  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError } = useConfig();
+  const { appName, jmapServerUrl: serverUrl, oauthEnabled, oauthOnly, oauthClientId, oauthIssuerUrl, rememberMeEnabled, devMode, demoMode, loginLogoLightUrl, loginLogoDarkUrl, loginCompanyName, loginImprintUrl, loginPrivacyPolicyUrl, loginWebsiteUrl, isLoading: configLoading, error: configError, autoSsoEnabled, embeddedMode: _embeddedMode } = useConfig();
   const resolvedTheme = useThemeStore((s) => s.resolvedTheme);
 
   const [formData, setFormData] = useState({
@@ -52,6 +54,7 @@ export default function LoginPage() {
   const [oauthMetadata, setOauthMetadata] = useState<OAuthMetadata | null>(null);
   const [oauthDiscoveryDone, setOauthDiscoveryDone] = useState(false);
   const [oauthLoading, setOauthLoading] = useState(false);
+  const [demoLoading, setDemoLoading] = useState(false);
 
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -102,7 +105,7 @@ export default function LoginPage() {
   }, [serverUrl]);
 
   useEffect(() => {
-    if (isAuthenticated) {
+    if (isAuthenticated && !isAddAccountMode) {
       let redirectTo = '/';
       try {
         const saved = sessionStorage.getItem('redirect_after_login');
@@ -113,7 +116,7 @@ export default function LoginPage() {
       } catch { /* ignore */ }
       router.push(redirectTo);
     }
-  }, [isAuthenticated, router]);
+  }, [isAuthenticated, router, isAddAccountMode]);
 
   useEffect(() => {
     clearError();
@@ -170,6 +173,63 @@ export default function LoginPage() {
       });
   }, [oauthEnabled, serverUrl, oauthIssuerUrl]);
 
+  // Auto-SSO: when enabled with OAUTH_ONLY, skip the login page entirely
+  const ssoError = searchParams.get("sso_error");
+  const autoSsoTriggered = useRef(false);
+
+  const startServerSideSso = useCallback(async () => {
+    setOauthLoading(true);
+    try {
+      const redirectUri = `${window.location.origin}/${params.locale}/auth/callback`;
+      const res = await fetch('/api/auth/sso/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ redirect_uri: redirectUri, locale: params.locale }),
+      });
+
+      if (!res.ok) {
+        setOauthLoading(false);
+        return;
+      }
+
+      const { authorize_url } = await res.json();
+
+      // Navigate to the authorize URL
+      const isIframe = (() => { try { return window.self !== window.top; } catch { return true; } })();
+      if (isIframe) {
+        // In an iframe, try top-level navigation
+        try {
+          window.top!.location.href = authorize_url;
+        } catch {
+          // Cross-origin restriction — fall back to current frame
+          window.location.href = authorize_url;
+        }
+      } else {
+        window.location.href = authorize_url;
+      }
+    } catch {
+      setOauthLoading(false);
+    }
+  }, [params.locale]);
+
+  useEffect(() => {
+    if (!autoSsoEnabled || !oauthOnly || !oauthDiscoveryDone || !oauthMetadata) return;
+    if (ssoError || isAddAccountMode || isAuthenticated) return;
+    if (autoSsoTriggered.current) return;
+
+    // Guard against redirect loops
+    try {
+      if (sessionStorage.getItem("sso_attempted")) return;
+      sessionStorage.setItem("sso_attempted", "1");
+      // Clear the flag after 30 seconds so retries are possible
+      setTimeout(() => { try { sessionStorage.removeItem("sso_attempted"); } catch { /* ignore */ } }, 30000);
+    } catch { /* sessionStorage unavailable */ }
+
+    autoSsoTriggered.current = true;
+    startServerSideSso();
+  }, [autoSsoEnabled, oauthOnly, oauthDiscoveryDone, oauthMetadata, ssoError, isAddAccountMode, isAuthenticated, startServerSideSso]);
+
   const handleThemeSelect = useCallback((newTheme: "light" | "dark" | "system") => {
     setTheme(newTheme);
     setShowThemeMenu(false);
@@ -204,7 +264,7 @@ export default function LoginPage() {
     );
   }
 
-  if (!serverUrl) {
+  if (!serverUrl && !demoMode) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/30">
         <div className="w-full max-w-md mx-auto px-4 text-center">
@@ -303,6 +363,9 @@ export default function LoginPage() {
     sessionStorage.setItem("oauth_code_verifier", verifier);
     sessionStorage.setItem("oauth_state", state);
     sessionStorage.setItem("oauth_server_url", serverUrl!);
+    if (isAddAccountMode) {
+      sessionStorage.setItem("oauth_add_account_mode", "true");
+    }
 
     const authUrl = new URL(oauthMetadata.authorization_endpoint);
     authUrl.searchParams.set("response_type", "code");
@@ -329,15 +392,7 @@ export default function LoginPage() {
 
     if (success) {
       saveUsername(formData.username);
-      let redirectTo = '/';
-      try {
-        const saved = sessionStorage.getItem('redirect_after_login');
-        if (saved) {
-          sessionStorage.removeItem('redirect_after_login');
-          redirectTo = saved;
-        }
-      } catch { /* ignore */ }
-      router.push(redirectTo);
+      router.push('/');
     }
   };
 
@@ -356,9 +411,167 @@ export default function LoginPage() {
     }
   };
 
+  const handleDemoLogin = async () => {
+    setDemoLoading(true);
+    const success = await loginDemo();
+    if (success) {
+      router.push('/');
+    }
+    setDemoLoading(false);
+  };
+
   const currentThemeOption = THEME_OPTIONS.find(o => o.value === theme) || THEME_OPTIONS[2];
   const CurrentThemeIcon = currentThemeOption.icon;
 
+  // Demo-only mode: show only a large demo login button
+  if (demoMode && !isAddAccountMode) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-background via-muted/10 to-muted/30 relative px-4">
+        {/* Theme toggle */}
+        <div className="absolute top-5 right-5" ref={themeMenuRef} suppressHydrationWarning>
+          <button
+            type="button"
+            onClick={() => setShowThemeMenu(!showThemeMenu)}
+            className={cn(
+              "flex items-center gap-2 px-3 py-2 rounded-xl border text-sm transition-all duration-200",
+              showThemeMenu
+                ? "bg-secondary border-border text-foreground shadow-md"
+                : "bg-background/60 backdrop-blur-sm border-border/50 text-muted-foreground hover:text-foreground hover:bg-secondary/80 hover:border-border"
+            )}
+            aria-label={`Theme: ${currentThemeOption.label}`}
+            aria-expanded={showThemeMenu}
+            aria-haspopup="listbox"
+          >
+            <CurrentThemeIcon className="w-4 h-4" />
+            <span className="hidden sm:inline" suppressHydrationWarning>{currentThemeOption.label}</span>
+          </button>
+
+          {showThemeMenu && (
+            <div
+              className="absolute right-0 top-full mt-2 w-40 rounded-xl border border-border bg-background shadow-lg overflow-hidden animate-fade-in z-50"
+              role="listbox"
+              aria-label="Theme selection"
+            >
+              {THEME_OPTIONS.map((option) => {
+                const Icon = option.icon;
+                const isActive = theme === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    role="option"
+                    aria-selected={isActive}
+                    onClick={() => handleThemeSelect(option.value)}
+                    className={cn(
+                      "w-full flex items-center gap-3 px-3.5 py-2.5 text-sm transition-colors",
+                      isActive
+                        ? "bg-primary/10 text-foreground font-medium"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                    )}
+                  >
+                    <Icon className="w-4 h-4" />
+                    <span className="flex-1 text-left">{option.label}</span>
+                    {isActive && <Check className="w-3.5 h-3.5 text-primary" />}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        <div className="w-full max-w-[440px] mx-auto">
+          <div className="rounded-2xl border border-border/60 bg-background/80 backdrop-blur-sm shadow-xl shadow-black/5 dark:shadow-black/20 overflow-hidden">
+            {/* Header with logo */}
+            <div className="px-8 pt-12 pb-4 text-center">
+              <div className="inline-flex items-center justify-center w-20 h-20 mb-6">
+                <img
+                  src={resolvedTheme === 'dark' ? loginLogoDarkUrl : loginLogoLightUrl}
+                  alt={appName}
+                  className="max-w-20 max-h-20 object-contain"
+                />
+              </div>
+              <h1 className="text-3xl font-bold text-foreground tracking-tight">
+                {appName}
+              </h1>
+              <p className="text-base text-muted-foreground mt-2 max-w-xs mx-auto leading-relaxed">
+                {t("demo_tagline")}
+              </p>
+            </div>
+
+            {/* Large demo button */}
+            <div className="px-8 pb-10 pt-4">
+              {error && (
+                <div className={cn(
+                  "mb-5 p-3.5 bg-red-500/10 border border-red-500/20 rounded-xl flex items-start gap-3",
+                  shakeError && "animate-shake"
+                )}>
+                  <AlertCircle className="w-4.5 h-4.5 text-red-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-red-600 dark:text-red-400 leading-relaxed">
+                    {t(`error.${error}`) || t("error.generic")}
+                  </p>
+                </div>
+              )}
+
+              <Button
+                type="button"
+                className="w-full h-14 font-semibold text-lg bg-primary hover:bg-primary/90 transition-all duration-200 rounded-xl shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:scale-[1.02] active:scale-[0.98]"
+                onClick={handleDemoLogin}
+                disabled={demoLoading || isLoading}
+              >
+                {demoLoading ? (
+                  <div className="flex items-center gap-3">
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    {t("demo_launching")}
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-3">
+                    <Play className="w-5 h-5" />
+                    {t("demo_login_button")}
+                  </div>
+                )}
+              </Button>
+
+              <p className="text-center text-sm text-muted-foreground mt-4 leading-relaxed">
+                {t("demo_no_signup")}
+              </p>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="mt-6 flex flex-col items-center gap-2">
+            {loginCompanyName && (
+              <p className="text-center text-xs text-muted-foreground/60 font-medium">
+                {loginCompanyName}
+              </p>
+            )}
+            {(loginImprintUrl || loginPrivacyPolicyUrl || loginWebsiteUrl) && (
+              <div className="flex items-center gap-3 flex-wrap justify-center">
+                {loginWebsiteUrl && (
+                  <a href={loginWebsiteUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors">
+                    {t("website")}
+                  </a>
+                )}
+                {loginImprintUrl && (
+                  <a href={loginImprintUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors">
+                    {t("imprint")}
+                  </a>
+                )}
+                {loginPrivacyPolicyUrl && (
+                  <a href={loginPrivacyPolicyUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors">
+                    {t("privacy_policy")}
+                  </a>
+                )}
+              </div>
+            )}
+            <p className="text-center text-xs text-muted-foreground/40">
+              v{APP_VERSION}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-background via-muted/10 to-muted/30 relative px-4">
       {/* Theme toggle - top right, dropdown style */}
@@ -426,10 +639,10 @@ export default function LoginPage() {
               />
             </div>
             <h1 className="text-2xl font-semibold text-foreground tracking-tight">
-              {appName}
+              {isAddAccountMode ? t("add_account_title") : appName}
             </h1>
             <p className="text-sm text-muted-foreground mt-1.5">
-              {t("title") !== appName ? t("title") : "Sign in to your account"}
+              {isAddAccountMode ? t("add_account_subtitle") : (t("title") !== appName ? t("title") : "Sign in to your account")}
             </p>
           </div>
 
@@ -737,6 +950,47 @@ export default function LoginPage() {
                 )}
               </form>
             )}
+
+            {isAddAccountMode && (
+              <div className="mt-4">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="w-full h-10 text-sm text-muted-foreground hover:text-foreground"
+                  onClick={() => router.push('/')}
+                >
+                  {t("cancel")}
+                </Button>
+              </div>
+            )}
+
+            {/* Demo Mode Button */}
+            {demoMode && !isAddAccountMode && (
+              <div className="mt-4 pt-4 border-t border-border/40">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full h-11 font-medium text-[15px] rounded-xl border-border/60 hover:bg-muted/50"
+                  onClick={handleDemoLogin}
+                  disabled={demoLoading || isLoading}
+                >
+                  {demoLoading ? (
+                    <div className="flex items-center gap-2">
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                      {t("demo_launching")}
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      <Play className="w-4 h-4" />
+                      {t("try_demo")}
+                    </div>
+                  )}
+                </Button>
+                <p className="text-center text-xs text-muted-foreground mt-2">
+                  {t("demo_description")}
+                </p>
+              </div>
+            )}
           </div>
         </div>
 

app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState, useRef, useMemo, useCallback } from "react";
-import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Sidebar } from "@/components/layout/sidebar";
 import { EmailList } from "@/components/email/email-list";
@@ -13,7 +12,7 @@ import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-hea
 import { ThreadGroup, Email } from "@/lib/jmap/types";
 import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
 import { useEmailStore } from "@/stores/email-store";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { useUIStore } from "@/stores/ui-store";
@@ -41,13 +40,13 @@ import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 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 { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 import { useConfig } from "@/hooks/use-config";
 
 export default function Home() {
-  const router = useRouter();
   const t = useTranslations();
   const tCommon = useTranslations('common');
   const { appName } = useConfig();
@@ -284,9 +283,9 @@ export default function Home() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push('/login');
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   // Load mailboxes and emails when authenticated (only if not already loaded)
   useEffect(() => {
@@ -767,10 +766,7 @@ export default function Home() {
     }
   };
 
-  const handleLogout = () => {
-    logout();
-    router.push('/login');
-  };
+  const handleLogout = logout;
 
   const handleSearch = async (query: string) => {
     if (!client) return;
@@ -813,13 +809,13 @@ export default function Home() {
     };
   }, []);
 
-  const handleDownloadAttachment = async (blobId: string, name: string, type?: string) => {
+  const handleDownloadAttachment = async (blobId: string, name: string, type?: string, forceDownload?: boolean) => {
     if (!client) return;
 
     try {
       const { mailAttachmentAction } = useSettingsStore.getState();
 
-      if (mailAttachmentAction === 'preview' && isFilePreviewable(name, type)) {
+      if (!forceDownload && mailAttachmentAction === 'preview' && isFilePreviewable(name, type)) {
         setPreviewAttachment({ blobId, name, type });
         return;
       }
@@ -860,10 +856,7 @@ export default function Home() {
     const primaryIdentity = identities[0];
 
     // Append signature from the primary identity
-    let finalBody = body;
-    if (primaryIdentity?.textSignature) {
-      finalBody = body + '\n\n-- \n' + primaryIdentity.textSignature;
-    }
+    const finalBody = appendPlainTextSignature(body, primaryIdentity);
 
     // Send reply with just the body text
     await sendEmail(
@@ -1020,6 +1013,10 @@ export default function Home() {
     </button>
   );
 
+  if (!isAuthenticated) {
+    return null;
+  }
+
   return (
     <DragDropProvider>
       <div className="flex flex-col h-dvh bg-background overflow-hidden">
@@ -1170,6 +1167,7 @@ export default function Home() {
                       onChange={(e) => setSearchQuery(e.target.value)}
                       className={cn("pl-9 h-9", searchQuery && "pr-8")}
                       data-search-input
+                      data-tour="search-input"
                     />
                     {searchQuery && (
                       <button
@@ -1575,8 +1573,8 @@ export default function Home() {
                     onNavigatePrev={handleNavigatePrev}
                     onShowShortcuts={() => setShowShortcutsModal(true)}
                     onEditDraft={handleEditDraft}
-                    currentUserEmail={client?.["username"]}
-                    currentUserName={client?.["username"]?.split("@")[0]}
+                    currentUserEmail={client?.getUsername()}
+                    currentUserName={client?.getUsername()?.split("@")[0]}
                     currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
                     mailboxes={mailboxes}
                     selectedMailbox={selectedMailbox}

app/[locale]/settings/page.tsx

@@ -44,7 +44,7 @@ import { FilesSettingsComponent } from '@/components/settings/files-settings';
 import { ContactsSettings } from '@/components/settings/contacts-settings';
 import { SmimeSettings } from '@/components/settings/smime-settings';
 import { SidebarAppsSettings } from '@/components/settings/sidebar-apps-settings';
-import { useAuthStore } from '@/stores/auth-store';
+import { useAuthStore, redirectToLogin } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
 import { useIsDesktop } from '@/hooks/use-media-query';
 import { NavigationRail } from '@/components/layout/navigation-rail';
@@ -122,9 +122,9 @@ export default function SettingsPage() {
   useEffect(() => {
     if (initialCheckDone && !isAuthenticated && !authLoading) {
       try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
-      router.push('/login');
+      redirectToLogin();
     }
-  }, [initialCheckDone, isAuthenticated, authLoading, router]);
+  }, [initialCheckDone, isAuthenticated, authLoading]);
 
   if (!isAuthenticated) {
     return null;
@@ -286,7 +286,7 @@ export default function SettingsPage() {
           {/* Logout */}
           <div className="border-t border-border px-5 py-3">
             <button
-              onClick={() => { logout(); router.push('/login'); }}
+              onClick={logout}
               className="w-full flex items-center gap-3 py-2.5 text-sm text-destructive hover:bg-muted rounded-md px-2 transition-colors duration-150"
             >
               <LogOut className="w-4 h-4" />
@@ -317,7 +317,7 @@ export default function SettingsPage() {
           collapsed
           quota={quota}
           isPushConnected={isPushConnected}
-          onLogout={() => { logout(); router.push('/login'); }}
+          onLogout={logout}
           onManageApps={handleManageApps}
           onInlineApp={handleInlineApp}
           onCloseInlineApp={closeInlineApp}
@@ -352,7 +352,7 @@ export default function SettingsPage() {
         </div>
 
         {/* Tabs */}
-        <div className="flex-1 overflow-y-auto py-2">
+        <div className="flex-1 overflow-y-auto py-2" data-tour="settings-tabs">
           <div className="px-2 space-y-0.5">
             {groupedTabs.map((group, groupIndex) => (
               <div key={group.group}>

app/api/auth/session/route.ts

@@ -2,30 +2,38 @@ import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { encryptSession, decryptSession } from '@/lib/auth/crypto';
-import { SESSION_COOKIE, SESSION_COOKIE_MAX_AGE } from '@/lib/auth/session-cookie';
+import { SESSION_COOKIE_MAX_AGE, sessionCookieName } from '@/lib/auth/session-cookie';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
 
 const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
+  ...getCookieOptions(),
   maxAge: SESSION_COOKIE_MAX_AGE,
 };
 
+function getSlot(request: NextRequest): number {
+  const raw = request.nextUrl.searchParams.get('slot');
+  if (raw === null) return 0;
+  const slot = parseInt(raw, 10);
+  if (isNaN(slot) || slot < 0 || slot > 4) return 0;
+  return slot;
+}
+
 export async function POST(request: NextRequest) {
   try {
     if (process.env.OAUTH_ENABLED === 'true' && process.env.OAUTH_ONLY === 'true') {
       return NextResponse.json({ error: 'Basic authentication is disabled' }, { status: 403 });
     }
 
-    const { serverUrl, username, password } = await request.json();
+    const { serverUrl, username, password, slot: bodySlot } = await request.json();
     if (!serverUrl || !username || !password) {
       return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
     }
 
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
+    const cookieName = sessionCookieName(slot);
     const token = encryptSession(serverUrl, username, password);
     const cookieStore = await cookies();
-    cookieStore.set(SESSION_COOKIE, token, COOKIE_OPTIONS);
+    cookieStore.set(cookieName, token, COOKIE_OPTIONS);
 
     return NextResponse.json({ ok: true });
   } catch (error) {
@@ -34,10 +42,12 @@ export async function POST(request: NextRequest) {
   }
 }
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   try {
+    const slot = getSlot(request);
+    const cookieName = sessionCookieName(slot);
     const cookieStore = await cookies();
-    const token = cookieStore.get(SESSION_COOKIE)?.value;
+    const token = cookieStore.get(cookieName)?.value;
 
     if (!token) {
       return NextResponse.json({ error: 'No session' }, { status: 401 });
@@ -45,7 +55,7 @@ export async function GET() {
 
     const credentials = decryptSession(token);
     if (!credentials) {
-      cookieStore.delete(SESSION_COOKIE);
+      cookieStore.delete(cookieName);
       return NextResponse.json({ error: 'Invalid session' }, { status: 401 });
     }
 
@@ -58,10 +68,21 @@ export async function GET() {
   }
 }
 
-export async function DELETE() {
+export async function DELETE(request: NextRequest) {
   try {
     const cookieStore = await cookies();
-    cookieStore.delete(SESSION_COOKIE);
+    const all = request.nextUrl.searchParams.get('all') === 'true';
+
+    if (all) {
+      // Delete all session cookies (slots 0-4)
+      for (let i = 0; i <= 4; i++) {
+        cookieStore.delete(sessionCookieName(i));
+      }
+    } else {
+      const slot = getSlot(request);
+      cookieStore.delete(sessionCookieName(slot));
+    }
+
     return NextResponse.json({ ok: true });
   } catch (error) {
     logger.error('Session clear error', { error: error instanceof Error ? error.message : 'Unknown error' });

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

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { decryptPayload } from '@/lib/auth/crypto';
+import { exchangeCodeForTokens } from '@/lib/oauth/token-exchange';
+import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
+
+const SSO_PENDING_COOKIE = 'sso_pending';
+const SSO_PENDING_MAX_AGE_MS = 5 * 60 * 1000; // 5 minutes
+
+export async function POST(request: NextRequest) {
+  const cookieStore = await cookies();
+
+  try {
+    const { code, state } = await request.json();
+
+    if (!code || !state) {
+      return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
+    }
+
+    // Read and decrypt the pending SSO cookie
+    const pendingCookie = cookieStore.get(SSO_PENDING_COOKIE)?.value;
+    if (!pendingCookie) {
+      logger.warn('SSO complete: no pending cookie found');
+      return NextResponse.json({ error: 'No pending SSO session. Please start the login flow again.' }, { status: 400 });
+    }
+
+    const pending = decryptPayload(pendingCookie);
+    if (!pending) {
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'Invalid SSO session' }, { status: 400 });
+    }
+
+    // Validate state
+    if (pending.state !== state) {
+      logger.warn('SSO complete: state mismatch');
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'State mismatch' }, { status: 400 });
+    }
+
+    // Validate TTL
+    const createdAt = pending.created_at as number;
+    if (!createdAt || Date.now() - createdAt > SSO_PENDING_MAX_AGE_MS) {
+      logger.warn('SSO complete: pending session expired');
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'SSO session expired. Please try again.' }, { status: 400 });
+    }
+
+    const codeVerifier = pending.code_verifier as string;
+    const redirectUri = pending.redirect_uri as string;
+
+    if (!codeVerifier || !redirectUri) {
+      cookieStore.delete(SSO_PENDING_COOKIE);
+      return NextResponse.json({ error: 'Invalid SSO session data' }, { status: 400 });
+    }
+
+    // Exchange code for tokens
+    const tokens = await exchangeCodeForTokens(code, codeVerifier, redirectUri);
+
+    // Store refresh token
+    if (tokens.refresh_token) {
+      const cookieName = refreshTokenCookieName(0);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
+    }
+
+    // Delete pending cookie
+    cookieStore.delete(SSO_PENDING_COOKIE);
+
+    return NextResponse.json({
+      access_token: tokens.access_token,
+      expires_in: tokens.expires_in,
+    });
+  } catch (error) {
+    // Clean up pending cookie on any error
+    cookieStore.delete(SSO_PENDING_COOKIE);
+    logger.error('SSO complete error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Token exchange failed' }, { status: 401 });
+  }
+}

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

@@ -0,0 +1,88 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { logger } from '@/lib/logger';
+import { encryptPayload } from '@/lib/auth/crypto';
+import { generateCodeVerifierServer, generateCodeChallengeServer, generateStateServer } from '@/lib/oauth/pkce-server';
+import { getRequiredConfig } from '@/lib/oauth/token-exchange';
+import { discoverOAuth } from '@/lib/oauth/discovery';
+import { OAUTH_SCOPES } from '@/lib/oauth/tokens';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
+
+const SSO_PENDING_COOKIE = 'sso_pending';
+const SSO_PENDING_MAX_AGE = 300; // 5 minutes
+
+export async function POST(request: NextRequest) {
+  try {
+    if (!process.env.SESSION_SECRET) {
+      return NextResponse.json({ error: 'SESSION_SECRET is required for SSO' }, { status: 500 });
+    }
+
+    const { redirect_uri, locale } = await request.json();
+
+    if (!redirect_uri || typeof redirect_uri !== 'string') {
+      return NextResponse.json({ error: 'Missing redirect_uri' }, { status: 400 });
+    }
+
+    // Validate redirect_uri origin matches the request origin to prevent open redirects
+    const requestOrigin = request.headers.get('origin') || request.nextUrl.origin;
+    try {
+      const redirectOrigin = new URL(redirect_uri).origin;
+      if (redirectOrigin !== requestOrigin) {
+        logger.warn('SSO start: redirect_uri origin mismatch', { redirectOrigin, requestOrigin });
+        return NextResponse.json({ error: 'Invalid redirect_uri' }, { status: 400 });
+      }
+    } catch {
+      return NextResponse.json({ error: 'Invalid redirect_uri' }, { status: 400 });
+    }
+
+    const { clientId, discoveryUrl } = getRequiredConfig();
+    const metadata = await discoverOAuth(discoveryUrl);
+
+    if (!metadata?.authorization_endpoint) {
+      return NextResponse.json({ error: 'OAuth discovery failed' }, { status: 502 });
+    }
+
+    // Generate PKCE + state server-side
+    const codeVerifier = generateCodeVerifierServer();
+    const codeChallenge = generateCodeChallengeServer(codeVerifier);
+    const state = generateStateServer();
+
+    // Encrypt and store in httpOnly cookie
+    const pendingData = {
+      state,
+      code_verifier: codeVerifier,
+      redirect_uri,
+      created_at: Date.now(),
+    };
+
+    const encrypted = encryptPayload(pendingData);
+    const cookieStore = await cookies();
+    const baseCookieOpts = getCookieOptions();
+    cookieStore.set(SSO_PENDING_COOKIE, encrypted, {
+      ...baseCookieOpts,
+      maxAge: SSO_PENDING_MAX_AGE,
+    });
+
+    // Build authorize URL
+    const authUrl = new URL(metadata.authorization_endpoint);
+    authUrl.searchParams.set('response_type', 'code');
+    authUrl.searchParams.set('client_id', clientId);
+    authUrl.searchParams.set('redirect_uri', redirect_uri);
+    authUrl.searchParams.set('scope', OAUTH_SCOPES);
+    authUrl.searchParams.set('state', state);
+    authUrl.searchParams.set('code_challenge', codeChallenge);
+    authUrl.searchParams.set('code_challenge_method', 'S256');
+
+    if (locale) {
+      authUrl.searchParams.set('ui_locales', locale);
+    }
+
+    return NextResponse.json({
+      authorize_url: authUrl.toString(),
+      state,
+    });
+  } catch (error) {
+    logger.error('SSO start error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}

app/api/auth/token/route.ts

@@ -1,100 +1,39 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
-import { discoverOAuth } from '@/lib/oauth/discovery';
-import { REFRESH_TOKEN_COOKIE } from '@/lib/oauth/tokens';
+import { refreshTokenCookieName } from '@/lib/oauth/tokens';
+import { exchangeCodeForTokens, buildOAuthParams, getMetadata, getTokenEndpoint } from '@/lib/oauth/token-exchange';
+import { getCookieOptions } from '@/lib/oauth/cookie-config';
 
-const CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET || '';
-
-const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  path: '/',
-  maxAge: 30 * 24 * 60 * 60,
-};
-
-function getRequiredConfig() {
-  const clientId = process.env.OAUTH_CLIENT_ID;
-  const serverUrl = process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
-  const issuerUrl = process.env.OAUTH_ISSUER_URL;
-  if (!clientId || !serverUrl) {
-    throw new Error(`OAuth misconfigured: ${[!clientId && 'OAUTH_CLIENT_ID', !serverUrl && 'JMAP_SERVER_URL'].filter(Boolean).join(', ')} not set`);
-  }
-  const discoveryUrl = issuerUrl?.trim() || serverUrl;
-  if (issuerUrl !== undefined && !issuerUrl.trim()) {
-    logger.warn('OAUTH_ISSUER_URL is set but empty, falling back to JMAP_SERVER_URL for discovery');
-  }
-  return { clientId, serverUrl, discoveryUrl };
-}
-
-async function getTokenEndpoint(): Promise<string> {
-  const { discoveryUrl } = getRequiredConfig();
-  const metadata = await discoverOAuth(discoveryUrl);
-  if (!metadata?.token_endpoint) {
-    throw new Error('OAuth token endpoint not found');
-  }
-  return metadata.token_endpoint;
-}
-
-async function getMetadata(): Promise<import('@/lib/oauth/discovery').OAuthMetadata | null> {
-  const { discoveryUrl } = getRequiredConfig();
-  return discoverOAuth(discoveryUrl);
-}
-
-function buildOAuthParams(base: Record<string, string>): URLSearchParams {
-  const { clientId } = getRequiredConfig();
-  const params = new URLSearchParams({ ...base, client_id: clientId });
-  if (CLIENT_SECRET) {
-    params.set('client_secret', CLIENT_SECRET);
-  }
-  return params;
+function getSlot(request: NextRequest): number {
+  const raw = request.nextUrl.searchParams.get('slot');
+  if (raw === null) return 0;
+  const slot = parseInt(raw, 10);
+  if (isNaN(slot) || slot < 0 || slot > 4) return 0;
+  return slot;
 }
 
 export async function POST(request: NextRequest) {
   try {
-    const { code, code_verifier, redirect_uri } = await request.json();
+    const { code, code_verifier, redirect_uri, slot: bodySlot } = await request.json();
 
     if (!code || !code_verifier || !redirect_uri) {
       return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
     }
 
-    const tokenEndpoint = await getTokenEndpoint();
+    const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot <= 4 ? bodySlot : getSlot(request);
 
-    const params = buildOAuthParams({
-      grant_type: 'authorization_code',
-      code,
-      redirect_uri,
-      code_verifier,
-    });
-
-    const tokenResponse = await fetch(tokenEndpoint, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: params.toString(),
-    });
-
-    if (!tokenResponse.ok) {
-      const errorText = await tokenResponse.text();
-      logger.error('Token exchange failed', { status: tokenResponse.status, error: errorText });
-      return NextResponse.json({ error: 'Token exchange failed' }, { status: 401 });
-    }
-
-    const tokens = await tokenResponse.json();
-
-    if (!tokens.access_token) {
-      logger.error('Token response missing access_token', { response: JSON.stringify(tokens).substring(0, 500) });
-      return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
-    }
+    const tokens = await exchangeCodeForTokens(code, code_verifier, redirect_uri);
 
     const response = NextResponse.json({
       access_token: tokens.access_token,
-      expires_in: tokens.expires_in || 3600,
+      expires_in: tokens.expires_in,
     });
 
     if (tokens.refresh_token) {
+      const cookieName = refreshTokenCookieName(slot);
       const cookieStore = await cookies();
-      cookieStore.set(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
     }
 
     return response;
@@ -104,10 +43,12 @@ export async function POST(request: NextRequest) {
   }
 }
 
-export async function PUT() {
+export async function PUT(request: NextRequest) {
   try {
+    const slot = getSlot(request);
+    const cookieName = refreshTokenCookieName(slot);
     const cookieStore = await cookies();
-    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+    const refreshToken = cookieStore.get(cookieName)?.value;
 
     if (!refreshToken) {
       return NextResponse.json({ error: 'No refresh token' }, { status: 401 });
@@ -129,7 +70,7 @@ export async function PUT() {
     if (!tokenResponse.ok) {
       const errorText = await tokenResponse.text();
       logger.error('Token refresh failed', { status: tokenResponse.status, error: errorText });
-      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+      cookieStore.delete(cookieName);
       return NextResponse.json({ error: 'Refresh failed' }, { status: 401 });
     }
 
@@ -141,7 +82,7 @@ export async function PUT() {
     }
 
     if (tokens.refresh_token) {
-      cookieStore.set(REFRESH_TOKEN_COOKIE, tokens.refresh_token, COOKIE_OPTIONS);
+      cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
     }
 
     return NextResponse.json({
@@ -154,10 +95,39 @@ export async function PUT() {
   }
 }
 
-export async function DELETE() {
+export async function DELETE(request: NextRequest) {
   try {
+    const all = request.nextUrl.searchParams.get('all') === 'true';
+
+    if (all) {
+      // Revoke and delete all refresh token cookies (slots 0-4)
+      const cookieStore = await cookies();
+      for (let i = 0; i <= 4; i++) {
+        const name = refreshTokenCookieName(i);
+        const token = cookieStore.get(name)?.value;
+        if (token) {
+          // Best-effort revocation
+          try {
+            const metadata = await getMetadata().catch(() => null);
+            if (metadata?.revocation_endpoint) {
+              const params = buildOAuthParams({ token, token_type_hint: 'refresh_token' });
+              await fetch(metadata.revocation_endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: params.toString(),
+              }).catch(() => {});
+            }
+          } catch { /* best effort */ }
+          cookieStore.delete(name);
+        }
+      }
+      return NextResponse.json({ ok: true });
+    }
+
+    const slot = getSlot(request);
+    const cookieName = refreshTokenCookieName(slot);
     const cookieStore = await cookies();
-    const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE)?.value;
+    const refreshToken = cookieStore.get(cookieName)?.value;
     const metadata = await getMetadata().catch((err) => {
       logger.warn('Failed to discover OAuth metadata during logout', {
         error: err instanceof Error ? err.message : 'Unknown error',
@@ -186,7 +156,7 @@ export async function DELETE() {
         }
       }
 
-      cookieStore.delete(REFRESH_TOKEN_COOKIE);
+      cookieStore.delete(cookieName);
     }
 
     let end_session_url: string | undefined;

app/api/caldav/discover/route.ts

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

app/api/config/route.ts

@@ -35,5 +35,9 @@ export async function GET() {
     loginImprintUrl: process.env.LOGIN_IMPRINT_URL || '',
     loginPrivacyPolicyUrl: process.env.LOGIN_PRIVACY_POLICY_URL || '',
     loginWebsiteUrl: process.env.LOGIN_WEBSITE_URL || '',
+    demoMode: process.env.DEMO_MODE === 'true',
+    autoSsoEnabled: process.env.AUTO_SSO_ENABLED === 'true',
+    embeddedMode: !!process.env.ALLOWED_FRAME_ANCESTORS && process.env.ALLOWED_FRAME_ANCESTORS !== "'none'",
+    parentOrigin: process.env.NEXT_PUBLIC_PARENT_ORIGIN || '',
   });
 }

app/api/health/route.ts

@@ -1,10 +1,21 @@
+import v8 from 'node:v8';
 import { NextResponse } from 'next/server';
 import { NextRequest } from 'next/server';
 import { logger } from '@/lib/logger';
 
-// Health check thresholds
-const MEMORY_WARNING_THRESHOLD = 0.85; // 85% heap usage
-const MEMORY_CRITICAL_THRESHOLD = 0.95; // 95% heap usage
+const MEMORY_WARNING_THRESHOLD = 0.85;
+const MEMORY_CRITICAL_THRESHOLD = 0.95;
+
+function getHeapUsagePercent(heapUsed: number, heapTotal: number): number {
+  const heapSizeLimit = v8.getHeapStatistics().heap_size_limit;
+  const denominator = heapSizeLimit > 0 ? heapSizeLimit : heapTotal;
+
+  if (denominator <= 0) {
+    return 0;
+  }
+
+  return (heapUsed / denominator) * 100;
+}
 
 interface HealthStatus {
   status: 'healthy' | 'degraded' | 'unhealthy';
@@ -14,6 +25,7 @@ interface HealthStatus {
   memory?: {
     heapUsed: number;
     heapTotal: number;
+    heapSizeLimit: number;
     rss: number;
     external: number;
     heapUsagePercent: number;
@@ -27,14 +39,9 @@ interface HealthStatus {
 /**
  * Health check endpoint for container orchestration
  *
- * GET /api/health - Basic health check (returns 200 OK or 503 Service Unavailable)
- * GET /api/health?detailed=true - Detailed diagnostics with memory stats
- * HEAD /api/health - Lightweight health check (status code only)
- *
- * Health status based on Node.js heap usage:
- * - Healthy (200): < 85% heap usage
- * - Degraded (200): 85-95% heap usage (warnings in detailed mode)
- * - Unhealthy (503): > 95% heap usage
+ * GET /api/health - Liveness probe for container orchestration
+ * GET /api/health?detailed=true - Diagnostics with advisory memory warnings
+ * HEAD /api/health - Lightweight liveness probe (status code only)
  */
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
@@ -43,38 +50,31 @@ export async function GET(request: NextRequest) {
   try {
     const timestamp = new Date().toISOString();
     const memUsage = process.memoryUsage();
-    const heapUsagePercent = (memUsage.heapUsed / memUsage.heapTotal) * 100;
-
-    // Determine health status based on memory usage
+    const heapSizeLimit = v8.getHeapStatistics().heap_size_limit;
+    const heapUsagePercent = getHeapUsagePercent(memUsage.heapUsed, memUsage.heapTotal);
     let status: 'healthy' | 'degraded' | 'unhealthy' = 'healthy';
     const warnings: string[] = [];
-    let httpStatus = 200;
 
     if (heapUsagePercent >= MEMORY_CRITICAL_THRESHOLD * 100) {
-      status = 'unhealthy';
-      httpStatus = 503;
+      status = 'degraded';
+      warnings.push(`V8 heap usage is very high: ${heapUsagePercent.toFixed(1)}% of heap limit`);
     } else if (heapUsagePercent >= MEMORY_WARNING_THRESHOLD * 100) {
       status = 'degraded';
-      warnings.push(`Memory usage high: ${heapUsagePercent.toFixed(1)}%`);
+      warnings.push(`V8 heap usage is high: ${heapUsagePercent.toFixed(1)}% of heap limit`);
     }
 
-    // Build response
     const response: HealthStatus = {
-      status,
+      status: detailed ? status : 'healthy',
       timestamp,
     };
 
-    if (status === 'unhealthy') {
-      response.reason = `Memory usage critical: ${heapUsagePercent.toFixed(1)}%`;
-    }
-
-    // Add detailed information if requested
     if (detailed) {
       response.uptime = process.uptime();
       response.version = process.env.npm_package_version || '0.1.0';
       response.memory = {
         heapUsed: memUsage.heapUsed,
         heapTotal: memUsage.heapTotal,
+        heapSizeLimit,
         rss: memUsage.rss,
         external: memUsage.external,
         heapUsagePercent: Number(heapUsagePercent.toFixed(2)),
@@ -87,10 +87,8 @@ export async function GET(request: NextRequest) {
       }
     }
 
-    logger.info('Health check', { status, detailed });
-
     return NextResponse.json(response, {
-      status: httpStatus,
+      status: 200,
       headers: {
         'Cache-Control': 'no-store, no-cache, must-revalidate',
         'Pragma': 'no-cache',
@@ -116,13 +114,6 @@ export async function GET(request: NextRequest) {
  */
 export async function HEAD() {
   try {
-    const memUsage = process.memoryUsage();
-    const heapUsagePercent = (memUsage.heapUsed / memUsage.heapTotal) * 100;
-
-    if (heapUsagePercent >= MEMORY_CRITICAL_THRESHOLD * 100) {
-      return new Response(null, { status: 503 });
-    }
-
     return new Response(null, { status: 200 });
   } catch {
     return new Response(null, { status: 503 });

app/api/settings/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { logger } from '@/lib/logger';
 import { decryptSession } from '@/lib/auth/crypto';
-import { SESSION_COOKIE } from '@/lib/auth/session-cookie';
+import { sessionCookieName } from '@/lib/auth/session-cookie';
 import { saveUserSettings, loadUserSettings, deleteUserSettings } from '@/lib/settings-sync';
 
 function isEnabled(): boolean {
@@ -10,19 +10,30 @@ function isEnabled(): boolean {
 }
 
 /**
- * Verify identity against the session cookie if available.
- * Returns true if no session cookie exists (can't verify) or if identity matches.
- * Returns false if session cookie exists but identity doesn't match.
+ * Verify identity against session cookies across all account slots.
+ * With multi-account, the requesting account may be on any slot (0-4).
+ * Returns true if any slot matches OR if no session cookies exist at all.
  */
 async function verifyIdentity(username: string, serverUrl: string): Promise<boolean> {
   const cookieStore = await cookies();
-  const sessionToken = cookieStore.get(SESSION_COOKIE)?.value;
-  if (!sessionToken) return true; // No session cookie, can't verify (same-origin protection applies)
+  let hasAnyCookie = false;
 
-  const session = decryptSession(sessionToken);
-  if (!session) return true; // Invalid session cookie, skip verification
+  for (let slot = 0; slot <= 4; slot++) {
+    const token = cookieStore.get(sessionCookieName(slot))?.value;
+    if (!token) continue;
+    hasAnyCookie = true;
 
-  return session.username === username && session.serverUrl === serverUrl;
+    const session = decryptSession(token);
+    if (session && session.username === username && session.serverUrl === serverUrl) {
+      return true; // Found a matching slot
+    }
+  }
+
+  // No cookies at all → can't verify, allow (same-origin protection applies)
+  if (!hasAnyCookie) return true;
+
+  // Cookies exist but none matched → identity mismatch
+  return false;
 }
 
 export async function GET(request: NextRequest) {
@@ -47,7 +58,9 @@ export async function GET(request: NextRequest) {
     }
     return NextResponse.json({ settings });
   } catch (error) {
-    logger.error('Settings load error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    const code = (error as NodeJS.ErrnoException).code;
+    logger.error('Settings load error', { error: message, code });
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
   }
 }
@@ -74,7 +87,9 @@ export async function POST(request: NextRequest) {
     await saveUserSettings(username, serverUrl, settings);
     return NextResponse.json({ ok: true });
   } catch (error) {
-    logger.error('Settings save error', { error: error instanceof Error ? error.message : 'Unknown error' });
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    const code = (error as NodeJS.ErrnoException).code;
+    logger.error('Settings save error', { error: message, code });
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
   }
 }

app/globals.css

@@ -20,6 +20,8 @@
   --color-accent-foreground: #1e40af;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #ffffff;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
 
   /* Settings variables */
   --font-size-base: 16px;
@@ -50,6 +52,8 @@
   --color-accent-foreground: #dbeafe;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #fafafa;
+  --color-popover: #1c1c1c;
+  --color-popover-foreground: #fafafa;
 }
 
 @theme inline {
@@ -68,6 +72,8 @@
   --color-accent-foreground: var(--color-accent-foreground);
   --color-destructive: var(--color-destructive);
   --color-destructive-foreground: var(--color-destructive-foreground);
+  --color-popover: var(--color-popover);
+  --color-popover-foreground: var(--color-popover-foreground);
 }
 
 * {
@@ -490,3 +496,95 @@ body {
     -webkit-backdrop-filter: none !important;
   }
 }
+
+/* TipTap Rich Text Editor */
+.tiptap {
+  outline: none;
+}
+
+.tiptap p {
+  margin: 0.25rem 0;
+}
+
+.tiptap h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0.5rem 0;
+}
+
+.tiptap h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25rem 0;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25rem 0;
+}
+
+.tiptap li {
+  margin: 0.125rem 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid var(--color-border);
+  padding-left: 1rem;
+  margin: 0.5rem 0;
+  color: var(--color-muted-foreground);
+}
+
+.tiptap pre {
+  background-color: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+
+.tiptap code {
+  background-color: var(--color-muted);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.tiptap a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.tiptap img {
+  max-width: 100%;
+  height: auto;
+}
+
+.tiptap hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1rem 0;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-muted-foreground);
+  pointer-events: none;
+  height: 0;
+}
+
+.tiptap .ProseMirror-selectednode img {
+  outline: none;
+}

app/layout.tsx

@@ -31,10 +31,14 @@ export default async function RootLayout({
 }) {
   const locale = await getLocale();
   const nonce = (await headers()).get("x-nonce") ?? "";
+  const parentOrigin = process.env.NEXT_PUBLIC_PARENT_ORIGIN || "";
 
   return (
     <html lang={locale} suppressHydrationWarning>
       <head>
+        {parentOrigin && (
+          <meta name="parent-origin" content={parentOrigin} />
+        )}
         <script
           nonce={nonce}
           suppressHydrationWarning

app/not-found.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAuthStore } from "@/stores/auth-store";
+
+export default function NotFound() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      window.location.href = "/login";
+    }
+  }, [isAuthenticated]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center max-w-md px-4">
+        <h1 className="text-4xl font-bold text-foreground mb-2">404</h1>
+        <p className="text-muted-foreground mb-6">This page could not be found.</p>
+        <a
+          href="/"
+          className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
+        >
+          Go home
+        </a>
+      </div>
+    </div>
+  );
+}

components/calendar/calendar-agenda-view.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, parseISO, isToday, isTomorrow } from "date-fns";
+import { format, parseISO, isToday, isTomorrow, startOfDay } from "date-fns";
 import { Calendar as CalendarIcon, MapPin, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { parseDuration, getEventColor } from "./event-card";
-import { getEventDayBounds } from "@/lib/calendar-utils";
+import { getEventDayBounds, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { getParticipantCount } from "@/lib/calendar-participants";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 
@@ -27,6 +27,7 @@ interface DayGroup {
 }
 
 export function CalendarAgendaView({
+  selectedDate,
   events,
   calendars,
   onSelectEvent,
@@ -43,6 +44,9 @@ export function CalendarAgendaView({
     return map;
   }, [calendars]);
 
+  const todayRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const grouped = useMemo(() => {
     const sorted = [...events].sort((a, b) =>
       new Date(a.start).getTime() - new Date(b.start).getTime()
@@ -69,10 +73,38 @@ export function CalendarAgendaView({
       } catch { /* skip invalid dates */ }
     });
 
+    // Always include today's date in the groups so the view has a "Today" anchor
+    const todayKey = format(new Date(), "yyyy-MM-dd");
+    if (!groupMap.has(todayKey)) {
+      const todayGroup = { date: startOfDay(new Date()), dateKey: todayKey, events: [] as CalendarEvent[] };
+      groupMap.set(todayKey, todayGroup);
+      groups.push(todayGroup);
+    }
+
     groups.sort((a, b) => a.date.getTime() - b.date.getTime());
     return groups;
   }, [events]);
 
+  // Auto-scroll to today's section on mount and when selectedDate changes to today
+  const scrollToToday = useCallback(() => {
+    if (todayRef.current) {
+      todayRef.current.scrollIntoView({ block: "start" });
+    }
+  }, []);
+
+  useEffect(() => {
+    // Scroll to today on mount
+    const frame = requestAnimationFrame(scrollToToday);
+    return () => cancelAnimationFrame(frame);
+  }, [scrollToToday]);
+
+  useEffect(() => {
+    // Scroll to today when selectedDate changes to today
+    if (isToday(selectedDate)) {
+      scrollToToday();
+    }
+  }, [selectedDate, scrollToToday]);
+
   const formatDateHeader = (date: Date): string => {
     if (isToday(date)) return t("events.today_header");
     if (isTomorrow(date)) return t("events.tomorrow_header");
@@ -86,19 +118,10 @@ export function CalendarAgendaView({
     return format(date, "HH:mm");
   };
 
-  if (grouped.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground">
-        <CalendarIcon className="w-12 h-12 mb-3 opacity-30" />
-        <p className="text-sm">{t("events.no_events")}</p>
-      </div>
-    );
-  }
-
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
       {grouped.map((group) => (
-        <div key={group.dateKey}>
+        <div key={group.dateKey} ref={isToday(group.date) ? todayRef : undefined}>
           <div className="sticky top-0 bg-muted/80 backdrop-blur-sm px-4 py-2 border-b border-border">
             <span className={cn(
               "text-sm font-medium",
@@ -111,10 +134,15 @@ export function CalendarAgendaView({
             </span>
           </div>
 
+          {group.events.length === 0 ? (
+            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+              {t("events.no_events")}
+            </div>
+          ) : (
           <div className="divide-y divide-border">
             {group.events.map((ev) => {
-              const calId = Object.keys(ev.calendarIds)[0];
-              const calendar = calendarMap.get(calId);
+              const calId = getPrimaryCalendarId(ev);
+              const calendar = calId ? calendarMap.get(calId) : undefined;
               const color = getEventColor(ev, calendar);
               const start = parseISO(ev.start);
               const durMin = parseDuration(ev.duration);
@@ -176,6 +204,7 @@ export function CalendarAgendaView({
               );
             })}
           </div>
+          )}
         </div>
       ))}
     </div>

components/calendar/calendar-day-view.tsx

@@ -2,13 +2,15 @@
 
 import { useMemo, useEffect, useRef, useState } from "react";
 import { useTranslations, useFormatter } from "next-intl";
-import { format, isToday, parseISO } from "date-fns";
+import { format, isSameDay, isToday, parseISO } from "date-fns";
 import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
 import { EventCard, parseDuration } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { getEventDayBounds, layoutOverlappingEvents, formatSnapTime } from "@/lib/calendar-utils";
-import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
+import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
+import type { CalendarEvent, Calendar, CalendarTask } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
+import type { PendingEventPreview } from "./event-modal";
 
 interface CalendarDayViewProps {
   selectedDate: Date;
@@ -20,6 +22,9 @@ interface CalendarDayViewProps {
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }
 
 const HOUR_HEIGHT = 64;
@@ -35,6 +40,9 @@ export function CalendarDayView({
   onCreateAtTime,
   timeFormat = "24h",
   isMobile,
+  pendingPreview,
+  tasks,
+  onToggleTaskComplete,
 }: CalendarDayViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -65,6 +73,16 @@ export function CalendarDayView({
     return { timedEvents: timed, allDayEvents: allDay };
   }, [events, selectedDate]);
 
+  const dayTasks = useMemo(() => {
+    if (!tasks?.length) return [];
+    return tasks.filter(task => {
+      if (!task.due) return false;
+      try {
+        return isSameDay(parseISO(task.due), selectedDate);
+      } catch { return false; }
+    });
+  }, [tasks, selectedDate]);
+
   useEffect(() => {
     if (scrollRef.current) {
       const now = new Date();
@@ -122,25 +140,63 @@ export function CalendarDayView({
         </h3>
       </div>
 
-      {allDayEvents.length > 0 && (
+      {(allDayEvents.length > 0 || dayTasks.length > 0) && (
         <div className="px-4 py-2 border-b border-border">
-          <div className="text-[10px] text-muted-foreground mb-1">{t("events.all_day")}</div>
-          <div className="space-y-1">
-            {allDayEvents.map((ev) => {
-              const calId = Object.keys(ev.calendarIds)[0];
-              return (
-                <EventCard
-                  key={ev.id}
-                  event={ev}
-                  calendar={calendarMap.get(calId)}
-                  variant="chip"
-                  onClick={(rect) => onSelectEvent(ev, rect)}
-                  onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
-                  onMouseLeave={onHoverLeave}
-                />
-              );
-            })}
-          </div>
+          {allDayEvents.length > 0 && (
+            <>
+              <div className="text-[10px] text-muted-foreground mb-1">{t("events.all_day")}</div>
+              <div className="space-y-1">
+                {allDayEvents.map((ev) => {
+                  const calId = getPrimaryCalendarId(ev);
+                  return (
+                    <EventCard
+                      key={ev.id}
+                      event={ev}
+                      calendar={calId ? calendarMap.get(calId) : undefined}
+                      variant="chip"
+                      onClick={(rect) => onSelectEvent(ev, rect)}
+                      onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
+                      onMouseLeave={onHoverLeave}
+                    />
+                  );
+                })}
+              </div>
+            </>
+          )}
+          {dayTasks.length > 0 && (
+            <>
+              <div className={cn("text-[10px] text-muted-foreground mb-1", allDayEvents.length > 0 && "mt-2")}>{t("tasks.label")}</div>
+              <div className="space-y-0.5">
+                {dayTasks.map((task) => {
+                  const isCompleted = task.progress === "completed";
+                  const cal = calendars.find(c => task.calendarIds[c.id]);
+                  const color = cal?.color || "#3b82f6";
+                  return (
+                    <div
+                      key={task.id}
+                      className="flex items-center gap-1.5 px-1.5 py-0.5 rounded text-xs cursor-pointer hover:bg-muted/50 transition-colors"
+                      style={{ borderLeft: `3px solid ${color}` }}
+                    >
+                      <button
+                        onClick={(e) => { e.stopPropagation(); onToggleTaskComplete?.(task); }}
+                        className={cn(
+                          "flex-shrink-0 w-3.5 h-3.5 rounded-full border flex items-center justify-center",
+                          isCompleted
+                            ? "bg-green-500 border-green-500 text-white"
+                            : "border-muted-foreground/40 hover:border-primary"
+                        )}
+                      >
+                        {isCompleted && <Check className="h-2.5 w-2.5" />}
+                      </button>
+                      <span className={cn("truncate", isCompleted && "line-through text-muted-foreground")}>
+                        {task.title || t("tasks.no_title")}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </>
+          )}
         </div>
       )}
 
@@ -192,7 +248,7 @@ export function CalendarDayView({
               const top = (startMin / 60) * HOUR_HEIGHT;
               const baseHeight = Math.max(24, (durMin / 60) * HOUR_HEIGHT);
               const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
-              const calId = Object.keys(ev.calendarIds)[0];
+              const calId = getPrimaryCalendarId(ev);
               const leftPct = (column / totalColumns) * 100;
               const widthPct = (1 / totalColumns) * 100;
 
@@ -205,7 +261,7 @@ export function CalendarDayView({
                 >
                   <EventCard
                     event={ev}
-                    calendar={calendarMap.get(calId)}
+                    calendar={calId ? calendarMap.get(calId) : undefined}
                     variant="block"
                     onClick={(rect) => onSelectEvent(ev, rect)}
                     onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
@@ -274,6 +330,34 @@ export function CalendarDayView({
                 </div>
               </div>
             )}
+
+            {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, selectedDate) && (
+              (() => {
+                const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
+                const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                const durationMin = Math.max(15, endMin - startMin);
+                const cal = calendars.find(c => c.id === pendingPreview.calendarId);
+                const color = cal?.color || "hsl(var(--primary))";
+                return (
+                  <div
+                    className="absolute left-2 right-2 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                    style={{
+                      top: (startMin / 60) * HOUR_HEIGHT,
+                      height: Math.max(24, (durationMin / 60) * HOUR_HEIGHT),
+                      borderColor: color,
+                      backgroundColor: `${color}10`,
+                    }}
+                  >
+                    <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                      {pendingPreview.title}
+                    </div>
+                    <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                      {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                    </div>
+                  </div>
+                );
+              })()
+            )}
           </div>
         </div>
       </div>

components/calendar/calendar-month-view.tsx

@@ -8,10 +8,11 @@ import {
 } from "date-fns";
 import { cn } from "@/lib/utils";
 import { EventCard } from "./event-card";
-import { buildWeekSegments, getEventDayBounds } from "@/lib/calendar-utils";
+import { buildWeekSegments, getEventDayBounds, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useCalendarStore } from "@/stores/calendar-store";
+import type { PendingEventPreview } from "./event-modal";
 import { toast } from "@/stores/toast-store";
 
 interface CalendarMonthViewProps {
@@ -25,6 +26,7 @@ interface CalendarMonthViewProps {
   onCreateAtTime?: (date: Date) => void;
   firstDayOfWeek?: number;
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }
 
 export function CalendarMonthView({
@@ -38,6 +40,7 @@ export function CalendarMonthView({
   onCreateAtTime,
   firstDayOfWeek = 1,
   isMobile,
+  pendingPreview,
 }: CalendarMonthViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -194,35 +197,67 @@ export function CalendarMonthView({
                     </span>
                   </div>
                   {isMobile ? (
-                    dayEvents.length > 0 && (
-                      <div className="flex items-center justify-center gap-0.5 flex-wrap">
-                        {dayEvents.slice(0, 3).map((ev) => {
-                          const calId = Object.keys(ev.calendarIds)[0];
-                          const cal = calendarMap.get(calId);
-                          const evColor = ev.color || cal?.color || "#3b82f6";
-                          return (
-                            <span
-                              key={ev.id}
-                              className="w-1.5 h-1.5 rounded-full"
-                              style={{ backgroundColor: evColor }}
-                            />
-                          );
-                        })}
-                        {dayEvents.length > 3 && (
-                          <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40" />
-                        )}
-                      </div>
-                    )
+                    <div className="flex items-center justify-center gap-0.5 flex-wrap">
+                      {dayEvents.slice(0, 3).map((ev) => {
+                        const calId = getPrimaryCalendarId(ev);
+                        const cal = calId ? calendarMap.get(calId) : undefined;
+                        const evColor = ev.color || cal?.color || "#3b82f6";
+                        return (
+                          <span
+                            key={ev.id}
+                            className="w-1.5 h-1.5 rounded-full"
+                            style={{ backgroundColor: evColor }}
+                          />
+                        );
+                      })}
+                      {dayEvents.length > 3 && (
+                        <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40" />
+                      )}
+                      {pendingPreview && isSameDay(pendingPreview.start, day) && (
+                        <span
+                          className="w-1.5 h-1.5 rounded-full border border-dashed"
+                          style={{ borderColor: calendarMap.get(pendingPreview.calendarId)?.color || "#3b82f6" }}
+                        />
+                      )}
+                    </div>
                   ) : null}
                 </div>
               );
             })}
             </div>
 
+            {!isMobile && pendingPreview && (() => {
+              const previewDayIdx = week.findIndex(d => isSameDay(d, pendingPreview.start));
+              if (previewDayIdx === -1) return null;
+              const previewRow = rowCount;
+              const cal = calendarMap.get(pendingPreview.calendarId);
+              const color = cal?.color || "#3b82f6";
+              return (
+                <div className="absolute inset-x-0 pointer-events-none" style={{ top: 30 }}>
+                  <div
+                    className="absolute px-0.5"
+                    style={{
+                      left: `calc(${(previewDayIdx / 7) * 100}% + 1px)`,
+                      width: `calc(${(1 / 7) * 100}% - 2px)`,
+                      top: previewRow * 22,
+                      height: 20,
+                    }}
+                  >
+                    <div
+                      className="h-full rounded text-[10px] leading-[20px] font-medium px-1.5 truncate border-2 border-dashed"
+                      style={{ borderColor: color, color, backgroundColor: `${color}10` }}
+                    >
+                      {pendingPreview.title}
+                    </div>
+                  </div>
+                </div>
+              );
+            })()}
+
             {!isMobile && segments.length > 0 && (
               <div className="absolute inset-x-0 pointer-events-none" style={{ top: 30 }}>
                 {segments.map((segment) => {
-                  const calId = Object.keys(segment.event.calendarIds)[0];
+                  const calId = getPrimaryCalendarId(segment.event);
                   return (
                     <div
                       key={`${segment.event.id}-${segment.startIndex}-${segment.row}`}
@@ -236,7 +271,7 @@ export function CalendarMonthView({
                     >
                       <EventCard
                         event={segment.event}
-                        calendar={calendarMap.get(calId)}
+                        calendar={calId ? calendarMap.get(calId) : undefined}
                         variant="span"
                         continuesBefore={segment.continuesBefore}
                         continuesAfter={segment.continuesAfter}

components/calendar/calendar-sidebar-panel.tsx

@@ -2,14 +2,15 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, Plus, RefreshCw, Share2, Trash2 } from "lucide-react";
+import { Globe, ListTodo, Plus, RefreshCw, Share2, Trash2 } from "lucide-react";
 import { cn, formatDateTime } from "@/lib/utils";
 import type { Calendar } from "@/lib/jmap/types";
 import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useTaskStore } from "@/stores/task-store";
 import { toast } from "@/stores/toast-store";
-import type { JMAPClient } from "@/lib/jmap/client";
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
 
 interface CalendarSidebarPanelProps {
   calendars: Calendar[];
@@ -17,7 +18,7 @@ interface CalendarSidebarPanelProps {
   onToggleVisibility: (id: string) => void;
   onColorChange?: (calendarId: string, color: string) => void;
   onSubscribe?: () => void;
-  client?: JMAPClient | null;
+  client?: IJMAPClient | null;
 }
 
 export function CalendarSidebarPanel({
@@ -35,6 +36,15 @@ export function CalendarSidebarPanel({
   const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
   const removeICalSubscription = useCalendarStore((s) => s.removeICalSubscription);
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const enableCalendarTasks = useSettingsStore((s) => s.enableCalendarTasks);
+  const tasks = useTaskStore((s) => s.tasks);
+  const setViewMode = useCalendarStore((s) => s.setViewMode);
+
+  const pendingTaskCount = useMemo(() => tasks.filter(t => t.progress !== 'completed' && t.progress !== 'cancelled').length, [tasks]);
+  const overdueTaskCount = useMemo(() => {
+    const now = new Date();
+    return tasks.filter(t => t.progress !== 'completed' && t.progress !== 'cancelled' && t.due && new Date(t.due) < now).length;
+  }, [tasks]);
 
   const [colorPickerId, setColorPickerId] = useState<string | null>(null);
   const [contextMenuCalId, setContextMenuCalId] = useState<string | null>(null);
@@ -47,7 +57,7 @@ export function CalendarSidebarPanel({
     const shared = calendars.filter(c => c.isShared);
     const groups = new Map<string, { accountName: string; calendars: Calendar[] }>();
     for (const cal of shared) {
-      const key = cal.accountId!;
+      const key = cal.accountId || cal.accountName || cal.id;
       if (!groups.has(key)) {
         groups.set(key, { accountName: cal.accountName || key, calendars: [] });
       }
@@ -209,6 +219,21 @@ export function CalendarSidebarPanel({
 
   return (
     <div className="mt-4">
+      {enableCalendarTasks && (
+        <button
+          onClick={() => setViewMode('tasks')}
+          className="flex items-center gap-2 w-full px-1.5 py-1.5 mb-3 rounded-md text-sm hover:bg-muted transition-colors"
+        >
+          <ListTodo className="w-4 h-4 text-muted-foreground" />
+          <span>{t('tasks.label')}</span>
+          {pendingTaskCount > 0 && (
+            <span className="ml-auto text-xs text-muted-foreground">{pendingTaskCount}</span>
+          )}
+          {overdueTaskCount > 0 && (
+            <span className="text-xs text-destructive font-medium">{overdueTaskCount} {t('tasks.filter_overdue').toLowerCase()}</span>
+          )}
+        </button>
+      )}
       <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
         {t("my_calendars")}
       </h3>

components/calendar/calendar-toolbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, Upload, CalendarDays, Globe, ChevronDown, ListTodo } from "lucide-react";
 import { addDays, startOfWeek } from "date-fns";
 import { cn } from "@/lib/utils";
 import type { CalendarViewMode } from "@/stores/calendar-store";
@@ -25,6 +25,7 @@ interface CalendarToolbarProps {
   calendars?: Calendar[];
   selectedCalendarIds?: string[];
   onToggleVisibility?: (id: string) => void;
+  enableCalendarTasks?: boolean;
 }
 
 export function CalendarToolbar({
@@ -42,10 +43,13 @@ export function CalendarToolbar({
   calendars,
   selectedCalendarIds,
   onToggleVisibility,
+  enableCalendarTasks,
 }: CalendarToolbarProps) {
   const t = useTranslations("calendar");
   const formatter = useFormatter();
-  const views: CalendarViewMode[] = ["month", "week", "day", "agenda"];
+  const views: CalendarViewMode[] = enableCalendarTasks
+    ? ["month", "week", "day", "agenda", "tasks"]
+    : ["month", "week", "day", "agenda"];
   const [showCalendarDropdown, setShowCalendarDropdown] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -86,6 +90,8 @@ export function CalendarToolbar({
         return isMobile
           ? formatter.dateTime(selectedDate, { month: "short", year: "numeric" })
           : formatter.dateTime(selectedDate, { month: "long", year: "numeric" });
+      case "tasks":
+        return t("views.tasks");
     }
   };
 
@@ -136,6 +142,20 @@ export function CalendarToolbar({
         {t("views.today")}
       </Button>
 
+      {!isMobile && (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onPrev} aria-label={t("nav_prev")}>
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onNext} aria-label={t("nav_next")}>
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+          <span className="text-base font-semibold ml-2 select-none">
+            {getDateLabel()}
+          </span>
+        </div>
+      )}
+
       {isMobile && calendars && selectedCalendarIds && onToggleVisibility && (
         <div className="relative" ref={dropdownRef}>
           <Button
@@ -183,7 +203,7 @@ export function CalendarToolbar({
                 const shared = calendars.filter(c => c.isShared);
                 const groups = new Map<string, { accountName: string; cals: typeof shared }>();
                 for (const c of shared) {
-                  const key = c.accountId!;
+                  const key = c.accountId || c.accountName || c.id;
                   if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
                   groups.get(key)!.cals.push(c);
                 }
@@ -312,7 +332,7 @@ export function CalendarToolbar({
       )}
 
       {!isMobile && (
-        <Button size="sm" onClick={onCreateEvent}>
+        <Button size="sm" onClick={onCreateEvent} data-tour="create-event-button">
           <Plus className="w-4 h-4 mr-1" />
           {t("events.create")}
         </Button>

components/calendar/calendar-week-view.tsx

@@ -6,11 +6,13 @@ import {
   startOfWeek, addDays, format, isSameDay, isToday, parseISO,
 } from "date-fns";
 import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
 import { EventCard, parseDuration } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
-import { buildWeekSegments, getEventDayBounds, layoutOverlappingEvents, formatSnapTime } from "@/lib/calendar-utils";
-import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
+import { buildWeekSegments, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
+import type { CalendarEvent, Calendar, CalendarTask } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
+import type { PendingEventPreview } from "./event-modal";
 
 interface CalendarWeekViewProps {
   selectedDate: Date;
@@ -24,6 +26,9 @@ interface CalendarWeekViewProps {
   firstDayOfWeek?: number;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
+  tasks?: CalendarTask[];
+  onToggleTaskComplete?: (task: CalendarTask) => void;
 }
 
 const HOUR_HEIGHT = 60;
@@ -41,6 +46,9 @@ export function CalendarWeekView({
   firstDayOfWeek = 1,
   timeFormat = "24h",
   isMobile,
+  pendingPreview,
+  tasks,
+  onToggleTaskComplete,
 }: CalendarWeekViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -93,9 +101,36 @@ export function CalendarWeekView({
     return allDaySegments.reduce((maxRows, segment) => Math.max(maxRows, segment.row + 1), 0);
   }, [allDaySegments]);
 
+  // Tasks grouped by day for the week
+  const tasksByDay = useMemo(() => {
+    if (!tasks?.length) return new Map<string, CalendarTask[]>();
+    const map = new Map<string, CalendarTask[]>();
+    for (const task of tasks) {
+      if (!task.due) continue;
+      try {
+        const key = format(parseISO(task.due), "yyyy-MM-dd");
+        const existing = map.get(key) || [];
+        existing.push(task);
+        map.set(key, existing);
+      } catch { /* skip */ }
+    }
+    return map;
+  }, [tasks]);
+
+  // Max tasks on any single day in this week
+  const taskRowCount = useMemo(() => {
+    let max = 0;
+    for (const day of weekDays) {
+      const key = format(day, "yyyy-MM-dd");
+      const count = tasksByDay.get(key)?.length ?? 0;
+      if (count > max) max = count;
+    }
+    return max;
+  }, [tasksByDay, weekDays]);
+
   const hasAllDay = useMemo(() => {
-    return allDaySegments.length > 0;
-  }, [allDaySegments]);
+    return allDaySegments.length > 0 || taskRowCount > 0;
+  }, [allDaySegments, taskRowCount]);
 
   useEffect(() => {
     if (scrollRef.current) {
@@ -148,13 +183,13 @@ export function CalendarWeekView({
         <div className="flex border-b border-border">
           <div
             className={cn("flex-shrink-0 text-[10px] text-muted-foreground p-1 text-right", isMobile ? "w-10" : "w-14")}
-            style={{ minHeight: Math.max(28, allDayRowCount * 24 + 4) }}
+            style={{ minHeight: Math.max(28, (allDayRowCount + taskRowCount) * 24 + 4) }}
           >
             {t("events.all_day")}
           </div>
           <div
             className={cn("flex-1 relative grid gap-px bg-border", isMobile ? "grid-cols-3" : "grid-cols-7")}
-            style={{ minHeight: Math.max(28, allDayRowCount * 24 + 4) }}
+            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]" />
@@ -162,7 +197,7 @@ export function CalendarWeekView({
 
             <div className="absolute inset-0 pointer-events-none">
               {allDaySegments.map((segment) => {
-                const calId = Object.keys(segment.event.calendarIds)[0];
+                const calId = getPrimaryCalendarId(segment.event);
                 return (
                   <div
                     key={`${segment.event.id}-${segment.startIndex}-${segment.row}`}
@@ -176,7 +211,7 @@ export function CalendarWeekView({
                   >
                     <EventCard
                       event={segment.event}
-                      calendar={calendarMap.get(calId)}
+                      calendar={calId ? calendarMap.get(calId) : undefined}
                       variant="span"
                       continuesBefore={segment.continuesBefore}
                       continuesAfter={segment.continuesAfter}
@@ -188,6 +223,49 @@ export function CalendarWeekView({
                 );
               })}
             </div>
+
+            {/* Task chips in all-day area */}
+            {taskRowCount > 0 && (
+              <div className="absolute inset-x-0 pointer-events-none" style={{ top: allDayRowCount * 24 + 2 }}>
+                {weekDays.map((day, dayIndex) => {
+                  const key = format(day, "yyyy-MM-dd");
+                  const dayTasks = tasksByDay.get(key) || [];
+                  return dayTasks.map((task, taskIndex) => {
+                    const isCompleted = task.progress === "completed";
+                    const cal = calendars.find(c => task.calendarIds[c.id]);
+                    const color = cal?.color || "#3b82f6";
+                    return (
+                      <div
+                        key={`task-${task.id}`}
+                        className="absolute px-0.5 pointer-events-auto"
+                        style={{
+                          left: `calc(${(dayIndex / colCount) * 100}% + 1px)`,
+                          width: `calc(${(1 / colCount) * 100}% - 2px)`,
+                          top: taskIndex * 24,
+                          height: 20,
+                        }}
+                      >
+                        <div
+                          className="h-full rounded text-[10px] leading-[20px] font-medium px-1.5 truncate flex items-center gap-1 cursor-pointer hover:opacity-80"
+                          style={{ backgroundColor: `${color}20`, borderLeft: `3px solid ${color}` }}
+                          onClick={() => onToggleTaskComplete?.(task)}
+                        >
+                          <span className={cn(
+                            "w-2.5 h-2.5 rounded-full border flex-shrink-0 flex items-center justify-center",
+                            isCompleted ? "bg-green-500 border-green-500" : "border-current"
+                          )}>
+                            {isCompleted && <Check className="h-2 w-2 text-white" />}
+                          </span>
+                          <span className={cn("truncate", isCompleted && "line-through text-muted-foreground")}>
+                            {task.title}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  });
+                })}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -284,7 +362,7 @@ export function CalendarWeekView({
                     const top = (startMin / 60) * HOUR_HEIGHT;
                     const baseHeight = Math.max(20, (durMin / 60) * HOUR_HEIGHT);
                     const height = resizeVisual?.eventId === ev.id ? resizeVisual.heightPx : baseHeight;
-                    const calId = Object.keys(ev.calendarIds)[0];
+                    const calId = getPrimaryCalendarId(ev);
                     const leftPct = (column / totalColumns) * 100;
                     const widthPct = (1 / totalColumns) * 100;
 
@@ -297,7 +375,7 @@ export function CalendarWeekView({
                       >
                         <EventCard
                           event={ev}
-                          calendar={calendarMap.get(calId)}
+                          calendar={calId ? calendarMap.get(calId) : undefined}
                           variant="block"
                           onClick={(rect) => onSelectEvent(ev, rect)}
                           onMouseEnter={(rect) => onHoverEvent?.(ev, rect)}
@@ -366,6 +444,34 @@ export function CalendarWeekView({
                       </div>
                     </div>
                   )}
+
+                  {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
+                    (() => {
+                      const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
+                      const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                      const durationMin = Math.max(15, endMin - startMin);
+                      const cal = calendars.find(c => c.id === pendingPreview.calendarId);
+                      const color = cal?.color || "hsl(var(--primary))";
+                      return (
+                        <div
+                          className="absolute left-1 right-1 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                          style={{
+                            top: (startMin / 60) * HOUR_HEIGHT,
+                            height: Math.max(20, (durationMin / 60) * HOUR_HEIGHT),
+                            borderColor: color,
+                            backgroundColor: `${color}10`,
+                          }}
+                        >
+                          <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                            {pendingPreview.title}
+                          </div>
+                          <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                            {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                          </div>
+                        </div>
+                      );
+                    })()
+                  )}
                 </div>
               );
             })}

components/calendar/event-card.tsx

@@ -70,6 +70,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
   const color = getEventColor(event, calendar);
   const startDate = parseISO(event.start);
   const timeFormat = useSettingsStore((state) => state.timeFormat);
+  const showTimeInMonthView = useSettingsStore((state) => state.showTimeInMonthView);
   const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
 
   const calendarName = calendar?.name || "";
@@ -156,6 +157,9 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
         style={{ backgroundColor: `${color}24`, borderLeft: `3px solid ${color}`, color, ...style }}
       >
         <div className="flex items-center gap-1 min-w-0">
+          {showTimeInMonthView && !event.showWithoutTime && (
+            <span className="flex-shrink-0 opacity-80">{format(startDate, timeFmt)}</span>
+          )}
           <span className="truncate font-medium">{event.title || t("events.no_title")}</span>
         </div>
       </button>

components/calendar/event-detail-popover.tsx

@@ -192,6 +192,10 @@ export function EventDetailPopover({
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
+      const target = e.target as HTMLElement;
+      const tag = target?.tagName?.toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (target?.getAttribute("contenteditable") === "true") return;
       if (e.key === "e" && !noteExpanded) {
         e.preventDefault();
         onEdit();

components/calendar/event-modal.tsx

@@ -8,7 +8,7 @@ import { X, Trash2, Check, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Vid
 import { format, parseISO, addHours, addDays } from "date-fns";
 import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
 import { parseDuration, getEventColor } from "./event-card";
-import { buildAllDayDuration, getEventDisplayEndDate } from "@/lib/calendar-utils";
+import { buildAllDayDuration, getEventDisplayEndDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
 import { ParticipantInput } from "./participant-input";
 import {
   isOrganizer,
@@ -20,16 +20,25 @@ import {
 } from "@/lib/calendar-participants";
 import { useSettingsStore } from "@/stores/settings-store";
 
+export interface PendingEventPreview {
+  start: Date;
+  end: Date;
+  title: string;
+  allDay: boolean;
+  calendarId: string;
+}
+
 interface EventModalProps {
   event?: CalendarEvent | null;
   calendars: Calendar[];
   defaultDate?: Date;
   defaultEndDate?: Date;
-  onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void;
+  onSave: (data: Partial<CalendarEvent>, sendSchedulingMessages?: boolean) => void | Promise<void>;
   onDelete?: (id: string, sendSchedulingMessages?: boolean) => void;
   onDuplicate?: (data: Partial<CalendarEvent>) => void;
   onRsvp?: (eventId: string, participantId: string, status: CalendarParticipant['participationStatus']) => void;
   onClose: () => void;
+  onPreviewChange?: (preview: PendingEventPreview | null) => void;
   currentUserEmails?: string[];
   isMobile?: boolean;
 }
@@ -105,6 +114,7 @@ export function EventModal({
   onDuplicate,
   onRsvp,
   onClose,
+  onPreviewChange,
   currentUserEmails = [],
   isMobile = false,
 }: EventModalProps) {
@@ -184,7 +194,7 @@ export function EventModal({
   const [endTime, setEndTime] = useState(formatTimeInput(getInitialEnd()));
   const [allDay, setAllDay] = useState(event?.showWithoutTime || false);
   const [calendarId, setCalendarId] = useState<string>(() => {
-    if (event?.calendarIds) return Object.keys(event.calendarIds)[0] || calendars[0]?.id || "";
+    if (event?.calendarIds) return getPrimaryCalendarId(event) || calendars[0]?.id || "";
     const defaultCal = calendars.find(c => c.isDefault);
     return defaultCal?.id || calendars[0]?.id || "";
   });
@@ -209,6 +219,7 @@ export function EventModal({
     return "none";
   });
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   const [attendees, setAttendees] = useState<{ name: string; email: string }[]>(() => {
     if (!event?.participants) return [];
@@ -218,6 +229,18 @@ export function EventModal({
   });
   const [sendInvitations, setSendInvitations] = useState(true);
 
+  // Report live preview to parent for grid outline
+  useEffect(() => {
+    if (!onPreviewChange || isEdit) return;
+    const startStr = allDay ? `${startDate}T00:00:00` : `${startDate}T${startTime}:00`;
+    const endStr = allDay ? `${endDate}T23:59:59` : `${endDate}T${endTime}:00`;
+    const s = new Date(startStr);
+    const e = new Date(endStr);
+    if (isNaN(s.getTime()) || isNaN(e.getTime())) return;
+    onPreviewChange({ start: s, end: e, title: title || "(No title)", allDay, calendarId });
+    return () => onPreviewChange(null);
+  }, [startDate, startTime, endDate, endTime, allDay, title, calendarId, isEdit, onPreviewChange]);
+
   const statusCounts = useMemo(() => {
     if (!event?.participants) return null;
     return getStatusCounts(event);
@@ -231,9 +254,9 @@ export function EventModal({
     setAttendees(prev => prev.filter(a => a.email.toLowerCase() !== email.toLowerCase()));
   }, []);
 
-  const handleSave = useCallback(() => {
+  const handleSave = useCallback(async () => {
     const trimmedTitle = title.trim();
-    if (!trimmedTitle) return;
+    if (!trimmedTitle || isSaving) return;
     if (trimmedTitle.length > 500 || description.trim().length > 10000 || location.trim().length > 500) return;
 
     const startStr = allDay
@@ -343,8 +366,13 @@ export function EventModal({
     }
 
     const shouldSendScheduling = attendees.length > 0 && sendInvitations;
-    onSave(data, shouldSendScheduling);
-  }, [title, description, location, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alert, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave]);
+    setIsSaving(true);
+    try {
+      await onSave(data, shouldSendScheduling);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [title, description, location, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alert, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
 
   const handleRsvp = useCallback((status: CalendarParticipant['participationStatus']) => {
     if (!event || !userParticipantId || !onRsvp) return;
@@ -701,7 +729,7 @@ export function EventModal({
   }
 
   return (
-    <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={isEdit ? t("events.edit") : t("events.create")} className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
+    <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")}
@@ -945,7 +973,7 @@ export function EventModal({
             <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
               {t("form.cancel")}
             </Button>
-            <Button onClick={handleSave} disabled={!title.trim()}>
+            <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
               {t("form.save")}
             </Button>
           </div>

components/calendar/ical-import-modal.tsx

@@ -6,14 +6,14 @@ import { Button } from "@/components/ui/button";
 import { X, Upload, Check, Loader2, RefreshCw, Globe } from "lucide-react";
 import { format, parseISO } from "date-fns";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
-import type { JMAPClient } from "@/lib/jmap/client";
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
 import { useCalendarStore } from "@/stores/calendar-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 
 interface ICalImportModalProps {
   calendars: Calendar[];
-  client: JMAPClient;
+  client: IJMAPClient;
   onClose: () => void;
 }
 

components/calendar/ical-subscription-modal.tsx

@@ -4,13 +4,13 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { X, Loader2, Globe } from "lucide-react";
-import type { JMAPClient } from "@/lib/jmap/client";
+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 ICalSubscriptionModalProps {
-  client: JMAPClient;
+  client: IJMAPClient;
   onClose: () => void;
 }
 

components/calendar/mini-calendar.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, Fragment } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
-  eachDayOfInterval, getMonth, getYear,
+  eachDayOfInterval, getMonth, getYear, getISOWeek, getWeek,
   isSameDay, isSameMonth, isToday, format,
 } from "date-fns";
 import { cn } from "@/lib/utils";
@@ -26,6 +26,7 @@ interface MiniCalendarProps {
   onChangeMonth: (date: Date) => void;
   events?: CalendarEvent[];
   firstDayOfWeek?: number;
+  showWeekNumbers?: boolean;
 }
 
 export function MiniCalendar({
@@ -35,6 +36,7 @@ export function MiniCalendar({
   onChangeMonth,
   events = [],
   firstDayOfWeek = 1,
+  showWeekNumbers = false,
 }: MiniCalendarProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -61,6 +63,17 @@ export function MiniCalendar({
     ? ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const
     : ["mon", "tue", "wed", "thu", "fri", "sat", "sun"] as const;
 
+  // Compute week numbers for each row (one per 7-day chunk)
+  const weekNumbers = useMemo(() => {
+    if (!showWeekNumbers) return [];
+    const nums: number[] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      // Use the first day of each row to determine the week number
+      nums.push(weekStart === 1 ? getISOWeek(days[i]) : getWeek(days[i], { weekStartsOn: 0 }));
+    }
+    return nums;
+  }, [days, showWeekNumbers, weekStart]);
+
   const currentYear = getYear(displayMonth);
   const currentMonth = getMonth(displayMonth);
   const decadeStart = Math.floor(currentYear / 10) * 10;
@@ -135,35 +148,49 @@ export function MiniCalendar({
       </div>
 
       {pickerView === "days" && (
-        <div className="grid grid-cols-7 gap-0">
+        <div className={cn("grid gap-0", showWeekNumbers ? "grid-cols-[auto_repeat(7,1fr)]" : "grid-cols-7")}>
+          {showWeekNumbers && (
+            <div className="text-center text-[10px] font-medium text-muted-foreground py-1 w-5" />
+          )}
           {dayHeaders.map((d) => (
             <div key={d} className="text-center text-[10px] font-medium text-muted-foreground py-1">
               {t(`days.${d}`)}
             </div>
           ))}
-          {days.map((day) => {
+          {days.map((day, index) => {
             const inMonth = isSameMonth(day, displayMonth);
             const selected = isSameDay(day, selectedDate);
             const today = isToday(day);
             const hasEvent = eventDates.has(format(day, "yyyy-MM-dd"));
+            const isFirstDayOfRow = index % 7 === 0;
 
             return (
-              <button
-                key={day.toISOString()}
-                onClick={() => onSelectDate(day)}
-                className={cn(
-                  "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
-                  !inMonth && "text-muted-foreground/40",
-                  inMonth && !selected && "hover:bg-muted",
-                  today && !selected && "font-bold text-primary",
-                  selected && "bg-primary text-primary-foreground"
+              <Fragment key={day.toISOString()}>
+                {showWeekNumbers && isFirstDayOfRow && (
+                  <div
+                    key={`wk-${index}`}
+                    className="flex items-center justify-center w-5 text-[9px] text-muted-foreground/60 font-medium"
+                  >
+                    {weekNumbers[index / 7]}
+                  </div>
                 )}
-              >
-                {format(day, "d")}
-                {hasEvent && !selected && (
-                  <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
-                )}
-              </button>
+                <button
+                  key={`day-${day.toISOString()}`}
+                  onClick={() => onSelectDate(day)}
+                  className={cn(
+                    "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
+                    !inMonth && "text-muted-foreground/40",
+                    inMonth && !selected && "hover:bg-muted",
+                    today && !selected && "font-bold text-primary",
+                    selected && "bg-primary text-primary-foreground"
+                  )}
+                >
+                  {format(day, "d")}
+                  {hasEvent && !selected && (
+                    <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
+                  )}
+                </button>
+              </Fragment>
             );
           })}
         </div>

components/calendar/task-list-view.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useMemo, useCallback } from "react";
+import { useMemo, useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
 import { format, parseISO, isPast, isToday, isTomorrow } from "date-fns";
-import { Check, Circle, Flag, CalendarDays, ListTodo } from "lucide-react";
+import { Check, Circle, Flag, CalendarDays, ListTodo, Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { CalendarTask, Calendar } from "@/lib/jmap/types";
 import type { TaskViewFilter } from "@/stores/task-store";
@@ -18,6 +18,7 @@ interface TaskListViewProps {
   onSelectTask: (task: CalendarTask) => void;
   onToggleComplete: (task: CalendarTask) => void;
   selectedTaskId?: string | null;
+  onQuickCreate?: (title: string) => void;
 }
 
 function getTaskPriorityIcon(priority: number) {
@@ -69,9 +70,11 @@ export function TaskListView({
   onSelectTask,
   onToggleComplete,
   selectedTaskId,
+  onQuickCreate,
 }: TaskListViewProps) {
   const t = useTranslations("calendar");
   const timeFormat = useSettingsStore((s) => s.timeFormat);
+  const [quickAddTitle, setQuickAddTitle] = useState("");
 
   const filteredTasks = useMemo(() => {
     let result = tasks.filter(task => {
@@ -128,15 +131,57 @@ export function TaskListView({
 
   if (filteredTasks.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground py-12">
-        <ListTodo className="h-12 w-12 mb-3 opacity-30" />
-        <p className="text-sm">{t("tasks.no_tasks")}</p>
+      <div className="flex flex-col flex-1">
+        {onQuickCreate && (
+          <div className="px-4 py-2 border-b border-border">
+            <div className="flex items-center gap-2">
+              <Plus className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+              <input
+                type="text"
+                value={quickAddTitle}
+                onChange={(e) => setQuickAddTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && quickAddTitle.trim()) {
+                    onQuickCreate(quickAddTitle.trim());
+                    setQuickAddTitle("");
+                  }
+                }}
+                placeholder={t("tasks.quick_add_placeholder")}
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          </div>
+        )}
+        <div className="flex flex-col items-center justify-center flex-1 text-muted-foreground py-12">
+          <ListTodo className="h-12 w-12 mb-3 opacity-30" />
+          <p className="text-sm">{t("tasks.no_tasks")}</p>
+        </div>
       </div>
     );
   }
 
   return (
     <div className="flex-1 overflow-y-auto">
+      {onQuickCreate && (
+        <div className="px-4 py-2 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Plus className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            <input
+              type="text"
+              value={quickAddTitle}
+              onChange={(e) => setQuickAddTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && quickAddTitle.trim()) {
+                  onQuickCreate(quickAddTitle.trim());
+                  setQuickAddTitle("");
+                }
+              }}
+              placeholder={t("tasks.quick_add_placeholder")}
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        </div>
+      )}
       <div className="divide-y divide-border">
         {filteredTasks.map(task => {
           const cal = calendars.find(c => task.calendarIds[c.id]);

components/calendar/task-modal.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { X, Trash2, CalendarDays, Bell, Flag } from "lucide-react";
+import { format, parseISO } from "date-fns";
+import { cn } from "@/lib/utils";
+import type { CalendarTask, Calendar, CalendarEventAlert } from "@/lib/jmap/types";
+
+interface TaskModalProps {
+  task?: CalendarTask | null;
+  calendars: Calendar[];
+  onSave: (data: Partial<CalendarTask>) => void | Promise<void>;
+  onDelete?: (id: string) => void;
+  onClose: () => void;
+  isMobile?: boolean;
+}
+
+type PriorityLevel = "none" | "high" | "medium" | "low";
+type AlertOption = "none" | "at_time" | "5" | "15" | "30" | "60" | "1440";
+
+function priorityToLevel(p: number): PriorityLevel {
+  if (p >= 1 && p <= 4) return "high";
+  if (p === 5) return "medium";
+  if (p >= 6 && p <= 9) return "low";
+  return "none";
+}
+
+function levelToPriority(l: PriorityLevel): number {
+  switch (l) {
+    case "high": return 1;
+    case "medium": return 5;
+    case "low": return 9;
+    default: return 0;
+  }
+}
+
+export function TaskModal({
+  task,
+  calendars,
+  onSave,
+  onDelete,
+  onClose,
+  isMobile,
+}: TaskModalProps) {
+  const t = useTranslations("calendar");
+  const isEdit = !!task;
+  const titleRef = useRef<HTMLInputElement>(null);
+
+  const writableCalendars = calendars.filter(c => !c.isShared || c.myRights?.mayWriteAll || c.myRights?.mayWriteOwn);
+  const defaultCalendarId = writableCalendars[0]?.id ?? calendars[0]?.id ?? "";
+
+  const [title, setTitle] = useState(task?.title ?? "");
+  const [description, setDescription] = useState(task?.description ?? "");
+  const [dueDate, setDueDate] = useState(task?.due ? format(parseISO(task.due), "yyyy-MM-dd") : "");
+  const [dueTime, setDueTime] = useState(task?.due && !task.showWithoutTime ? format(parseISO(task.due), "HH:mm") : "");
+  const [showTime, setShowTime] = useState(task?.due ? !task.showWithoutTime : false);
+  const [priority, setPriority] = useState<PriorityLevel>(priorityToLevel(task?.priority ?? 0));
+  const [progress, setProgress] = useState<CalendarTask["progress"]>(task?.progress ?? "needs-action");
+  const [calendarId, setCalendarId] = useState(() => {
+    if (task) {
+      const ids = Object.keys(task.calendarIds);
+      return ids[0] ?? defaultCalendarId;
+    }
+    return defaultCalendarId;
+  });
+  const [alertOption, setAlertOption] = useState<AlertOption>(() => {
+    if (!task?.alerts) return "none";
+    const first = Object.values(task.alerts)[0];
+    if (!first || first.trigger["@type"] !== "OffsetTrigger") return "none";
+    const offset = first.trigger.offset;
+    if (offset === "PT0S") return "at_time";
+    const m = offset.match(/-?PT?(\d+)M$/);
+    if (m) return m[1] as AlertOption;
+    const h = offset.match(/-?PT?(\d+)H$/);
+    if (h) return String(parseInt(h[1]) * 60) as AlertOption;
+    const d = offset.match(/-?P(\d+)D/);
+    if (d) return String(parseInt(d[1]) * 1440) as AlertOption;
+    return "none";
+  });
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    titleRef.current?.focus();
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!title.trim()) return;
+    setSaving(true);
+    try {
+      let due: string | null = null;
+      let showWithoutTime = true;
+      if (dueDate) {
+        if (showTime && dueTime) {
+          due = `${dueDate}T${dueTime}:00`;
+          showWithoutTime = false;
+        } else {
+          due = `${dueDate}T00:00:00`;
+          showWithoutTime = true;
+        }
+      }
+
+      let alerts: Record<string, CalendarEventAlert> | null = null;
+      if (alertOption !== "none") {
+        const offset = alertOption === "at_time" ? "PT0S" : `-PT${alertOption}M`;
+        alerts = {
+          "default-alert": {
+            "@type": "Alert",
+            trigger: { "@type": "OffsetTrigger", offset, relativeTo: "start" },
+            action: "display",
+            acknowledged: null,
+            relatedTo: null,
+          },
+        };
+      }
+
+      const data: Partial<CalendarTask> = {
+        "@type": "Task",
+        title: title.trim(),
+        description: description.trim() || "",
+        due,
+        showWithoutTime,
+        priority: levelToPriority(priority),
+        progress,
+        calendarIds: { [calendarId]: true },
+        alerts,
+      };
+
+      if (isEdit && task) {
+        data.id = task.id;
+      }
+
+      await onSave(data);
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  }, [title, description, dueDate, dueTime, showTime, priority, progress, calendarId, alertOption, isEdit, task, onSave, onClose]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    }
+  }, [onClose, handleSave]);
+
+  return (
+    <div className="flex flex-col h-full bg-background" onKeyDown={handleKeyDown}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h2 className="text-sm font-semibold">
+          {isEdit ? t("tasks.edit") : t("tasks.create")}
+        </h2>
+        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onClose}>
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Title */}
+        <Input
+          ref={titleRef}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder={t("tasks.title_placeholder")}
+          className="text-base font-medium"
+        />
+
+        {/* Description */}
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder={t("tasks.description_placeholder")}
+          rows={3}
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"
+        />
+
+        {/* Due Date */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <CalendarDays className="h-3.5 w-3.5" />
+            {t("tasks.due_date")}
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              type="date"
+              value={dueDate}
+              onChange={(e) => setDueDate(e.target.value)}
+              className="rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+            />
+            {dueDate && (
+              <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showTime}
+                  onChange={(e) => setShowTime(e.target.checked)}
+                  className="rounded"
+                />
+                {t("tasks.include_time")}
+              </label>
+            )}
+            {showTime && (
+              <input
+                type="time"
+                value={dueTime}
+                onChange={(e) => setDueTime(e.target.value)}
+                className="rounded-md border border-input bg-background px-3 py-1.5 text-sm"
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Priority */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Flag className="h-3.5 w-3.5" />
+            {t("tasks.priority")}
+          </label>
+          <select
+            value={priority}
+            onChange={(e) => setPriority(e.target.value as PriorityLevel)}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="none">{t("tasks.priority_none")}</option>
+            <option value="high">{t("tasks.priority_high")}</option>
+            <option value="medium">{t("tasks.priority_medium")}</option>
+            <option value="low">{t("tasks.priority_low")}</option>
+          </select>
+        </div>
+
+        {/* Progress */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground">
+            {t("tasks.progress")}
+          </label>
+          <select
+            value={progress}
+            onChange={(e) => setProgress(e.target.value as CalendarTask["progress"])}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="needs-action">{t("tasks.progress_needs_action")}</option>
+            <option value="in-process">{t("tasks.progress_in_process")}</option>
+            <option value="completed">{t("tasks.progress_completed")}</option>
+            <option value="cancelled">{t("tasks.progress_cancelled")}</option>
+          </select>
+        </div>
+
+        {/* Calendar */}
+        {writableCalendars.length > 1 && (
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-muted-foreground">
+              {t("tasks.calendar")}
+            </label>
+            <select
+              value={calendarId}
+              onChange={(e) => setCalendarId(e.target.value)}
+              className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+            >
+              {writableCalendars.map((cal) => (
+                <option key={cal.id} value={cal.id}>{cal.name}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Alert */}
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Bell className="h-3.5 w-3.5" />
+            {t("tasks.alert")}
+          </label>
+          <select
+            value={alertOption}
+            onChange={(e) => setAlertOption(e.target.value as AlertOption)}
+            className="rounded-md border border-input bg-background px-3 py-1.5 text-sm w-full"
+          >
+            <option value="none">{t("tasks.alert_none")}</option>
+            <option value="at_time">{t("tasks.alert_at_time")}</option>
+            <option value="5">{t("tasks.alert_5min")}</option>
+            <option value="15">{t("tasks.alert_15min")}</option>
+            <option value="30">{t("tasks.alert_30min")}</option>
+            <option value="60">{t("tasks.alert_1hr")}</option>
+            <option value="1440">{t("tasks.alert_1day")}</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-4 py-3 border-t border-border">
+        <div>
+          {isEdit && onDelete && task && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={() => onDelete(task.id)}
+            >
+              <Trash2 className="h-4 w-4 mr-1" />
+              {t("tasks.delete")}
+            </Button>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={onClose}>
+            {t("tasks.cancel")}
+          </Button>
+          <Button size="sm" onClick={handleSave} disabled={!title.trim() || saving}>
+            {t("tasks.save")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/calendar/task-toolbar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { TaskViewFilter } from "@/stores/task-store";
+
+interface TaskToolbarProps {
+  filter: TaskViewFilter;
+  showCompleted: boolean;
+  onFilterChange: (filter: TaskViewFilter) => void;
+  onShowCompletedChange: (show: boolean) => void;
+  onCreateTask: () => void;
+}
+
+const FILTERS: TaskViewFilter[] = ["all", "pending", "completed", "overdue"];
+
+export function TaskToolbar({
+  filter,
+  showCompleted,
+  onFilterChange,
+  onShowCompletedChange,
+  onCreateTask,
+}: TaskToolbarProps) {
+  const t = useTranslations("calendar");
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 border-b border-border flex-wrap">
+      <div className="flex border border-border rounded-md overflow-hidden">
+        {FILTERS.map((f) => (
+          <button
+            key={f}
+            onClick={() => onFilterChange(f)}
+            className={cn(
+              "px-3 py-1.5 text-xs font-medium transition-colors",
+              f === filter
+                ? "bg-primary text-primary-foreground"
+                : "hover:bg-muted text-muted-foreground"
+            )}
+          >
+            {t(`tasks.filter_${f}`)}
+          </button>
+        ))}
+      </div>
+
+      <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none ml-2">
+        <input
+          type="checkbox"
+          checked={showCompleted}
+          onChange={(e) => onShowCompletedChange(e.target.checked)}
+          className="rounded border-border"
+        />
+        {t("tasks.show_completed")}
+      </label>
+
+      <div className="flex-1" />
+
+      <Button size="sm" onClick={onCreateTask}>
+        <Plus className="w-4 h-4 mr-1" />
+        {t("tasks.create")}
+      </Button>
+    </div>
+  );
+}

components/contacts/contact-detail.tsx

@@ -6,7 +6,7 @@ import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Co
 import { Avatar } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import type { ContactCard } from "@/lib/jmap/types";
+import type { ContactCard, AnniversaryDate, PartialDate } from "@/lib/jmap/types";
 import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
 import { useSmimeStore } from "@/stores/smime-store";
 import { parseCertificatePemOrDer, extractCertificateInfo } from "@/lib/smime/certificate-utils";
@@ -26,12 +26,23 @@ function formatPhoneFeatures(features?: Record<string, boolean>): string {
   return Object.keys(features).filter(k => features[k]).join(", ");
 }
 
-function formatDate(dateInput: string | Record<string, unknown>): string {
+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) {
-    const year = dateInput.year as number | undefined;
-    const month = dateInput.month as number | undefined;
-    const day = dateInput.day as number | undefined;
+    if (dateInput['@type'] === 'Timestamp' && typeof dateInput.utc === 'string') {
+      try {
+        const d = new Date(dateInput.utc as string);
+        if (!isNaN(d.getTime())) {
+          return d.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });
+        }
+      } catch { /* fallback */ }
+      return String(dateInput.utc);
+    }
+    const pd = dateInput as PartialDate;
+    const year = pd.year;
+    const month = pd.month;
+    const day = pd.day;
     const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
     const parts: string[] = [];
     if (month && monthNames[month - 1]) parts.push(monthNames[month - 1]);
@@ -282,9 +293,11 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
                   {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.fullAddress
-                          ? a.fullAddress
-                          : [a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
+                        {a.full || a.fullAddress
+                          ? (a.full || a.fullAddress)
+                          : a.components && a.components.length > 0
+                            ? a.components.filter(c => c.kind !== 'separator').map(c => c.value).filter(Boolean).join(", ")
+                            : [a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
                         {a.contexts && <ContextBadge contexts={a.contexts} />}
                       </div>
                       {a.timeZone && (

components/contacts/contact-form.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState, useMemo } from "react";
+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 { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook } from "@/lib/jmap/types";
+import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress } from "@/lib/jmap/types";
 
 interface EmailEntry {
   address: string;
@@ -48,6 +48,7 @@ interface AddressEntry {
 interface ContactFormProps {
   contact?: ContactCard | null;
   addressBooks?: AddressBook[];
+  allKeywords?: string[];
   onSave: (data: Partial<ContactCard>) => Promise<void>;
   onCancel: () => void;
 }
@@ -123,12 +124,73 @@ function Select({ value, onChange, children, className }: {
   );
 }
 
-export function ContactForm({ contact, addressBooks, onSave, onCancel }: ContactFormProps) {
+export function ContactForm({ contact, addressBooks, allKeywords, onSave, onCancel }: ContactFormProps) {
   const t = useTranslations("contacts.form");
   const isEditing = !!contact;
 
   const findComponent = (kind: string) => contact?.name?.components?.find(c => c.kind === kind)?.value || "";
 
+  // Convert RFC 9553 AnniversaryDate to ISO date string for HTML date input
+  function anniversaryDateToString(date: AnniversaryDate): string {
+    if (typeof date === 'string') return date;
+    if (date && typeof date === 'object') {
+      if ('@type' in date && date['@type'] === 'Timestamp' && 'utc' in date) {
+        return (date as { utc: string }).utc.split('T')[0];
+      }
+      const pd = date as PartialDate;
+      if (pd.year && pd.month && pd.day) {
+        return `${String(pd.year).padStart(4, '0')}-${String(pd.month).padStart(2, '0')}-${String(pd.day).padStart(2, '0')}`;
+      }
+      if (pd.month && pd.day) {
+        return `--${String(pd.month).padStart(2, '0')}-${String(pd.day).padStart(2, '0')}`;
+      }
+      if (pd.year && pd.month) {
+        return `${String(pd.year).padStart(4, '0')}-${String(pd.month).padStart(2, '0')}`;
+      }
+      if (pd.year) return String(pd.year);
+    }
+    return String(date);
+  }
+
+  // Convert ISO date string back to RFC 9553 PartialDate for the server
+  function stringToPartialDate(str: string): PartialDate {
+    if (str.startsWith('--')) {
+      const parts = str.substring(2).split('-');
+      const pd: PartialDate = { month: parseInt(parts[0], 10) };
+      if (parts[1]) pd.day = parseInt(parts[1], 10);
+      return pd;
+    }
+    const parts = str.split('-');
+    const pd: PartialDate = {};
+    if (parts[0]) pd.year = parseInt(parts[0], 10);
+    if (parts[1]) pd.month = parseInt(parts[1], 10);
+    if (parts[2]) pd.day = parseInt(parts[2], 10);
+    return pd;
+  }
+
+  // Extract flat address fields from RFC 9553 components format
+  function addressToFlat(a: ContactAddress): AddressEntry {
+    if (a.components && a.components.length > 0) {
+      const findComp = (kind: string) => a.components!.filter(c => c.kind === kind).map(c => c.value).join(' ');
+      return {
+        street: findComp('name') || findComp('number') ? [findComp('number'), findComp('name')].filter(Boolean).join(' ') : '',
+        locality: findComp('locality'),
+        region: findComp('region'),
+        postcode: findComp('postcode'),
+        country: findComp('country'),
+        context: a.contexts?.work ? 'work' : a.contexts?.private ? 'private' : '',
+      };
+    }
+    return {
+      street: a.street || '',
+      locality: a.locality || '',
+      region: a.region || '',
+      postcode: a.postcode || '',
+      country: a.country || '',
+      context: a.contexts?.work ? 'work' : a.contexts?.private ? 'private' : '',
+    };
+  }
+
   const [prefix, setPrefix] = useState(findComponent("prefix"));
   const [givenName, setGivenName] = useState(findComponent("given"));
   const [additionalName, setAdditionalName] = useState(findComponent("additional"));
@@ -184,14 +246,7 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
 
   const [addresses, setAddresses] = useState<AddressEntry[]>(() => {
     if (contact?.addresses) {
-      return Object.values(contact.addresses).map(a => ({
-        street: a.street || "",
-        locality: a.locality || "",
-        region: a.region || "",
-        postcode: a.postcode || "",
-        country: a.country || "",
-        context: a.contexts?.work ? "work" : a.contexts?.private ? "private" : "",
-      }));
+      return Object.values(contact.addresses).map(a => addressToFlat(a));
     }
     return [];
   });
@@ -210,7 +265,7 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
   const [anniversaries, setAnniversaries] = useState<AnniversaryEntry[]>(() => {
     if (contact?.anniversaries) {
       return Object.values(contact.anniversaries).map(a => ({
-        date: a.date,
+        date: anniversaryDateToString(a.date),
         kind: a.kind,
       }));
     }
@@ -336,12 +391,13 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
 
     const addressesMap: Record<string, ContactCard["addresses"] extends Record<string, infer V> ? V : never> = {};
     addresses.filter(a => a.street.trim() || a.locality.trim() || a.country.trim()).forEach((a, i) => {
-      const obj: Record<string, unknown> = {};
-      if (a.street.trim()) obj.street = a.street.trim();
-      if (a.locality.trim()) obj.locality = a.locality.trim();
-      if (a.region.trim()) obj.region = a.region.trim();
-      if (a.postcode.trim()) obj.postcode = a.postcode.trim();
-      if (a.country.trim()) obj.country = a.country.trim();
+      const components: Array<{ kind: string; value: string }> = [];
+      if (a.street.trim()) components.push({ kind: "name", value: a.street.trim() });
+      if (a.locality.trim()) components.push({ kind: "locality", value: a.locality.trim() });
+      if (a.region.trim()) components.push({ kind: "region", value: a.region.trim() });
+      if (a.postcode.trim()) components.push({ kind: "postcode", value: a.postcode.trim() });
+      if (a.country.trim()) components.push({ kind: "country", value: a.country.trim() });
+      const obj: Record<string, unknown> = { components, isOrdered: true, defaultSeparator: ", " };
       if (a.context) obj.contexts = { [a.context]: true };
       // @ts-expect-error - dynamic build
       addressesMap[`a${i}`] = obj;
@@ -357,7 +413,7 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
 
     const anniversariesMap: Record<string, ContactAnniversary> = {};
     anniversaries.filter(a => a.date.trim()).forEach((a, i) => {
-      anniversariesMap[`an${i}`] = { date: a.date.trim(), kind: a.kind };
+      anniversariesMap[`an${i}`] = { date: stringToPartialDate(a.date.trim()), kind: a.kind };
     });
 
     const personalInfoMap: Record<string, ContactPersonalInfo> = {};
@@ -764,14 +820,14 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
 
           {/* Categories */}
           <FormSection icon={Tag} title={t("categories")} collapsible defaultOpen category="digital">
-            <div>
-              <Input
-                value={keywordsStr}
-                onChange={(e) => setKeywordsStr(e.target.value)}
-                placeholder={t("categories_placeholder")}
-              />
-              <p className="text-xs text-muted-foreground mt-1.5">{t("categories_hint")}</p>
-            </div>
+            <CategoryComboBox
+              keywordsStr={keywordsStr}
+              onChange={setKeywordsStr}
+              allKeywords={allKeywords || []}
+              placeholder={t("categories_placeholder")}
+              hint={t("categories_hint")}
+              addLabel={t("category_add")}
+            />
           </FormSection>
 
           {/* Gender */}
@@ -840,3 +896,142 @@ export function ContactForm({ contact, addressBooks, onSave, onCancel }: Contact
     </form>
   );
 }
+
+function CategoryComboBox({
+  keywordsStr,
+  onChange,
+  allKeywords,
+  placeholder,
+  hint,
+  addLabel,
+}: {
+  keywordsStr: string;
+  onChange: (value: string) => void;
+  allKeywords: string[];
+  placeholder: string;
+  hint: string;
+  addLabel: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Parse current keywords from comma-separated string
+  const currentKeywords = useMemo(() => {
+    return keywordsStr.split(",").map(k => k.trim()).filter(Boolean);
+  }, [keywordsStr]);
+
+  // Suggestions: existing keywords not already selected
+  const suggestions = useMemo(() => {
+    const lower = inputValue.toLowerCase();
+    return allKeywords.filter(kw =>
+      !currentKeywords.includes(kw) &&
+      (!lower || kw.toLowerCase().includes(lower))
+    );
+  }, [allKeywords, currentKeywords, inputValue]);
+
+  // Can add a new keyword if typed text is non-empty and not already in the list
+  const canAddNew = inputValue.trim() &&
+    !currentKeywords.includes(inputValue.trim()) &&
+    !allKeywords.some(kw => kw.toLowerCase() === inputValue.trim().toLowerCase());
+
+  const addKeyword = useCallback((keyword: string) => {
+    const trimmed = keyword.trim();
+    if (!trimmed || currentKeywords.includes(trimmed)) return;
+    const next = [...currentKeywords, trimmed].join(", ");
+    onChange(next);
+    setInputValue("");
+  }, [currentKeywords, onChange]);
+
+  const removeKeyword = useCallback((keyword: string) => {
+    const next = currentKeywords.filter(k => k !== keyword).join(", ");
+    onChange(next);
+  }, [currentKeywords, onChange]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (inputValue.trim()) {
+        addKeyword(inputValue);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      {/* Keyword badges */}
+      {currentKeywords.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-2">
+          {currentKeywords.map(kw => (
+            <span
+              key={kw}
+              className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary border border-primary/20"
+            >
+              {kw}
+              <button
+                type="button"
+                onClick={() => removeKeyword(kw)}
+                className="hover:text-destructive transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Input with dropdown */}
+      <Input
+        ref={inputRef}
+        value={inputValue}
+        onChange={(e) => { setInputValue(e.target.value); setIsOpen(true); }}
+        onFocus={() => setIsOpen(true)}
+        onKeyDown={handleKeyDown}
+        placeholder={currentKeywords.length === 0 ? placeholder : ""}
+      />
+      <p className="text-xs text-muted-foreground mt-1.5">{hint}</p>
+
+      {/* Dropdown */}
+      {isOpen && (suggestions.length > 0 || canAddNew) && (
+        <div className="absolute left-0 right-0 top-[calc(100%-1.5rem)] mt-1 rounded-md border border-border bg-popover text-popover-foreground shadow-md z-50 max-h-48 overflow-y-auto py-1">
+          {suggestions.map(kw => (
+            <button
+              key={kw}
+              type="button"
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+              onClick={() => { addKeyword(kw); inputRef.current?.focus(); }}
+            >
+              <Tag className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+              {kw}
+            </button>
+          ))}
+          {canAddNew && (
+            <button
+              type="button"
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left text-primary"
+              onClick={() => { addKeyword(inputValue); inputRef.current?.focus(); }}
+            >
+              <Plus className="w-3.5 h-3.5 flex-shrink-0" />
+              {addLabel}: &quot;{inputValue.trim()}&quot;
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

components/contacts/contact-list-item.tsx

@@ -32,7 +32,7 @@ export function ContactListItem({ contact, isSelected, isChecked, hasSelection,
       ? Array.from(selectedContactIds)
       : [contact.id];
 
-    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.effectAllowed = "copyMove";
     e.dataTransfer.setData("application/x-contact-ids", JSON.stringify(ids));
     e.dataTransfer.setData("text/plain", name || email || contact.id);
 

components/contacts/contacts-sidebar.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { useMemo, useState, useCallback, type DragEvent } from "react";
+import { useMemo, useState, useCallback, useEffect, useRef, type DragEvent } from "react";
 import { useTranslations } from "next-intl";
-import { BookUser, Users, Plus, UserPlus, Share2, Book } from "lucide-react";
+import { BookUser, Users, Plus, Share2, Book, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
+import { useContextMenu } from "@/hooks/use-context-menu";
 import { cn } from "@/lib/utils";
 import type { ContactCard, AddressBook } from "@/lib/jmap/types";
 import { getContactDisplayName } from "@/stores/contact-store";
 
-export type ContactCategory = "all" | { groupId: string } | { addressBookId: string };
+export type ContactCategory = "all" | { groupId: string } | { addressBookId: string } | { keyword: string } | "uncategorized";
 
 interface ContactsSidebarProps {
   groups: ContactCard[];
@@ -18,10 +20,31 @@ interface ContactsSidebarProps {
   onSelectCategory: (category: ContactCategory) => void;
   onCreateGroup: () => void;
   onCreateContact: () => void;
+  onImport?: () => void;
+  onEditGroup?: (groupId: string) => void;
+  onDeleteGroup?: (groupId: string) => void;
   onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
+  onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
   className?: string;
 }
 
+const COLLAPSED_KEY = "contacts-sidebar-collapsed";
+
+function loadCollapsed(): Record<string, boolean> {
+  try {
+    const v = localStorage.getItem(COLLAPSED_KEY);
+    return v ? JSON.parse(v) : {};
+  } catch {
+    return {};
+  }
+}
+
+function saveCollapsed(state: Record<string, boolean>) {
+  try {
+    localStorage.setItem(COLLAPSED_KEY, JSON.stringify(state));
+  } catch { /* ignore */ }
+}
+
 export function ContactsSidebar({
   groups,
   individuals,
@@ -30,10 +53,43 @@ export function ContactsSidebar({
   onSelectCategory,
   onCreateGroup,
   onCreateContact,
+  onImport,
+  onEditGroup,
+  onDeleteGroup,
   onDropContacts,
+  onDropContactsToCategory,
   className,
 }: ContactsSidebarProps) {
   const t = useTranslations("contacts");
+  const { contextMenu: groupContextMenu, openContextMenu: openGroupContextMenu, closeContextMenu: closeGroupContextMenu, menuRef: groupMenuRef } = useContextMenu<ContactCard>();
+
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>(loadCollapsed);
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const menuBtnRef = useRef<HTMLButtonElement>(null);
+
+  const toggleSection = useCallback((key: string) => {
+    setCollapsed(prev => {
+      const next = { ...prev, [key]: !prev[key] };
+      saveCollapsed(next);
+      return next;
+    });
+  }, []);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!showMenu) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        menuRef.current && !menuRef.current.contains(e.target as Node) &&
+        menuBtnRef.current && !menuBtnRef.current.contains(e.target as Node)
+      ) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showMenu]);
 
   const sortedGroups = useMemo(() => {
     return [...groups].sort((a, b) =>
@@ -73,25 +129,101 @@ export function ContactsSidebar({
       if (!contact.addressBookIds) continue;
       for (const bookId of Object.keys(contact.addressBookIds)) {
         if (!contact.addressBookIds[bookId]) continue;
-        // Build the full namespaced key
-        const key = contact.isShared && contact.accountId ? `${contact.accountId}:${bookId}` : bookId;
-        counts[key] = (counts[key] || 0) + 1;
+        counts[bookId] = (counts[bookId] || 0) + 1;
       }
     }
     return counts;
   }, [individuals]);
 
+  // Auto-collect keywords from all contacts
+  const allKeywords = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const contact of individuals) {
+      if (!contact.keywords) continue;
+      for (const [kw, active] of Object.entries(contact.keywords)) {
+        if (!active) continue;
+        counts[kw] = (counts[kw] || 0) + 1;
+      }
+    }
+    return Object.entries(counts).sort(([a], [b]) => a.localeCompare(b));
+  }, [individuals]);
+
+  // Count of contacts without any keywords
+  const uncategorizedCount = useMemo(() => {
+    return individuals.filter(c => !c.keywords || Object.keys(c.keywords).filter(k => c.keywords![k]).length === 0).length;
+  }, [individuals]);
+
+  // Resolve actual group member counts against living contacts
+  const memberCountByGroup = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const group of groups) {
+      if (!group.members) {
+        counts[group.id] = 0;
+        continue;
+      }
+      const memberKeys = Object.keys(group.members).filter(k => group.members![k]);
+      const normalizedKeys = memberKeys.map(k => k.startsWith('urn:uuid:') ? k.slice(9) : k);
+      counts[group.id] = individuals.filter(c => {
+        if (memberKeys.includes(c.id) || normalizedKeys.includes(c.id)) return true;
+        if (c.uid) {
+          const bareUid = c.uid.startsWith('urn:uuid:') ? c.uid.slice(9) : c.uid;
+          return memberKeys.includes(c.uid) || normalizedKeys.includes(bareUid);
+        }
+        return false;
+      }).length;
+    }
+    return counts;
+  }, [groups, individuals]);
+
   return (
     <div className={cn("flex flex-col h-full bg-secondary", className)}>
       {/* Header */}
       <div className="px-3 border-b border-border flex items-center justify-between" style={{ paddingBlock: 'var(--density-header-py)' }}>
         <span className="text-sm font-semibold truncate">{t("title")}</span>
-        <Button size="icon" variant="ghost" onClick={onCreateContact} className="h-7 w-7 flex-shrink-0">
-          <UserPlus className="w-4 h-4" />
-        </Button>
+        <div className="relative flex-shrink-0">
+          <Button
+            ref={menuBtnRef}
+            size="icon"
+            variant="ghost"
+            onClick={() => setShowMenu(v => !v)}
+            className="h-7 w-7"
+          >
+            <Plus className="w-4 h-4" />
+          </Button>
+          {showMenu && (
+            <div
+              ref={menuRef}
+              className="absolute right-0 top-full mt-1 w-44 rounded-md border border-border bg-background text-foreground shadow-md z-50 py-1"
+            >
+              <button
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+                onClick={() => { setShowMenu(false); onCreateContact(); }}
+              >
+                <UserPlus className="w-4 h-4" />
+                {t("create_new")}
+              </button>
+              <button
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+                onClick={() => { setShowMenu(false); onCreateGroup(); }}
+              >
+                <UsersRound className="w-4 h-4" />
+                {t("groups.create")}
+              </button>
+              {onImport && (
+                <button
+                  className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
+                  onClick={() => { setShowMenu(false); onImport(); }}
+                >
+                  <Upload className="w-4 h-4" />
+                  {t("import.title")}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
 
-      {/* Categories */}
+      {/* Navigation */}
       <div className="flex-1 overflow-y-auto py-1">
         {/* All contacts */}
         <button
@@ -107,19 +239,27 @@ export function ContactsSidebar({
           <BookUser className="w-4 h-4 flex-shrink-0" />
           <span className="truncate">{t("tabs.all")}</span>
           <span className="ml-auto text-xs text-muted-foreground tabular-nums">
-            {individuals.filter(c => !c.isShared).length}
+            {individuals.length}
           </span>
         </button>
 
-        {/* Personal address books */}
+        {/* My Address Books */}
         {personalBooks.length > 0 && (
           <div className="mt-2">
-            <div className="flex items-center justify-between px-3 py-1">
+            <button
+              onClick={() => toggleSection("addressBooks")}
+              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+            >
+              {collapsed.addressBooks ? (
+                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+              )}
               <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 {t("address_books.title")}
               </span>
-            </div>
-            {personalBooks.map((book) => (
+            </button>
+            {!collapsed.addressBooks && personalBooks.map((book) => (
               <AddressBookItem
                 key={book.id}
                 book={book}
@@ -133,29 +273,33 @@ export function ContactsSidebar({
         )}
 
         {/* Groups section */}
-        {(sortedGroups.length > 0) && (
+        {sortedGroups.length > 0 && (
           <div className="mt-2">
-            <div className="flex items-center justify-between px-3 py-1">
+            <button
+              onClick={() => toggleSection("groups")}
+              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+            >
+              {collapsed.groups ? (
+                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+              )}
               <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 {t("tabs.groups")}
               </span>
-              <Button size="icon" variant="ghost" onClick={onCreateGroup} className="h-5 w-5">
-                <Plus className="w-3 h-3" />
-              </Button>
-            </div>
+            </button>
 
-            {sortedGroups.map((group) => {
+            {!collapsed.groups && sortedGroups.map((group) => {
               const isActive = typeof activeCategory === "object" && "groupId" in activeCategory && activeCategory.groupId === group.id;
-              const memberCount = group.members
-                ? Object.values(group.members).filter(Boolean).length
-                : 0;
+              const memberCount = memberCountByGroup[group.id] || 0;
 
               return (
                 <button
                   key={group.id}
                   onClick={() => onSelectCategory({ groupId: group.id })}
+                  onContextMenu={(e) => openGroupContextMenu(e, group)}
                   className={cn(
-                    "w-full flex items-center gap-2 px-3 text-sm transition-colors",
+                    "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
                     isActive
                       ? "bg-accent text-accent-foreground font-medium"
                       : "text-foreground/80 hover:bg-muted"
@@ -173,35 +317,76 @@ export function ContactsSidebar({
           </div>
         )}
 
-        {sortedGroups.length === 0 && (
-          <div className="mt-2 px-3">
-            <div className="flex items-center justify-between py-1">
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {t("tabs.groups")}
-              </span>
-            </div>
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={onCreateGroup}
-              className="w-full justify-start text-xs text-muted-foreground h-7"
-            >
-              <Plus className="w-3 h-3 mr-1.5" />
-              {t("groups.create")}
-            </Button>
-          </div>
-        )}
+        {/* Categories section (from contact keywords) */}
+        <div className="mt-2">
+          <button
+            onClick={() => toggleSection("categories")}
+            className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+          >
+            {collapsed.categories ? (
+              <ChevronRight className="w-3 h-3 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-3 h-3 text-muted-foreground" />
+            )}
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              {t("detail.categories")}
+            </span>
+          </button>
+
+          {!collapsed.categories && (
+            <>
+              {/* No Category item */}
+              <button
+                onClick={() => onSelectCategory("uncategorized")}
+                className={cn(
+                  "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
+                  activeCategory === "uncategorized"
+                    ? "bg-accent text-accent-foreground font-medium"
+                    : "text-foreground/80 hover:bg-muted"
+                )}
+                style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
+              >
+                <Tag className="w-3.5 h-3.5 flex-shrink-0 opacity-50" />
+                <span className="truncate italic">{t("no_category")}</span>
+                <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+                  {uncategorizedCount}
+                </span>
+              </button>
+              {allKeywords.map(([keyword, count]) => {
+                const isActive = typeof activeCategory === "object" && "keyword" in activeCategory && activeCategory.keyword === keyword;
+                return (
+                  <CategoryItem
+                    key={keyword}
+                    keyword={keyword}
+                    count={count}
+                    isActive={isActive}
+                    onSelect={() => onSelectCategory({ keyword })}
+                    onDropContacts={onDropContactsToCategory}
+                  />
+                );
+              })}
+            </>
+          )}
+        </div>
 
         {/* Shared accounts with address books */}
         {sharedBookGroups.map((group) => (
           <div key={group.accountId} className="mt-2">
-            <div className="flex items-center justify-between px-3 py-1">
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1">
-                <Share2 className="w-3 h-3" />
-                {group.accountName}
+            <button
+              onClick={() => toggleSection(`shared-${group.accountId}`)}
+              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
+            >
+              {collapsed[`shared-${group.accountId}`] ? (
+                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+              )}
+              <Share2 className="w-3 h-3 text-muted-foreground" />
+              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">
+                {t("address_books.shared_prefix", { name: group.accountName })}
               </span>
-            </div>
-            {group.books.map((book) => (
+            </button>
+            {!collapsed[`shared-${group.accountId}`] && group.books.map((book) => (
               <AddressBookItem
                 key={book.id}
                 book={book}
@@ -214,10 +399,104 @@ export function ContactsSidebar({
           </div>
         ))}
       </div>
+
+      {/* Group context menu */}
+      {groupContextMenu.data && (
+        <ContextMenu
+          ref={groupMenuRef}
+          isOpen={groupContextMenu.isOpen}
+          position={groupContextMenu.position}
+          onClose={closeGroupContextMenu}
+        >
+          <ContextMenuItem
+            icon={Pencil}
+            label={t("groups.edit")}
+            onClick={() => {
+              closeGroupContextMenu();
+              onEditGroup?.(groupContextMenu.data!.id);
+            }}
+          />
+          <ContextMenuSeparator />
+          <ContextMenuItem
+            icon={Trash2}
+            label={t("form.delete")}
+            onClick={() => {
+              closeGroupContextMenu();
+              onDeleteGroup?.(groupContextMenu.data!.id);
+            }}
+            destructive
+          />
+        </ContextMenu>
+      )}
     </div>
   );
 }
 
+function CategoryItem({
+  keyword,
+  count,
+  isActive,
+  onSelect,
+  onDropContacts,
+}: {
+  keyword: string;
+  count: number;
+  isActive: boolean;
+  onSelect: () => void;
+  onDropContacts?: (contactIds: string[], keyword: string) => void;
+}) {
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLButtonElement>) => {
+    if (!e.dataTransfer.types.includes("application/x-contact-ids")) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const data = e.dataTransfer.getData("application/x-contact-ids");
+    if (!data || !onDropContacts) return;
+    try {
+      const contactIds = JSON.parse(data) as string[];
+      if (contactIds.length > 0) {
+        onDropContacts(contactIds, keyword);
+      }
+    } catch {
+      // ignore invalid data
+    }
+  }, [keyword, onDropContacts]);
+
+  return (
+    <button
+      onClick={onSelect}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={cn(
+        "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
+        isActive
+          ? "bg-accent text-accent-foreground font-medium"
+          : "text-foreground/80 hover:bg-muted",
+        isDragOver && "bg-primary/20 ring-2 ring-primary/50"
+      )}
+      style={{ paddingBlock: 'var(--density-sidebar-py, 4px)', minHeight: '32px' }}
+    >
+      <Tag className="w-3.5 h-3.5 flex-shrink-0" />
+      <span className="truncate">{keyword}</span>
+      <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+        {count}
+      </span>
+    </button>
+  );
+}
+
 function AddressBookItem({
   book,
   isActive,
@@ -266,7 +545,7 @@ function AddressBookItem({
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
       className={cn(
-        "w-full flex items-center gap-2 px-3 text-sm transition-colors",
+        "w-full flex items-center gap-2 pl-5 pr-3 text-sm transition-colors",
         isActive
           ? "bg-accent text-accent-foreground font-medium"
           : "text-foreground/80 hover:bg-muted",

components/email/email-composer.tsx

@@ -27,6 +27,15 @@ import { substitutePlaceholders } from "@/lib/template-utils";
 import { TemplatePicker } from "@/components/templates/template-picker";
 import { TemplateForm } from "@/components/templates/template-form";
 import type { EmailTemplate } from "@/lib/template-types";
+import { appendPlainTextSignature, getPlainTextSignature } from "@/lib/signature-utils";
+import { RichTextEditor } from "@/components/email/rich-text-editor";
+
+/** Strip HTML tags and decode entities to get a plain-text version */
+function htmlToPlainText(html: string): string {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || '';
+}
 
 export interface ComposerDraftData {
   to: string;
@@ -124,23 +133,28 @@ export function EmailComposer({
   };
 
   const getInitialBody = () => {
-    const prefix = initialDraftText || "";
+    const prefix = initialDraftText ? `<p>${initialDraftText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>` : "";
     if (!replyTo?.body && !replyTo?.htmlBody) return prefix;
 
     const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
     const from = replyTo.from?.[0];
     const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
 
-    // When HTML body is available, don't include quoted text in the textarea
-    // The HTML original will be shown separately below the textarea
+    // Build quoted content as HTML
     if (replyTo.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      return prefix;
+      const quoteHeader = mode === 'forward'
+        ? `---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
+        : `On ${date}, ${fromStr} wrote:<br>`;
+      return `${prefix}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote>`;
     }
 
-    if (mode === 'forward') {
-      return `${prefix}\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ""}\n\n${replyTo.body}`;
-    } else if (mode === 'reply' || mode === 'replyAll') {
-      return `${prefix}\n\nOn ${date}, ${fromStr} wrote:\n> ${(replyTo.body || '').split('\n').join('\n> ')}`;
+    if (replyTo.body) {
+      const escapedOriginal = replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
+      if (mode === 'forward') {
+        return `${prefix}<br><br>---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>${escapedOriginal}`;
+      } else if (mode === 'reply' || mode === 'replyAll') {
+        return `${prefix}<br><br>On ${date}, ${fromStr} wrote:<br><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escapedOriginal}</blockquote>`;
+      }
     }
     return prefix;
   };
@@ -156,18 +170,6 @@ export function EmailComposer({
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastSavedDataRef = useRef<string>("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const autoResizeTextarea = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = el.scrollHeight + 'px';
-  }, []);
-
-  useEffect(() => {
-    autoResizeTextarea();
-  }, [body, autoResizeTextarea]);
   const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean; abortController?: AbortController }>>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [validationErrors, setValidationErrors] = useState<{ to?: boolean; subject?: boolean; body?: boolean }>({});
@@ -199,6 +201,14 @@ export function EmailComposer({
   const { client } = useAuthStore();
   const identities = useIdentityStore((s) => s.identities);
   const primaryIdentity = identities[0] ?? null;
+  const currentIdentity = selectedIdentityId
+    ? identities.find((identity) => identity.id === selectedIdentityId) || primaryIdentity
+    : primaryIdentity;
+  const composerSignatureHtml = currentIdentity?.htmlSignature
+    ? `<div>${sanitizeEmailHtml(currentIdentity.htmlSignature)}</div>`
+    : currentIdentity?.textSignature
+      ? `<div>${getPlainTextSignature(currentIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
+      : '';
   const getAutocomplete = useContactStore((s) => s.getAutocomplete);
   const addTemplate = useTemplateStore((s) => s.addTemplate);
   const sendRawEmail = useEmailStore((s) => s.sendRawEmail);
@@ -358,9 +368,12 @@ export function EmailComposer({
       ? substitutePlaceholders(template.body, filledValues)
       : template.body;
 
+    // Convert template plain text body to HTML for the rich text editor
+    const htmlBody = `<p>${filledBody.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`;
+
     if (mode === 'compose') {
       setSubject(filledSubject);
-      setBody(filledBody);
+      setBody(htmlBody);
       if (template.defaultRecipients?.to?.length) {
         setTo(template.defaultRecipients.to.join(', ') + ', ');
       }
@@ -373,7 +386,7 @@ export function EmailComposer({
         setShowBcc(true);
       }
     } else {
-      setBody((prev) => filledBody + prev);
+      setBody((prev) => htmlBody + prev);
     }
 
     if (template.identityId) {
@@ -385,8 +398,10 @@ export function EmailComposer({
 
   useEffect(() => {
     const handleTemplateKey = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName?.toLowerCase();
+      const target = e.target as HTMLElement;
+      const tag = target?.tagName?.toLowerCase();
       if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
+      if (target?.getAttribute('contenteditable') === 'true') return;
       if (e.key === 't' && !e.ctrlKey && !e.metaKey && !e.altKey) {
         e.preventDefault();
         setShowTemplatePicker(true);
@@ -436,6 +451,18 @@ export function EmailComposer({
     }
   }, [client, t]);
 
+  const handleImageUpload = useCallback(async (file: File): Promise<string | null> => {
+    if (!client) return null;
+    try {
+      const { blobId } = await client.uploadBlob(file);
+      return await client.fetchBlobAsObjectUrl(blobId, file.name, file.type);
+    } catch (error) {
+      debug.error(`Failed to upload inline image ${file.name}:`, error);
+      toast.error(t('upload_failed', { filename: file.name }));
+      return null;
+    }
+  }, [client, t]);
+
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!event.target.files) return;
     await addFiles(Array.from(event.target.files));
@@ -502,7 +529,7 @@ export function EmailComposer({
     const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
     const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
 
-    if (!toAddresses.length && !subject && !body) {
+    if (!toAddresses.length && !subject && !htmlToPlainText(body).trim()) {
       return null;
     }
 
@@ -527,10 +554,6 @@ export function EmailComposer({
     setSaveStatus('saving');
 
     // Get the selected identity or primary identity
-    const currentIdentity = selectedIdentityId
-      ? identities.find(id => id.id === selectedIdentityId)
-      : primaryIdentity;
-
     // Generate sub-addressed email if tag is set
     const fromEmail = currentIdentity?.email
       ? subAddressTag
@@ -542,7 +565,7 @@ export function EmailComposer({
       const savedDraftId = await client.createDraft(
         toAddresses,
         subject || t('no_subject'),
-        body,
+        htmlToPlainText(body),
         ccAddresses,
         bccAddresses,
         currentIdentity?.id,
@@ -606,7 +629,8 @@ export function EmailComposer({
   }, []);
 
   const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
-  const hasContent = body || attachments.some(att => att.blobId && !att.uploading);
+  const bodyPlainText = htmlToPlainText(body).trim();
+  const hasContent = bodyPlainText || attachments.some(att => att.blobId && !att.uploading);
   const canSend = toAddresses.length > 0 && !!subject && hasContent;
 
   const getSendTooltip = (): string | undefined => {
@@ -649,39 +673,14 @@ export function EmailComposer({
       }
     }
 
-    const currentIdentity = selectedIdentityId
-      ? identities.find(id => id.id === selectedIdentityId)
-      : primaryIdentity;
-
     const fromEmail = currentIdentity?.email
       ? subAddressTag
         ? generateSubAddress(currentIdentity.email, subAddressTag)
         : currentIdentity.email
       : undefined;
 
-    // Append signature from the selected identity
-    let finalBody = body;
-    if (currentIdentity?.textSignature) {
-      finalBody = body + '\n\n-- \n' + currentIdentity.textSignature;
-    }
-
-    // Append quoted original text for the plain text part in reply/forward
-    if (replyTo && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      const originalText = replyTo.body || '';
-      if (originalText) {
-        const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : '';
-        const fromAddr = replyTo.from?.[0];
-        const fromStr = fromAddr ? `${fromAddr.name || fromAddr.email}` : tCommon('unknown');
-
-        if (mode === 'forward') {
-          finalBody += `\n\n---------- ${t('prefix.forward')} ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ''}\n\n${originalText}`;
-        } else {
-          finalBody += `\n\nOn ${date}, ${fromStr} wrote:\n> ${originalText.split('\n').join('\n> ')}`;
-        }
-      }
-    }
-
-    // Build HTML signature block (prefer htmlSignature, fall back to escaped textSignature)
+    // Body is already HTML from the rich text editor.
+    // Build HTML signature block
     const buildSignatureHtml = (): string => {
       if (currentIdentity?.htmlSignature) {
         return `<br><br>-- <br>${sanitizeEmailHtml(currentIdentity.htmlSignature)}`;
@@ -692,26 +691,13 @@ export function EmailComposer({
       return '';
     };
 
-    // Build HTML body
-    let finalHtmlBody: string | undefined;
     const signatureHtml = buildSignatureHtml();
 
-    if (replyTo?.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
-      // Reply/forward with original HTML content
-      const escapedBody = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
-      const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : '';
-      const fromAddr = replyTo.from?.[0];
-      const fromStr = fromAddr ? `${fromAddr.name || fromAddr.email}` : tCommon('unknown');
-      const quoteHeader = mode === 'forward'
-        ? `---------- ${t('prefix.forward')} ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
-        : `On ${date}, ${fromStr} wrote:<br>`;
+    // Build final HTML body: editor content + signature
+    const finalHtmlBody = `<div>${body}</div>${signatureHtml}`;
 
-      finalHtmlBody = `<div>${escapedBody}</div>${signatureHtml}<br><div><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote></div>`;
-    } else if (signatureHtml) {
-      // New compose or plain-text reply — include HTML body with signature
-      const escapedBody = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
-      finalHtmlBody = `<div>${escapedBody}</div>${signatureHtml}`;
-    }
+    // Generate plain text version from the HTML body for multipart/alternative
+    const finalBody = appendPlainTextSignature(htmlToPlainText(body), currentIdentity);
 
     try {
       // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
@@ -888,6 +874,7 @@ export function EmailComposer({
   return (
     <div
       className={cn("flex flex-col h-full bg-background relative", className)}
+      data-tour="composer"
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
@@ -1108,39 +1095,23 @@ export function EmailComposer({
           </div>
         </div>
 
-        {/* Body */}
-        <div className="px-4 py-3">
-          <textarea
-            ref={textareaRef}
-            className={cn(
-              "w-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground rounded min-h-[100px] overflow-hidden",
-              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400"
-            )}
-            placeholder={t('body_placeholder')}
-            value={body}
-            onChange={(e) => {
-              setBody(e.target.value);
-              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
-            }}
-            aria-invalid={validationErrors.body || undefined}
-          />
-        </div>
+        {/* Body - Rich Text Editor */}
+        <RichTextEditor
+          content={body}
+          onChange={(html) => {
+            setBody(html);
+            if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
+          }}
+          onImageUpload={handleImageUpload}
+          placeholder={t('body_placeholder')}
+          hasError={validationErrors.body}
+        />
 
-        {/* Quoted original HTML */}
-        {replyTo?.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward') && (
-          <div className="border-t border-border">
-            <div className="px-4 py-2 text-xs text-muted-foreground">
-              {mode === 'forward'
-                ? `---------- ${t('prefix.forward')} ----------`
-                : `${replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : ''}, ${replyTo.from?.[0]?.name || replyTo.from?.[0]?.email || tCommon('unknown')}:`
-              }
-            </div>
-            <div
-              className="email-reply-quote px-4 pb-3 border-l-2 border-muted-foreground/30 ml-4 max-w-none rounded"
-              style={{ backgroundColor: '#ffffff', color: '#1a1a1a', fontSize: '14px' }}
-              dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(replyTo.htmlBody) }}
-            />
-          </div>
+        {composerSignatureHtml && (
+          <div
+            className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
+            dangerouslySetInnerHTML={{ __html: `<div>-- </div>${composerSignatureHtml}` }}
+          />
         )}
       </div>
 

components/email/email-hover-actions.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { Email } from "@/lib/jmap/types";
+import { useSettingsStore } from "@/stores/settings-store";
+import type { HoverAction } from "@/stores/settings-store";
+import { cn } from "@/lib/utils";
+import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+interface EmailHoverActionsProps {
+  email: Email;
+  onToggleStar?: () => void;
+  onMarkAsRead?: (read: boolean) => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  onSetColorTag?: (color: string | null) => void;
+  onMarkAsSpam?: () => void;
+}
+
+const ACTION_CONFIG: Record<HoverAction, {
+  icon: typeof Trash2;
+  titleKey: string;
+  className?: string;
+}> = {
+  delete: {
+    icon: Trash2,
+    titleKey: "delete",
+    className: "hover:text-red-600 dark:hover:text-red-400",
+  },
+  star: {
+    icon: Star,
+    titleKey: "star",
+    className: "hover:text-amber-500 dark:hover:text-amber-400",
+  },
+  markRead: {
+    icon: Mail,
+    titleKey: "mark_read",
+    className: "hover:text-blue-600 dark:hover:text-blue-400",
+  },
+  archive: {
+    icon: Archive,
+    titleKey: "archive",
+    className: "hover:text-green-600 dark:hover:text-green-400",
+  },
+  tag: {
+    icon: Tag,
+    titleKey: "tag",
+    className: "hover:text-purple-600 dark:hover:text-purple-400",
+  },
+  spam: {
+    icon: ShieldAlert,
+    titleKey: "spam",
+    className: "hover:text-orange-600 dark:hover:text-orange-400",
+  },
+};
+
+export function EmailHoverActions({
+  email,
+  onToggleStar,
+  onMarkAsRead,
+  onDelete,
+  onArchive,
+  onSetColorTag,
+  onMarkAsSpam,
+}: EmailHoverActionsProps) {
+  const hoverActions = useSettingsStore((state) => state.hoverActions);
+  const t = useTranslations("settings.email_behavior.hover_actions");
+
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+
+  if (hoverActions.length === 0) return null;
+
+  const handleAction = (e: React.MouseEvent, action: HoverAction) => {
+    e.stopPropagation();
+    e.preventDefault();
+    switch (action) {
+      case "delete":
+        onDelete?.();
+        break;
+      case "star":
+        onToggleStar?.();
+        break;
+      case "markRead":
+        onMarkAsRead?.(!isUnread);
+        break;
+      case "archive":
+        onArchive?.();
+        break;
+      case "tag":
+        onSetColorTag?.(null);
+        break;
+      case "spam":
+        onMarkAsSpam?.();
+        break;
+    }
+  };
+
+  return (
+    <div
+      className="absolute right-0 top-0 bottom-0 z-10 hidden group-hover:flex items-center"
+    >
+      <div className="w-8 h-full bg-gradient-to-r from-transparent to-muted" />
+      <div className="flex items-center gap-0.5 h-full bg-muted pr-3 pl-0.5">
+        {hoverActions.map((actionId) => {
+          const config = ACTION_CONFIG[actionId];
+          if (!config) return null;
+        const Icon = config.icon;
+
+          const DisplayIcon = actionId === "markRead"
+            ? (isUnread ? MailOpen : Mail)
+            : actionId === "star" && isStarred
+              ? Star
+              : Icon;
+
+          return (
+            <button
+              key={actionId}
+              onClick={(e) => handleAction(e, actionId)}
+              title={t(config.titleKey)}
+              className={cn(
+                "p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
+                config.className,
+              )}
+            >
+              <DisplayIcon
+                className={cn(
+                  "w-4 h-4",
+                  actionId === "star" && isStarred && "fill-amber-400 text-amber-400",
+                )}
+              />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/email/email-list-item.tsx

@@ -14,6 +14,7 @@ import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useUIStore } from "@/stores/ui-store";
 import { EmailIdentityBadge } from "./email-identity-badge";
+import { EmailHoverActions } from "./email-hover-actions";
 import { getEmailColorTag } from "@/lib/thread-utils";
 
 interface EmailListItemProps {
@@ -21,9 +22,15 @@ interface EmailListItemProps {
   selected?: boolean;
   onClick?: () => void;
   onContextMenu?: (e: React.MouseEvent, email: Email) => void;
+  onToggleStar?: () => void;
+  onMarkAsRead?: (read: boolean) => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  onSetColorTag?: (color: string | null) => void;
+  onMarkAsSpam?: () => void;
 }
 
-export function EmailListItem({ email, selected, onClick, onContextMenu }: EmailListItemProps) {
+export function EmailListItem({ email, selected, onClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }: EmailListItemProps) {
   const t = useTranslations('email_viewer');
   const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, clearSelection } = useEmailStore();
   const showPreview = useSettingsStore((state) => state.showPreview);
@@ -74,7 +81,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
       {...dragHandlers}
       {...longPressHandlers}
       className={cn(
-        "relative group cursor-pointer select-none transition-all duration-200 border-b border-border",
+        "relative group cursor-pointer select-none transition-shadow duration-200 border-b border-border overflow-hidden",
         // Apply color tag as background, with selected and unread states
         colorTag ? colorTag : (
           selected
@@ -217,6 +224,17 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
           )}
         </div>
       </div>
+
+      {/* Hover Quick Actions */}
+      <EmailHoverActions
+        email={email}
+        onToggleStar={onToggleStar}
+        onMarkAsRead={onMarkAsRead}
+        onDelete={onDelete}
+        onArchive={onArchive}
+        onSetColorTag={onSetColorTag}
+        onMarkAsSpam={onMarkAsSpam}
+      />
     </div>
   );
 }

components/email/email-list.tsx

@@ -358,7 +358,7 @@ export function EmailList({
       )}
 
       {/* Email List */}
-      <div ref={parentRef} className="flex-1 overflow-y-auto bg-background relative">
+      <div ref={parentRef} className="flex-1 overflow-y-auto bg-background relative" data-tour="email-list">
         {/* Loading overlay */}
         {isLoading && emails.length > 0 && (
           <div className="absolute inset-0 bg-background/50 z-10 flex items-center justify-center animate-in fade-in duration-150">
@@ -422,6 +422,12 @@ export function EmailList({
                       onEmailSelect={(email) => onEmailSelect?.(email)}
                       onContextMenu={openContextMenu}
                       onOpenConversation={onOpenConversation}
+                      onToggleStar={onToggleStar ? (email) => onToggleStar(email) : undefined}
+                      onMarkAsRead={onMarkAsRead ? (email, read) => onMarkAsRead(email, read) : undefined}
+                      onDelete={onDelete ? (email) => onDelete(email) : undefined}
+                      onArchive={onArchive ? (email) => onArchive(email) : undefined}
+                      onSetColorTag={onSetColorTag}
+                      onMarkAsSpam={onMarkAsSpam ? (email) => onMarkAsSpam(email) : undefined}
                     />
                   </div>
                 );

components/email/email-viewer.tsx

@@ -5,6 +5,7 @@ import ReactDOM from "react-dom";
 import DOMPurify from "dompurify";
 import { Email, ContactCard, Mailbox } from "@/lib/jmap/types";
 import { EMAIL_SANITIZE_CONFIG, collapseBlockedImageContainers } from "@/lib/email-sanitization";
+import { hasMeaningfulHtmlBody } from "@/lib/signature-utils";
 import { Button } from "@/components/ui/button";
 import { Avatar } from "@/components/ui/avatar";
 import { formatFileSize, cn, buildMailboxTree, MailboxNode, formatDateTime } from "@/lib/utils";
@@ -65,6 +66,7 @@ import {
   Moon,
   HelpCircle,
   EditIcon,
+  PlayCircle,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type { Attachment as PostalMimeAttachment } from 'postal-mime';
@@ -79,6 +81,7 @@ import { useThemeStore } from "@/stores/theme-store";
 import { EmailIdentityBadge } from "./email-identity-badge";
 import { UnsubscribeBanner } from "./unsubscribe-banner";
 import { CalendarInvitationBanner } from "./calendar-invitation-banner";
+import { useTour } from "@/components/tour/tour-provider";
 import { SmimePassphraseDialog } from "@/components/settings/smime-passphrase-dialog";
 import { findCalendarAttachment } from "@/lib/calendar-invitation";
 import { RecipientPopover } from "./recipient-popover";
@@ -104,7 +107,7 @@ interface EmailViewerProps {
   onToggleStar?: () => void;
   onMarkAsRead?: (emailId: string, read: boolean) => void;
   onSetColorTag?: (emailId: string, color: string | null) => void;
-  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string, forceDownload?: boolean) => void;
   onQuickReply?: (body: string) => Promise<void>;
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
@@ -148,6 +151,42 @@ const getFileIcon = (name?: string, type?: string) => {
   return File;
 };
 
+const MIME_TYPE_LABELS: Record<string, string> = {
+  'application/pdf': 'Document.pdf',
+  'application/zip': 'Archive.zip',
+  'application/x-zip-compressed': 'Archive.zip',
+  'application/gzip': 'Archive.gz',
+  'application/x-rar-compressed': 'Archive.rar',
+  'application/x-7z-compressed': 'Archive.7z',
+  'application/msword': 'Document.doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Document.docx',
+  'application/vnd.ms-excel': 'Spreadsheet.xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Spreadsheet.xlsx',
+  'application/vnd.ms-powerpoint': 'Presentation.ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'Presentation.pptx',
+  'text/plain': 'Text.txt',
+  'text/html': 'Document.html',
+  'text/csv': 'Data.csv',
+  'application/json': 'Data.json',
+  'application/xml': 'Data.xml',
+  'application/octet-stream': 'Attachment',
+  'message/rfc822': 'Email.eml',
+};
+
+const getAttachmentDisplayName = (name: string | null | undefined, mimeType?: string): string => {
+  if (name) return name;
+  if (mimeType) {
+    const label = MIME_TYPE_LABELS[mimeType.toLowerCase()];
+    if (label) return label;
+    const sub = mimeType.split('/')[1];
+    if (sub) {
+      const clean = sub.replace(/^x-/, '').replace(/^vnd\./, '');
+      return `Attachment.${clean}`;
+    }
+  }
+  return 'Attachment';
+};
+
 const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
   if (!keywords) return null;
   for (const key of Object.keys(keywords)) {
@@ -706,7 +745,11 @@ function ContactSidebarPanel({
               <SidebarSection icon={MapPin} title="Addresses">
                 {addresses.map((a, i) => (
                   <div key={i} className="text-sm text-muted-foreground">
-                    {[a.street, a.locality, a.region, a.postcode, a.country].filter(Boolean).join(", ")}
+                    {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(", ")}
                   </div>
                 ))}
               </SidebarSection>
@@ -830,8 +873,11 @@ export function EmailViewer({
   const tCommon = useTranslations('common');
   const tSmime = useTranslations('smime');
   const tFiles = useTranslations('files');
+  const tDemoWelcome = useTranslations('demo_welcome');
+  const tWelcome = useTranslations('welcome');
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
   const mailAttachmentAction = useSettingsStore((state) => state.mailAttachmentAction);
+  const attachmentPosition = useSettingsStore((state) => state.attachmentPosition);
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
@@ -856,9 +902,12 @@ export function EmailViewer({
   // Tablet list visibility
   const { isTablet, isMobile } = useDeviceDetection();
   const { tabletListVisible } = useUIStore();
-  const { identities, client } = useAuthStore();
+  const { identities, client, isDemoMode } = useAuthStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const { startTour } = useTour();
   const [showFullHeaders, setShowFullHeaders] = useState(false);
+  const [showAllBesideAttachments, setShowAllBesideAttachments] = useState(false);
+  const [showAllMobileAttachments, setShowAllMobileAttachments] = useState(false);
   const [allowExternalContent, setAllowExternalContent] = useState(false);
   const [hasBlockedContent, setHasBlockedContent] = useState(false);
   const [cidBlobUrls, setCidBlobUrls] = useState<Record<string, string>>({});
@@ -2144,9 +2193,7 @@ export function EmailViewer({
         // Server-generated HTML from text/plain emails often lacks <br> tags, collapsing newlines.
         const hasTextBody = email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId];
         if (hasTextBody && htmlContent) {
-          const stripped = htmlContent.replace(/<\/?(html|head|body|meta|!doctype|!DOCTYPE|br\s*\/?)[^>]*>/gi, '').trim();
-          const hasRichContent = /<(table|tr|td|th|img|style|link|div\s+[^>]*class|span\s+[^>]*class|font|center|blockquote|ul|ol|li|h[1-6])\b/i.test(stripped);
-          useHtmlVersion = hasRichContent;
+          useHtmlVersion = hasMeaningfulHtmlBody(htmlContent);
         } else {
           useHtmlVersion = !!htmlContent;
         }
@@ -2391,6 +2438,44 @@ export function EmailViewer({
     setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
   }, [mailAttachmentAction, onDownloadAttachment]);
 
+  const handleEffectiveAttachmentDownload = useCallback((attachment: EffectiveAttachment) => {
+    if (attachment.blobId && onDownloadAttachment) {
+      onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type, true);
+      return;
+    }
+
+    if (attachment.tnefData) {
+      const buffer = attachment.tnefData.buffer.slice(
+        attachment.tnefData.byteOffset,
+        attachment.tnefData.byteOffset + attachment.tnefData.byteLength,
+      ) as ArrayBuffer;
+      const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+      const objectUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.href = objectUrl;
+      anchor.download = attachment.name || 'download';
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);
+      return;
+    }
+
+    if (!attachment.decryptedAttachment) return;
+    const bytes = getAttachmentContentBytes(attachment.decryptedAttachment);
+    if (!bytes || bytes.byteLength === 0) return;
+    const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+    const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = objectUrl;
+    anchor.download = attachment.name || 'download';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+  }, [onDownloadAttachment]);
+
   // Iframe for rendering HTML emails true-to-life
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -2604,6 +2689,52 @@ export function EmailViewer({
   }
 
   if (!email) {
+    if (isDemoMode) {
+      const logoSrc = resolvedTheme === 'dark'
+        ? '/branding/Bulwark_Logo_with_Lettering_White_and_Color.svg'
+        : '/branding/Bulwark_Logo_with_Lettering_Dark_Color.svg';
+      return (
+        <div className={cn("flex-1 flex flex-col items-center justify-center bg-gradient-to-br from-muted/30 to-muted/50", className)}>
+          <div className="text-center p-8 max-w-md">
+            <img
+              src={logoSrc}
+              alt="Bulwark Mail"
+              className="h-12 mx-auto mb-6"
+            />
+            <h3 className="text-xl font-semibold text-foreground mb-3">{tDemoWelcome('title')}</h3>
+            <p className="text-sm text-muted-foreground mb-6 leading-relaxed">{tDemoWelcome('description')}</p>
+            <div className="flex flex-col gap-3 items-center">
+              <div className="grid grid-cols-2 gap-3 text-left text-sm text-muted-foreground w-full">
+                <div className="flex items-center gap-2">
+                  <Mail className="w-4 h-4 text-primary shrink-0" />
+                  <span>{tDemoWelcome('feature_email')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Star className="w-4 h-4 text-primary shrink-0" />
+                  <span>{tDemoWelcome('feature_organize')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Keyboard className="w-4 h-4 text-primary shrink-0" />
+                  <span>{tDemoWelcome('feature_shortcuts')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Shield className="w-4 h-4 text-primary shrink-0" />
+                  <span>{tDemoWelcome('feature_privacy')}</span>
+                </div>
+              </div>
+              <button
+                onClick={startTour}
+                className="mt-4 inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors text-sm font-medium"
+              >
+                <PlayCircle className="w-4 h-4" />
+                {tWelcome('start_tour')}
+              </button>
+              <p className="text-xs text-muted-foreground/60 mt-2">{tDemoWelcome('hint')}</p>
+            </div>
+          </div>
+        </div>
+      );
+    }
     return (
       <div className={cn("flex-1 flex flex-col items-center justify-center bg-gradient-to-br from-muted/30 to-muted/50", className)}>
         <div className="text-center p-8">
@@ -2910,6 +3041,21 @@ export function EmailViewer({
           <Code className="w-4 h-4" />
         </Button>
 
+        {/* Dark/light mode toggle for HTML emails */}
+        {effectiveEmailContent.isHtml && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+            data-overflow-item
+            data-overflow-priority="11"
+            className="hidden sm:inline-flex h-8 gap-1.5"
+            title={isDark ? 'View in light mode' : 'View in dark mode'}
+          >
+            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          </Button>
+        )}
+
         {/* More menu — click-based */}
         <div ref={moreMenuRef} className="relative">
           <Button
@@ -3092,6 +3238,16 @@ export function EmailViewer({
                 <Code className="w-4 h-4" />
                 {t('view_source')}
               </button>
+              {/* Overflow: dark/light mode toggle */}
+              {effectiveEmailContent.isHtml && (
+                <button
+                  onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                  className={cn("w-full px-3 py-1.5 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2", hiddenPriorities.has(11) ? "" : "sm:hidden")}
+                >
+                  {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+                  {isDark ? 'View in light mode' : 'View in dark mode'}
+                </button>
+              )}
               <div className="h-px bg-border my-1" />
               {/* Export email */}
               <button
@@ -3128,6 +3284,7 @@ export function EmailViewer({
   return (
     <div
       key={email.id}
+      data-tour="email-viewer"
       className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
     >
     {/* Mobile More menu sidebar overlay */}
@@ -3265,6 +3422,15 @@ export function EmailViewer({
             <Code className="w-5 h-5" />
             {t('view_source')}
           </button>
+          {effectiveEmailContent.isHtml && (
+            <button
+              onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); }}
+              className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
+            >
+              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+              {isDark ? 'View in light mode' : 'View in dark mode'}
+            </button>
+          )}
           <div className="h-px bg-border my-1" />
           <button
             onClick={() => { handleExportEmail(); setMoreMenuOpen(false); }}
@@ -3338,7 +3504,7 @@ export function EmailViewer({
             )}
             <div className="flex-1 min-w-0">
               <div className="flex items-start gap-2">
-                <h1 className="text-lg lg:text-2xl font-bold text-foreground tracking-tight break-words min-w-0">
+                <h1 className="text-lg lg:text-xl font-bold text-foreground tracking-tight break-words min-w-0">
                   {email.subject || t('no_subject')}
                 </h1>
                 {/* Star inline with subject (top toolbar mode) */}
@@ -3362,19 +3528,24 @@ export function EmailViewer({
                     <span className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw!.label} />
                   ) : null;
                 })()}
-              </div>
-              <div className="flex items-center gap-2 lg:gap-3 mt-1 lg:mt-1.5 text-xs lg:text-sm text-muted-foreground">
-                <span className="flex items-center gap-1 lg:gap-1.5 whitespace-nowrap">
-                  <Clock className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                  {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                </span>
                 {isImportant && (
-                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap">
+                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
                   </span>
                 )}
               </div>
             </div>
+            {/* Date/time on the right of subject row */}
+            <div className="flex-shrink-0 text-right">
+              <span className="text-xs lg:text-sm text-muted-foreground whitespace-nowrap">
+                {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
+              </span>
+              {email.size > 0 && (
+                <div className="text-xs text-muted-foreground/60">
+                  {formatFileSize(email.size)}
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -3405,13 +3576,14 @@ export function EmailViewer({
                 name={sender?.name}
                 email={sender?.email}
                 size="lg"
-                className="shadow-sm w-12 h-12 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
+                className="shadow-sm w-10 h-10 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
               />
             </button>
 
-            <div className="flex-1 min-w-0">
-              {/* Sender line with email and badges */}
-              <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0 flex gap-4">
+              <div className="flex-1 min-w-0">
+              {/* Row 1: Sender name + badges */}
+              <div>
                 <div className="min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
                     <button
@@ -3422,103 +3594,80 @@ export function EmailViewer({
                       {sender?.name || sender?.email || t('unknown_sender')}
                     </button>
                     <EmailIdentityBadge email={email} identities={identities} />
+                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                      <UnsubscribeBanner
+                        listUnsubscribe={listHeaders.listUnsubscribe}
+                        senderEmail={email?.from?.[0]?.email || ''}
+                        onDismiss={() => {
+                          const messageId = email?.messageId || '';
+                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
+                          setDismissedUnsubBanners(newSet);
+                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
+                        }}
+                      />
+                    )}
                   </div>
-                  {sender?.email && (
-                    <div className="text-sm text-muted-foreground mt-0.5 flex items-center min-w-0">
-                      <span className="truncate">{sender.email}</span>
-                      {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                        <UnsubscribeBanner
-                          listUnsubscribe={listHeaders.listUnsubscribe}
-                          senderEmail={email?.from?.[0]?.email || ''}
-                          onDismiss={() => {
-                            const messageId = email?.messageId || '';
-                            const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                            setDismissedUnsubBanners(newSet);
-                            localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                          }}
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
-                {/* Date and size on the right */}
-                <div className="text-right flex-shrink-0">
-                  <div className="text-sm text-muted-foreground whitespace-nowrap">
-                    {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                  </div>
-                  {email.size > 0 && (
-                    <div className="text-xs text-muted-foreground/70 mt-0.5">
-                      {formatFileSize(email.size)}
-                    </div>
-                  )}
-                  {effectiveEmailContent.isHtml && (
-                    <button
-                      onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-                      className="inline-flex items-center rounded-full p-1 mt-1 text-muted-foreground/70 hover:text-foreground transition-colors hover:bg-muted"
-                      title={isDark ? 'View in light mode' : 'View in dark mode'}
-                    >
-                      {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-                    </button>
+                  {/* Email address under name */}
+                  {sender?.email && sender?.name && (
+                    <div className="text-sm text-muted-foreground mt-0.5 truncate">{sender.email}</div>
                   )}
                 </div>
               </div>
 
-              {/* Recipient section - separate line */}
-              <div className="mt-2 space-y-1">
+              {/* Row 2: Recipients + Show details */}
+              <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">{t('recipient_to_prefix')}</span>
+                  <>
+                    <span>{t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                     {email.to.length > 2 && (
                       <button
                         onClick={() => setShowFullHeaders(!showFullHeaders)}
-                        className="ml-1 text-blue-600 dark:text-blue-400 hover:underline text-sm"
+                        className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
                       >
                         {t('more_count', { count: email.to.length - 2 })}
                       </button>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.cc && email.cc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">CC:</span>
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
                     {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.cc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.cc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.cc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.bcc && email.bcc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">{t('bcc')}:</span>
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>{t('bcc')}:</span>
                     {renderClickableRecipients(email.bcc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.bcc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.bcc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.bcc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
+                <button
+                  onClick={() => setShowFullHeaders(!showFullHeaders)}
+                  className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors ml-1"
+                >
+                  {showFullHeaders ? (
+                    <>
+                      <ChevronUp className="w-3 h-3" />
+                      {t('hide_details')}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="w-3 h-3" />
+                      {t('show_details')}
+                    </>
+                  )}
+                </button>
               </div>
 
-              {/* Details toggle - stays in place when expanded */}
-              <button
-                onClick={() => setShowFullHeaders(!showFullHeaders)}
-                className="mt-3 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
-              >
-                {showFullHeaders ? (
-                  <>
-                    <ChevronUp className="w-3 h-3" />
-                    {t('hide_details')}
-                  </>
-                ) : (
-                  <>
-                    <ChevronDown className="w-3 h-3" />
-                    {t('show_details')}
-                  </>
-                )}
-              </button>
-
               {/* Expandable Details */}
               {showFullHeaders && (
                 <div className="mt-3 space-y-3">
@@ -3890,46 +4039,248 @@ export function EmailViewer({
                 </div>
               )}
 
+              </div>
+              {/* Attachments on the right (beside-sender mode) */}
+              {attachmentPosition === 'beside-sender' && effectiveAttachments.length > 0 && (
+                <div className="relative flex flex-col items-end justify-start gap-1 flex-shrink-0 max-w-[50%]">
+                  {effectiveAttachments.slice(0, 2).map((attachment) => {
+                    const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                    const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                    const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                    return (
+                      <div
+                        key={attachment.id}
+                        className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                      >
+                        <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                        <span className="text-xs text-foreground truncate max-w-[140px]">
+                          {getAttachmentDisplayName(attachment.name, attachment.type)}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {formatFileSize(attachment.size)}
+                        </span>
+                        <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                          <button
+                            className="p-1 hover:bg-accent rounded transition-colors"
+                            title={t('download')}
+                            onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                          >
+                            <Download className="w-3.5 h-3.5 text-foreground" />
+                          </button>
+                          {opensPreview && (
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={tFiles('preview')}
+                              onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                            >
+                              <Eye className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {effectiveAttachments.length > 2 && (
+                    <button
+                      onClick={() => setShowAllBesideAttachments(!showAllBesideAttachments)}
+                      className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                    >
+                      +{effectiveAttachments.length - 2} {t('more')}
+                    </button>
+                  )}
+                  {/* Floating popup for remaining attachments */}
+                  {showAllBesideAttachments && effectiveAttachments.length > 2 && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setShowAllBesideAttachments(false)} />
+                      <div className="absolute top-full right-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                        {effectiveAttachments.slice(2).map((attachment) => {
+                          const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                          const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                          const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                          return (
+                            <div
+                              key={attachment.id}
+                              className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                            >
+                              <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                              <span className="text-xs text-foreground truncate max-w-[180px]">
+                                {getAttachmentDisplayName(attachment.name, attachment.type)}
+                              </span>
+                              <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                                {formatFileSize(attachment.size)}
+                              </span>
+                              <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                                <button
+                                  className="p-1 hover:bg-accent rounded transition-colors"
+                                  title={t('download')}
+                                  onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllBesideAttachments(false); }}
+                                >
+                                  <Download className="w-3.5 h-3.5 text-foreground" />
+                                </button>
+                                {opensPreview && (
+                                  <button
+                                    className="p-1 hover:bg-accent rounded transition-colors"
+                                    title={tFiles('preview')}
+                                    onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllBesideAttachments(false); }}
+                                  >
+                                    <Eye className="w-3.5 h-3.5 text-foreground" />
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           </div>
       </div>
 
-      {/* === ATTACHMENTS (integrated into header) === */}
-      {effectiveAttachments.length > 0 && (
-        <div className="bg-background border-b border-border px-4 lg:px-6 py-3">
-          <div className="flex items-start gap-2 flex-wrap">
+      {/* === ATTACHMENTS below header (below-header mode, desktop only) === */}
+      {attachmentPosition === 'below-header' && effectiveAttachments.length > 0 && (
+        <div className="hidden lg:block bg-background border-b border-border px-4 lg:px-6 py-2">
+          <div className="flex items-center gap-2 flex-wrap">
             {effectiveAttachments.map((attachment) => {
               const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
               const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
               const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
               return (
-                <button
+                <div
                   key={attachment.id}
-                  className="inline-flex items-center gap-2 px-3 py-2 bg-muted/60 hover:bg-accent rounded-lg transition-colors group border border-border/50"
-                  title={`${opensPreview ? tFiles('preview') : t('download')} ${attachment.name || 'Unnamed'} (${formatFileSize(attachment.size)})`}
-                  onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
                 >
                   <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                  <div className="flex flex-col items-start min-w-0">
-                    <span className="text-sm text-foreground truncate max-w-[200px]">
-                      {attachment.name || "Unnamed"}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {formatFileSize(attachment.size)}
-                    </span>
+                  <span className="text-sm text-foreground truncate max-w-[200px]">
+                    {getAttachmentDisplayName(attachment.name, attachment.type)}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {formatFileSize(attachment.size)}
+                  </span>
+                  <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                    <button
+                      className="p-1 hover:bg-accent rounded transition-colors"
+                      title={t('download')}
+                      onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                    >
+                      <Download className="w-4 h-4 text-foreground" />
+                    </button>
+                    {opensPreview && (
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={tFiles('preview')}
+                        onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                      >
+                        <Eye className="w-4 h-4 text-foreground" />
+                      </button>
+                    )}
                   </div>
-                  {opensPreview ? (
-                    <Eye className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  ) : (
-                    <Download className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  )}
-                </button>
+                </div>
               );
             })}
           </div>
         </div>
       )}
 
+        {/* Mobile/Tablet Attachments */}
+        {effectiveAttachments.length > 0 && (
+          <div className="lg:hidden bg-background border-b border-border px-4 py-2">
+            <div className="relative flex items-center gap-1.5 flex-wrap">
+              {effectiveAttachments.slice(0, 2).map((attachment) => {
+                const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                return (
+                  <div
+                    key={attachment.id}
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                  >
+                    <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    <span className="text-sm text-foreground truncate max-w-[200px]">
+                      {getAttachmentDisplayName(attachment.name, attachment.type)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatFileSize(attachment.size)}
+                    </span>
+                    <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={t('download')}
+                        onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                      >
+                        <Download className="w-4 h-4 text-foreground" />
+                      </button>
+                      {opensPreview && (
+                        <button
+                          className="p-1 hover:bg-accent rounded transition-colors"
+                          title={tFiles('preview')}
+                          onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                        >
+                          <Eye className="w-4 h-4 text-foreground" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              {effectiveAttachments.length > 2 && (
+                <button
+                  onClick={() => setShowAllMobileAttachments(!showAllMobileAttachments)}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                >
+                  +{effectiveAttachments.length - 2} {t('more')}
+                </button>
+              )}
+              {showAllMobileAttachments && effectiveAttachments.length > 2 && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setShowAllMobileAttachments(false)} />
+                  <div className="absolute top-full left-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                    {effectiveAttachments.slice(2).map((attachment) => {
+                      const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                      const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                      const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                      return (
+                        <div
+                          key={attachment.id}
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                        >
+                          <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                          <span className="text-xs text-foreground truncate max-w-[180px]">
+                            {getAttachmentDisplayName(attachment.name, attachment.type)}
+                          </span>
+                          <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                            {formatFileSize(attachment.size)}
+                          </span>
+                          <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={t('download')}
+                              onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllMobileAttachments(false); }}
+                            >
+                              <Download className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                            {opensPreview && (
+                              <button
+                                className="p-1 hover:bg-accent rounded transition-colors"
+                                title={tFiles('preview')}
+                                onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllMobileAttachments(false); }}
+                              >
+                                <Eye className="w-3.5 h-3.5 text-foreground" />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
         {/* Mobile/Tablet Sender Info - scrolls with content */}
         <div className="lg:hidden bg-background border-b border-border px-4" style={{ paddingBlock: 'var(--density-header-py)' }}>
           <div className="flex items-start" style={{ gap: 'var(--density-item-gap)' }}>
@@ -3946,8 +4297,8 @@ export function EmailViewer({
               />
             </button>
             <div className="flex-1 min-w-0">
-              {/* Mobile 2-line layout */}
-              <div className="flex items-center gap-2 flex-wrap">
+              {/* Row 1: Sender name + badges */}
+              <div className="flex items-center gap-1.5 flex-wrap">
                 <button
                   onClick={() => sender?.email && handleViewContactSidebar(null, sender.email)}
                   className="text-sm font-semibold text-foreground hover:text-primary hover:underline transition-colors cursor-pointer text-left"
@@ -3955,43 +4306,42 @@ export function EmailViewer({
                   {sender?.name || sender?.email || t('unknown_sender')}
                 </button>
                 <EmailIdentityBadge email={email} identities={identities} />
-              </div>
-              <div className="mt-1 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
-                {sender?.email && sender?.name && (
-                  <>
-                    <span className="truncate">{sender.email}</span>
-                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                      <UnsubscribeBanner
-                        listUnsubscribe={listHeaders.listUnsubscribe}
-                        senderEmail={email?.from?.[0]?.email || ''}
-                        onDismiss={() => {
-                          const messageId = email?.messageId || '';
-                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                          setDismissedUnsubBanners(newSet);
-                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                        }}
-                      />
-                    )}
-                    <span>·</span>
-                  </>
+                {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                  <UnsubscribeBanner
+                    listUnsubscribe={listHeaders.listUnsubscribe}
+                    senderEmail={email?.from?.[0]?.email || ''}
+                    onDismiss={() => {
+                      const messageId = email?.messageId || '';
+                      const newSet = new Set(dismissedUnsubBanners).add(messageId);
+                      setDismissedUnsubBanners(newSet);
+                      localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
+                    }}
+                  />
                 )}
+              </div>
+              {/* Email address under name */}
+              {sender?.email && sender?.name && (
+                <div className="text-xs text-muted-foreground mt-0.5 truncate">{sender.email}</div>
+              )}
+              {/* Row 2: Recipients */}
+              <div className="mt-0.5 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
                   <>
                     <span>→ {t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                   </>
                 )}
+                {email.cc && email.cc.length > 0 && (
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
+                    {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
+                    {email.cc.length > 2 && (
+                      <span>+{email.cc.length - 2}</span>
+                    )}
+                  </>
+                )}
               </div>
-              {/* CC line (mobile - only if present) */}
-              {email.cc && email.cc.length > 0 && (
-                <div className="mt-1 flex items-center gap-1 text-sm">
-                  <span className="text-muted-foreground">CC:</span>
-                  {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
-                  {email.cc.length > 2 && (
-                    <span className="text-muted-foreground">+{email.cc.length - 2}</span>
-                  )}
-                </div>
-              )}
             </div>
           </div>
         </div>
@@ -4099,7 +4449,7 @@ export function EmailViewer({
               <iframe
                 ref={iframeRef}
                 srcDoc={emailIframeSrcDoc}
-                sandbox="allow-same-origin allow-popups"
+                sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
                 title="Email content"
                 className="w-full border-0 rounded"
                 style={{ minHeight: '100px', colorScheme: isDark && emailHasNativeDarkMode ? 'light dark' : 'light' }}

components/email/resizable-image.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+
+function ResizableImageView({ node, updateAttributes, selected }: NodeViewProps) {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [resizing, setResizing] = useState(false);
+  const startState = useRef<{ x: number; y: number; width: number; height: number; handle: string }>({
+    x: 0, y: 0, width: 0, height: 0, handle: "",
+  });
+
+  const onMouseDown = useCallback((e: React.MouseEvent, handle: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const img = imgRef.current;
+    if (!img) return;
+    startState.current = {
+      x: e.clientX,
+      y: e.clientY,
+      width: img.offsetWidth,
+      height: img.offsetHeight,
+      handle,
+    };
+    setResizing(true);
+  }, []);
+
+  useEffect(() => {
+    if (!resizing) return;
+
+    const onMouseMove = (e: MouseEvent) => {
+      const { x, width, handle } = startState.current;
+      const dx = e.clientX - x;
+      let newWidth: number;
+
+      if (handle === "right" || handle === "bottom-right" || handle === "top-right") {
+        newWidth = Math.max(50, width + dx);
+      } else {
+        newWidth = Math.max(50, width - dx);
+      }
+
+      updateAttributes({ width: Math.round(newWidth) });
+    };
+
+    const onMouseUp = () => {
+      setResizing(false);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [resizing, updateAttributes]);
+
+  const width = node.attrs.width;
+  const style: React.CSSProperties = {
+    ...(width ? { width: `${width}px` } : {}),
+    maxWidth: "100%",
+  };
+
+  return (
+    <NodeViewWrapper as="span" className="inline-block relative" draggable data-drag-handle>
+      <span
+        className={`relative inline-block group ${selected ? "ring-2 ring-primary rounded" : ""}`}
+        style={style}
+      >
+        <img
+          ref={imgRef}
+          src={node.attrs.src}
+          alt={node.attrs.alt || ""}
+          title={node.attrs.title || undefined}
+          style={{ width: "100%", height: "auto", display: "block" }}
+          draggable={false}
+        />
+        {selected && (
+          <>
+            {/* Resize handle: right */}
+            <span
+              onMouseDown={(e) => onMouseDown(e, "right")}
+              className="absolute top-1/2 -right-1.5 -translate-y-1/2 w-3 h-8 bg-primary rounded cursor-ew-resize"
+            />
+            {/* Resize handle: left */}
+            <span
+              onMouseDown={(e) => onMouseDown(e, "left")}
+              className="absolute top-1/2 -left-1.5 -translate-y-1/2 w-3 h-8 bg-primary rounded cursor-ew-resize"
+            />
+            {/* Resize handle: bottom-right corner */}
+            <span
+              onMouseDown={(e) => onMouseDown(e, "bottom-right")}
+              className="absolute -bottom-1.5 -right-1.5 w-3 h-3 bg-primary rounded cursor-nwse-resize"
+            />
+          </>
+        )}
+      </span>
+    </NodeViewWrapper>
+  );
+}
+
+export const ResizableImage = Node.create({
+  name: "image",
+  group: "inline",
+  inline: true,
+  draggable: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      alt: { default: null },
+      title: { default: null },
+      width: { default: null },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "img[src]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const attrs: Record<string, string> = { ...HTMLAttributes };
+    if (attrs.width) {
+      attrs.style = `width: ${attrs.width}px; max-width: 100%;`;
+      delete attrs.width;
+    }
+    return ["img", mergeAttributes(attrs)];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ResizableImageView);
+  },
+});

components/email/rich-text-editor.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import React, { useEffect, useCallback } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import TextAlign from "@tiptap/extension-text-align";
+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 { cn } from "@/lib/utils";
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Link as LinkIcon,
+  Undo,
+  Redo,
+  Quote,
+  Code,
+  RemoveFormatting,
+  Heading1,
+  Heading2,
+} from "lucide-react";
+
+interface RichTextEditorProps {
+  content: string;
+  onChange: (html: string) => void;
+  onImageUpload?: (file: File) => Promise<string | null>;
+  placeholder?: string;
+  className?: string;
+  hasError?: boolean;
+}
+
+function ToolbarButton({
+  active,
+  onClick,
+  children,
+  title,
+  disabled,
+}: {
+  active?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  title: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={cn(
+        "p-1.5 rounded hover:bg-accent transition-colors",
+        active && "bg-accent text-accent-foreground",
+        disabled && "opacity-40 cursor-not-allowed"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function ToolbarSeparator() {
+  return <div className="w-px h-5 bg-border mx-0.5" />;
+}
+
+export function RichTextEditor({
+  content,
+  onChange,
+  onImageUpload,
+  placeholder,
+  className,
+  hasError,
+}: RichTextEditorProps) {
+  const onImageUploadRef = React.useRef(onImageUpload);
+  onImageUploadRef.current = onImageUpload;
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2] },
+      }),
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: "noopener noreferrer nofollow" },
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+      }),
+      TextStyle,
+      Color,
+      ResizableImage,
+      Placeholder.configure({
+        placeholder,
+      }),
+    ],
+    content,
+    editorProps: {
+      attributes: {
+        class: "tiptap min-h-[100px] px-4 py-3 text-sm text-foreground",
+      },
+      handleDrop: (view, event) => {
+        const upload = onImageUploadRef.current;
+        if (!upload || !event.dataTransfer?.files?.length) return false;
+        const imageFiles = Array.from(event.dataTransfer.files).filter(f =>
+          f.type.startsWith("image/")
+        );
+        if (imageFiles.length === 0) return false;
+        event.preventDefault();
+        for (const file of imageFiles) {
+          upload(file).then((url) => {
+            if (url) {
+              const { state } = view;
+              const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+              const node = state.schema.nodes.image.create({ src: url, alt: file.name });
+              const tr = state.tr.insert(pos?.pos ?? state.selection.anchor, node);
+              view.dispatch(tr);
+            }
+          });
+        }
+        return true;
+      },
+      handlePaste: (view, event) => {
+        const upload = onImageUploadRef.current;
+        if (!upload || !event.clipboardData?.files?.length) return false;
+        const imageFiles = Array.from(event.clipboardData.files).filter(f =>
+          f.type.startsWith("image/")
+        );
+        if (imageFiles.length === 0) return false;
+        event.preventDefault();
+        for (const file of imageFiles) {
+          upload(file).then((url) => {
+            if (url) {
+              const { state } = view;
+              const node = state.schema.nodes.image.create({ src: url, alt: file.name });
+              const tr = state.tr.replaceSelectionWith(node);
+              view.dispatch(tr);
+            }
+          });
+        }
+        return true;
+      },
+    },
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    immediatelyRender: false,
+  });
+
+  // Sync external content changes (e.g. template application)
+  useEffect(() => {
+    if (editor && content !== editor.getHTML()) {
+      editor.commands.setContent(content, { emitUpdate: false });
+    }
+  }, [content, editor]);
+
+  const addLink = useCallback(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor
+      .chain()
+      .focus()
+      .extendMarkRange("link")
+      .setLink({ href: url })
+      .run();
+  }, [editor]);
+
+  if (!editor) {
+    return (
+      <div className={cn("min-h-[100px]", className)} />
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col", hasError && "ring-2 ring-red-500 dark:ring-red-400 rounded", className)}>
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-0.5 px-3 py-1.5 border-b border-border/50 bg-muted/30">
+        <ToolbarButton
+          active={editor.isActive("bold")}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          title="Bold"
+        >
+          <Bold className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("italic")}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          title="Italic"
+        >
+          <Italic className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("underline")}
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          title="Underline"
+        >
+          <UnderlineIcon className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("strike")}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          title="Strikethrough"
+        >
+          <Strikethrough className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive("heading", { level: 1 })}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          title="Heading 1"
+        >
+          <Heading1 className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("heading", { level: 2 })}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          title="Heading 2"
+        >
+          <Heading2 className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive("bulletList")}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          title="Bullet List"
+        >
+          <List className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("orderedList")}
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          title="Ordered List"
+        >
+          <ListOrdered className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("blockquote")}
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          title="Quote"
+        >
+          <Quote className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive("codeBlock")}
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          title="Code Block"
+        >
+          <Code className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive({ textAlign: "left" })}
+          onClick={() => editor.chain().focus().setTextAlign("left").run()}
+          title="Align Left"
+        >
+          <AlignLeft className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive({ textAlign: "center" })}
+          onClick={() => editor.chain().focus().setTextAlign("center").run()}
+          title="Align Center"
+        >
+          <AlignCenter className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive({ textAlign: "right" })}
+          onClick={() => editor.chain().focus().setTextAlign("right").run()}
+          title="Align Right"
+        >
+          <AlignRight className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive("link")}
+          onClick={addLink}
+          title="Link"
+        >
+          <LinkIcon className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          onClick={() => editor.chain().focus().clearNodes().unsetAllMarks().run()}
+          title="Clear Formatting"
+        >
+          <RemoveFormatting className="w-4 h-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!editor.can().undo()}
+          title="Undo"
+        >
+          <Undo className="w-4 h-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!editor.can().redo()}
+          title="Redo"
+        >
+          <Redo className="w-4 h-4" />
+        </ToolbarButton>
+      </div>
+
+      {/* Editor */}
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

components/email/thread-conversation-view.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useMemo } from "react";
 import DOMPurify from "dompurify";
 import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { EMAIL_SANITIZE_CONFIG, collapseBlockedImageContainers } from "@/lib/email-sanitization";
+import { hasMeaningfulHtmlBody } from "@/lib/signature-utils";
 import { transformInlineStyles, transformColorForDarkMode, transformBgColorForDarkMode } from "@/lib/color-transform";
 import { useThemeStore } from "@/stores/theme-store";
 import { Avatar } from "@/components/ui/avatar";
@@ -320,9 +321,7 @@ function EmailCard({
         // Server-generated HTML from text/plain emails often lacks <br> tags, collapsing newlines.
         const hasTextBody = email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId];
         if (hasTextBody && htmlContent) {
-          const stripped = htmlContent.replace(/<\/?(html|head|body|meta|!doctype|!DOCTYPE|br\s*\/?)[^>]*>/gi, '').trim();
-          const hasRichContent = /<(table|tr|td|th|img|style|link|div\s+[^>]*class|span\s+[^>]*class|font|center|blockquote|ul|ol|li|h[1-6])\b/i.test(stripped);
-          useHtmlVersion = hasRichContent;
+          useHtmlVersion = hasMeaningfulHtmlBody(htmlContent);
         } else {
           useHtmlVersion = !!htmlContent;
         }

components/email/thread-list-item.tsx

@@ -13,6 +13,7 @@ import { getThreadColorTag, getEmailColorTag } from "@/lib/thread-utils";
 import { useEmailDrag } from "@/hooks/use-email-drag";
 import { useLongPress } from "@/hooks/use-long-press";
 import { ThreadEmailItem } from "./thread-email-item";
+import { EmailHoverActions } from "./email-hover-actions";
 import { useTranslations } from "next-intl";
 
 interface ThreadListItemProps {
@@ -25,6 +26,12 @@ interface ThreadListItemProps {
   onEmailSelect: (email: Email) => void;
   onContextMenu?: (e: React.MouseEvent, email: Email) => void;
   onOpenConversation?: (thread: ThreadGroup) => void;
+  onToggleStar?: (email: Email) => void;
+  onMarkAsRead?: (email: Email, read: boolean) => void;
+  onDelete?: (email: Email) => void;
+  onArchive?: (email: Email) => void;
+  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onMarkAsSpam?: (email: Email) => void;
 }
 
 interface SingleEmailItemProps {
@@ -34,10 +41,16 @@ interface SingleEmailItemProps {
   onContextMenu?: (e: React.MouseEvent, email: Email) => void;
   showPreview: boolean;
   colorTag: string | null;
+  onToggleStar?: () => void;
+  onMarkAsRead?: (read: boolean) => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  onSetColorTag?: (color: string | null) => void;
+  onMarkAsSpam?: () => void;
 }
 
 const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
-  function SingleEmailItem({ email, selected, onClick, onContextMenu, showPreview, colorTag }, ref) {
+  function SingleEmailItem({ email, selected, onClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }, ref) {
     const isUnread = !email.keywords?.$seen;
     const isStarred = email.keywords?.$flagged;
     const sender = email.from?.[0];
@@ -100,7 +113,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         {...dragHandlers}
         {...longPressHandlers}
         className={cn(
-          "relative group cursor-pointer select-none transition-all duration-200 border-b border-border",
+          "relative group cursor-pointer select-none transition-shadow duration-200 border-b border-border overflow-hidden",
           resolvedColorTag ? resolvedColorTag : (
             selected
               ? "bg-accent"
@@ -216,6 +229,17 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
             )}
           </div>
         </div>
+
+        {/* Hover Quick Actions */}
+        <EmailHoverActions
+          email={email}
+          onToggleStar={onToggleStar}
+          onMarkAsRead={onMarkAsRead}
+          onDelete={onDelete}
+          onArchive={onArchive}
+          onSetColorTag={onSetColorTag}
+          onMarkAsSpam={onMarkAsSpam}
+        />
       </div>
     );
   }
@@ -232,6 +256,12 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
     onEmailSelect,
     onContextMenu,
     onOpenConversation,
+    onToggleStar,
+    onMarkAsRead,
+    onDelete,
+    onArchive,
+    onSetColorTag,
+    onMarkAsSpam,
   }, ref) {
     const t = useTranslations('threads');
     const showPreview = useSettingsStore((state) => state.showPreview);
@@ -278,6 +308,12 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           onContextMenu={onContextMenu}
           showPreview={showPreview}
           colorTag={colorTag}
+          onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
+          onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
+          onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
+          onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
+          onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
+          onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
         />
       );
     }
@@ -339,7 +375,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           {...dragHandlers}
           {...threadLongPressHandlers}
           className={cn(
-            "relative group cursor-pointer select-none transition-all duration-200",
+            "relative group cursor-pointer select-none transition-shadow duration-200 overflow-hidden",
             colorTag ? colorTag : (
               isSelected
                 ? "bg-accent"
@@ -493,6 +529,17 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
               )}
             </div>
           </div>
+
+          {/* Hover Quick Actions for thread header */}
+          <EmailHoverActions
+            email={latestEmail}
+            onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
+            onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
+            onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
+            onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
+            onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
+            onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
+          />
         </div>
 
         {isExpanded && !isMobile && (

components/files/file-browser.tsx

@@ -21,6 +21,7 @@ import { loadFilesSettings } from "@/components/files/files-settings-dialog";
 import type { FolderLayout } from "@/components/files/files-settings-dialog";
 import { FolderTreeSidebar } from "@/components/files/folder-tree-sidebar";
 import { ResizeHandle } from "@/components/layout/resize-handle";
+import { getDroppedFilesAndFolders } from "@/lib/webdav/drop-utils";
 import type { FileResource } from "@/stores/file-store";
 
 type SortKey = "name" | "size" | "modified";
@@ -624,16 +625,20 @@ export function FileBrowser({
     e.stopPropagation();
     setIsDraggingOver(false);
 
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length > 0) {
-      setIsUploading(true);
-      try {
-        await onUploadFiles(files);
-      } finally {
-        setIsUploading(false);
+    setIsUploading(true);
+    try {
+      const { files, hasDirectories } = await getDroppedFilesAndFolders(e.dataTransfer);
+      if (files.length > 0) {
+        if (hasDirectories) {
+          await onUploadFolder(files);
+        } else {
+          await onUploadFiles(files);
+        }
       }
+    } finally {
+      setIsUploading(false);
     }
-  }, [onUploadFiles]);
+  }, [onUploadFiles, onUploadFolder]);
 
   const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
@@ -945,6 +950,16 @@ export function FileBrowser({
           >
             <Upload className="w-4 h-4" />
           </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => folderInputRef.current?.click()}
+            title={t("upload_folder")}
+            disabled={isUploading}
+          >
+            <FolderUp className="w-4 h-4" />
+          </Button>
           <Button
             variant="ghost"
             size="icon"
@@ -1195,6 +1210,14 @@ export function FileBrowser({
                 setIsUploading(false);
               }
             }}
+            onUploadFolder={async (files: File[]) => {
+              setIsUploading(true);
+              try {
+                await onUploadFolder(files);
+              } finally {
+                setIsUploading(false);
+              }
+            }}
             onCreateFolder={() => setShowNewFolder(true)}
             onCreateTextFile={() => setShowNewTextFile(true)}
           />

components/files/file-upload-area.tsx

@@ -2,16 +2,18 @@
 
 import { useCallback, useState } from "react";
 import { useTranslations } from "next-intl";
-import { Upload, FolderPlus, FilePlus } from "lucide-react";
+import { Upload, FolderPlus, FilePlus, FolderUp } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { getDroppedFilesAndFolders } from "@/lib/webdav/drop-utils";
 
 interface FileUploadAreaProps {
   onUpload: (files: File[]) => Promise<void>;
+  onUploadFolder?: (files: File[]) => Promise<void>;
   onCreateFolder: () => void;
   onCreateTextFile?: () => void;
 }
 
-export function FileUploadArea({ onUpload, onCreateFolder, onCreateTextFile }: FileUploadAreaProps) {
+export function FileUploadArea({ onUpload, onUploadFolder, onCreateFolder, onCreateTextFile }: FileUploadAreaProps) {
   const t = useTranslations("files");
   const [isDragging, setIsDragging] = useState(false);
 
@@ -32,11 +34,15 @@ export function FileUploadArea({ onUpload, onCreateFolder, onCreateTextFile }: F
     e.stopPropagation();
     setIsDragging(false);
 
-    const files = Array.from(e.dataTransfer.files);
+    const { files, hasDirectories } = await getDroppedFilesAndFolders(e.dataTransfer);
     if (files.length > 0) {
-      await onUpload(files);
+      if (hasDirectories && onUploadFolder) {
+        await onUploadFolder(files);
+      } else {
+        await onUpload(files);
+      }
     }
-  }, [onUpload]);
+  }, [onUpload, onUploadFolder]);
 
   return (
     <div className="flex items-center justify-center h-full p-8">

components/files/image-preview-modal.tsx

@@ -42,7 +42,11 @@ export function ImagePreviewModal({ name, onClose, onDownload, getImageUrl }: Im
   }, [name, getImageUrl]);
 
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === "Escape") onClose();
+    if (e.key === "Escape") { onClose(); return; }
+    const target = e.target as HTMLElement;
+    const tag = target?.tagName?.toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") return;
+    if (target?.getAttribute("contenteditable") === "true") return;
     if (e.key === "+" || e.key === "=") setZoom((z) => Math.min(z + 0.25, 5));
     if (e.key === "-") setZoom((z) => Math.max(z - 0.25, 0.25));
     if (e.key === "r") setRotation((r) => r + 90);

components/identity/sub-address-helper.tsx

@@ -135,7 +135,7 @@ export function SubAddressHelper({
         <div
           ref={popoverRef}
           className={cn(
-            'absolute top-full left-0 mt-1 z-50',
+            'absolute top-full right-0 mt-1 z-50',
             'bg-background border border-border rounded-lg shadow-lg',
             'w-80 p-4 animate-in fade-in zoom-in-95 duration-150'
           )}

components/keyboard-shortcuts-modal.tsx

@@ -5,6 +5,7 @@ import { X, Keyboard } from "lucide-react";
 import { KEYBOARD_SHORTCUTS } from "@/hooks/use-keyboard-shortcuts";
 import { cn } from "@/lib/utils";
 import { useFocusTrap } from "@/hooks/use-focus-trap";
+import { useTour } from "@/components/tour/tour-provider";
 
 interface KeyboardShortcutsModalProps {
   isOpen: boolean;
@@ -13,6 +14,7 @@ interface KeyboardShortcutsModalProps {
 
 export function KeyboardShortcutsModal({ isOpen, onClose }: KeyboardShortcutsModalProps) {
   const t = useTranslations();
+  const { startTour } = useTour();
 
   const modalRef = useFocusTrap({
     isActive: isOpen,
@@ -144,6 +146,14 @@ export function KeyboardShortcutsModal({ isOpen, onClose }: KeyboardShortcutsMod
             <p className="text-sm text-muted-foreground text-center">
               {t("shortcuts.tip")}
             </p>
+            <p className="text-sm text-center mt-2">
+              <button
+                onClick={() => { onClose(); startTour(); }}
+                className="text-primary hover:text-primary/80 underline underline-offset-2 transition-colors"
+              >
+                {t("tour.take_a_tour")}
+              </button>
+            </p>
           </div>
         </div>
       </div>

components/layout/account-switcher.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Check, Plus, LogOut, Star, ChevronDown, AlertCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useAccountStore, type AccountEntry } from "@/stores/account-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { getInitials, MAX_ACCOUNTS } from "@/lib/account-utils";
+import { cn } from "@/lib/utils";
+import { useRouter } from "@/i18n/navigation";
+
+interface AccountSwitcherProps {
+  /** "rail" = small avatar only (NavigationRail), "expanded" = avatar + name + email (Sidebar) */
+  variant?: "rail" | "expanded";
+  className?: string;
+}
+
+function AccountAvatar({ account, size = "sm" }: { account: AccountEntry; size?: "sm" | "md" }) {
+  const initials = getInitials(account.displayName || account.label, account.email || account.username);
+  const sizeClasses = size === "sm" ? "w-8 h-8 text-xs" : "w-9 h-9 text-sm";
+
+  return (
+    <div
+      className={cn("rounded-full flex items-center justify-center text-white font-medium flex-shrink-0", sizeClasses)}
+      style={{ backgroundColor: account.avatarColor }}
+      title={account.label}
+    >
+      {initials}
+    </div>
+  );
+}
+
+export function AccountSwitcher({ variant = "rail", className }: AccountSwitcherProps) {
+  const t = useTranslations("sidebar");
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+
+  const accounts = useAccountStore((s) => s.accounts);
+  const activeAccountId = useAccountStore((s) => s.activeAccountId);
+  const setDefaultAccount = useAccountStore((s) => s.setDefaultAccount);
+  const activeAccount = accounts.find((a) => a.id === activeAccountId);
+  const switchAccount = useAuthStore((s) => s.switchAccount);
+  const logout = useAuthStore((s) => s.logout);
+  const logoutAll = useAuthStore((s) => s.logoutAll);
+  const primaryIdentity = useAuthStore((s) => s.primaryIdentity);
+
+  const updatePosition = useCallback(() => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    if (variant === "rail") {
+      setPopoverStyle({
+        position: "fixed",
+        left: rect.right + 8,
+        bottom: Math.max(8, window.innerHeight - rect.bottom),
+      });
+    } else {
+      setPopoverStyle({
+        position: "fixed",
+        left: rect.left,
+        top: rect.bottom + 4,
+      });
+    }
+  }, [variant]);
+
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        buttonRef.current?.contains(e.target as Node) ||
+        popoverRef.current?.contains(e.target as Node)
+      ) return;
+      setOpen(false);
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, updatePosition]);
+
+  const handleSwitch = async (accountId: string) => {
+    if (accountId === activeAccountId) return;
+    setOpen(false);
+    await switchAccount(accountId);
+  };
+
+  const handleAddAccount = () => {
+    setOpen(false);
+    router.push(`/login?mode=add-account` as never);
+  };
+
+  const handleLogout = () => {
+    setOpen(false);
+    logout();
+  };
+
+  const handleLogoutAll = () => {
+    setOpen(false);
+    logoutAll();
+  };
+
+  const handleSetDefault = (accountId: string) => {
+    setDefaultAccount(accountId);
+  };
+
+  // Display name for the active account
+  const displayName = primaryIdentity?.name || activeAccount?.displayName || activeAccount?.label || "";
+  const displayEmail = primaryIdentity?.email || activeAccount?.email || activeAccount?.username || "";
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex items-center gap-2 rounded-md transition-colors",
+          variant === "rail"
+            ? "justify-center w-10 h-10 hover:bg-muted"
+            : "w-full px-2 py-1.5 hover:bg-muted text-left min-w-0",
+          className
+        )}
+        title={variant === "rail" ? (displayName || displayEmail) : undefined}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        {activeAccount ? (
+          <>
+            <AccountAvatar account={activeAccount} size={variant === "rail" ? "sm" : "md"} />
+            {variant === "expanded" && (
+              <>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-foreground truncate">{displayName}</p>
+                  <p className="text-xs text-muted-foreground truncate">{displayEmail}</p>
+                </div>
+                <ChevronDown className={cn("w-3.5 h-3.5 text-muted-foreground flex-shrink-0 transition-transform", open && "rotate-180")} />
+              </>
+            )}
+          </>
+        ) : (
+          <div className={cn(
+            "rounded-full bg-muted flex items-center justify-center text-muted-foreground",
+            variant === "rail" ? "w-8 h-8 text-xs" : "w-9 h-9 text-sm"
+          )}>
+            ?
+          </div>
+        )}
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={popoverRef}
+          style={popoverStyle}
+          className="w-72 rounded-lg border border-border bg-background text-foreground shadow-lg z-50 overflow-hidden"
+          role="menu"
+        >
+          {/* Account List */}
+          <div className="py-1 max-h-64 overflow-y-auto">
+            {accounts.map((account) => {
+              const isActive = account.id === activeAccountId;
+              return (
+                <button
+                  key={account.id}
+                  onClick={() => handleSwitch(account.id)}
+                  className={cn(
+                    "w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors",
+                    isActive ? "bg-accent/50" : "hover:bg-muted"
+                  )}
+                  role="menuitem"
+                  disabled={isActive}
+                >
+                  <div className="relative flex-shrink-0">
+                    <AccountAvatar account={account} size="md" />
+                    {isActive && (
+                      <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center">
+                        <Check className="w-2.5 h-2.5 text-primary-foreground" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1">
+                      <span className="text-sm font-medium truncate">
+                        {account.displayName || account.label}
+                      </span>
+                      {account.isDefault && (
+                        <Star className="w-3 h-3 text-amber-500 flex-shrink-0 fill-amber-500" />
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {account.email || account.username}
+                    </p>
+                    <div className="flex items-center gap-1 mt-0.5">
+                      {account.hasError ? (
+                        <AlertCircle className="w-3 h-3 text-destructive" />
+                      ) : (
+                        <span className={cn(
+                          "w-1.5 h-1.5 rounded-full",
+                          account.isConnected ? "bg-green-500" : "bg-muted-foreground/40"
+                        )} />
+                      )}
+                      <span className="text-[10px] text-muted-foreground truncate">
+                        {new URL(account.serverUrl).hostname}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Separator + Add Account */}
+          {accounts.length < MAX_ACCOUNTS && (
+            <div className="border-t border-border">
+              <button
+                onClick={handleAddAccount}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+                role="menuitem"
+              >
+                <Plus className="w-4 h-4" />
+                {t("add_account")}
+              </button>
+            </div>
+          )}
+
+          {/* Separator + Actions */}
+          <div className="border-t border-border">
+            {activeAccount && !activeAccount.isDefault && accounts.length > 1 && (
+              <button
+                onClick={() => handleSetDefault(activeAccount.id)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+                role="menuitem"
+              >
+                <Star className="w-4 h-4" />
+                {t("set_as_default")}
+              </button>
+            )}
+            <button
+              onClick={handleLogout}
+              className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+              role="menuitem"
+            >
+              <LogOut className="w-4 h-4" />
+              {t("sign_out_of", { account: displayEmail })}
+            </button>
+            {accounts.length > 1 && (
+              <button
+                onClick={handleLogoutAll}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-muted transition-colors"
+                role="menuitem"
+              >
+                <LogOut className="w-4 h-4" />
+                {t("sign_out_all")}
+              </button>
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}

components/layout/navigation-rail.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { Mail, Calendar, BookUser, HardDrive, Settings, LogOut, Keyboard, Plus } from "lucide-react";
+import { AccountSwitcher } from "./account-switcher";
 import { icons as lucideIcons, type LucideIcon } from "lucide-react";
 import { usePathname, Link } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
@@ -216,8 +217,8 @@ export function NavigationRail({
           );
         })}
 
-        {/* Custom sidebar apps */}
-        {sidebarApps.map((app) => {
+        {/* Custom sidebar apps (per-app mobile visibility) */}
+        {sidebarApps.filter((app) => app.showOnMobile).map((app) => {
           const AppIcon = lucideIcons[app.icon as keyof typeof lucideIcons] as LucideIcon | undefined;
           const isActive = activeAppId === app.id;
           return (
@@ -251,16 +252,27 @@ export function NavigationRail({
           );
         })}
 
-        {/* Manage apps button */}
-        {onManageApps && (
-          <button
-            onClick={onManageApps}
-            className="flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px] transition-colors duration-150 text-muted-foreground hover:text-foreground"
-          >
-            <Plus className="w-5 h-5" />
-            <span className="text-[10px] font-medium leading-tight">{t("add_app")}</span>
-          </button>
-        )}
+        {/* Settings */}
+        <Link
+          href="/settings"
+          onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+          className={cn(
+            "flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[44px]",
+            "transition-colors duration-150",
+            isSettingsActive
+              ? "text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+          aria-current={isSettingsActive ? "page" : undefined}
+        >
+          <div className="relative">
+            <Settings className="w-5 h-5" />
+            {isSettingsActive && (
+              <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">{t("settings")}</span>
+        </Link>
       </nav>
     );
   }
@@ -291,6 +303,7 @@ export function NavigationRail({
               key={item.id}
               href={item.href}
               onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+              data-tour={`nav-${item.id}`}
               className={cn(
                 "relative flex items-center gap-2.5 rounded-md transition-colors duration-150",
                 collapsed
@@ -389,6 +402,7 @@ export function NavigationRail({
         <Link
           href="/settings"
           onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
+          data-tour="nav-settings"
           className={cn(
             "flex items-center justify-center w-10 h-10 rounded-md transition-colors",
             isSettingsActive
@@ -406,6 +420,7 @@ export function NavigationRail({
         {onShowShortcuts && (
           <button
             onClick={onShowShortcuts}
+            data-tour="nav-shortcuts"
             className="flex items-center justify-center w-10 h-10 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
             title={t("keyboard_shortcuts")}
           >
@@ -414,7 +429,9 @@ export function NavigationRail({
         )}
 
         {quota && quota.total > 0 && (
-          <StorageQuotaCircle quota={quota} usagePercent={quotaUsagePercent} />
+          <div data-tour="storage-quota">
+            <StorageQuotaCircle quota={quota} usagePercent={quotaUsagePercent} />
+          </div>
         )}
 
         {isPushConnected != null && (
@@ -432,13 +449,7 @@ export function NavigationRail({
         )}
 
         {onLogout && (
-          <button
-            onClick={onLogout}
-            className="flex items-center justify-center w-10 h-10 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-            title={t("sign_out")}
-          >
-            <LogOut className="w-[18px] h-[18px]" />
-          </button>
+          <AccountSwitcher variant="rail" />
         )}
       </div>
     </div>

components/layout/sidebar-apps-modal.tsx

@@ -18,6 +18,7 @@ interface SidebarAppFormData {
   url: string;
   icon: string;
   openMode: 'tab' | 'inline';
+  showOnMobile: boolean;
 }
 
 function SidebarAppForm({
@@ -37,6 +38,7 @@ function SidebarAppForm({
     url: app?.url || '',
     icon: app?.icon || 'Globe',
     openMode: app?.openMode || 'tab',
+    showOnMobile: app?.showOnMobile ?? false,
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
 

components/layout/sidebar.tsx

@@ -24,6 +24,10 @@ import {
   Settings,
   X,
   Tag,
+  RotateCcw,
+  FlaskConical,
+  PlayCircle,
+  Loader2,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { Mailbox } from "@/lib/jmap/types";
@@ -39,6 +43,8 @@ import { toast } from "@/stores/toast-store";
 import { debug } from "@/lib/debug";
 import { useConfig } from "@/hooks/use-config";
 import { useThemeStore } from "@/stores/theme-store";
+import { AccountSwitcher } from "./account-switcher";
+import { useTour } from "@/components/tour/tour-provider";
 
 interface SidebarProps {
   mailboxes: Mailbox[];
@@ -327,6 +333,68 @@ function TagItem({
   );
 }
 
+function DemoBanner() {
+  const t = useTranslations('sidebar');
+  const { isDemoMode, loginDemo } = useAuthStore();
+  const { startTour, resetTourCompletion } = useTour();
+  const router = useRouter();
+  const [isResetting, setIsResetting] = useState(false);
+
+  if (!isDemoMode) return null;
+
+  const handleReset = async () => {
+    setIsResetting(true);
+    // Navigate to home first so the mail page re-fetches data
+    router.push('/');
+    await loginDemo();
+    setIsResetting(false);
+  };
+
+  const handleStartTour = () => {
+    resetTourCompletion();
+    router.push('/');
+    setTimeout(() => startTour(), 100);
+  };
+
+  return (
+    <div
+      data-tour="demo-banner"
+      className={cn(
+        "flex flex-col gap-1.5 w-full px-3 py-2 text-xs",
+        "bg-primary/10 dark:bg-primary/10 text-primary",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <FlaskConical className="w-3.5 h-3.5 flex-shrink-0" />
+        <span className="truncate font-medium">{t("demo_banner")}</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <button
+          onClick={handleStartTour}
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 hover:bg-primary/20 transition-colors"
+          title={t("demo_tour")}
+        >
+          <PlayCircle className="w-3 h-3" />
+          {t("demo_tour")}
+        </button>
+        <button
+          onClick={handleReset}
+          disabled={isResetting}
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 hover:bg-primary/20 transition-colors disabled:opacity-50"
+          title={t("demo_reset")}
+        >
+          {isResetting ? (
+            <Loader2 className="w-3 h-3 animate-spin" />
+          ) : (
+            <RotateCcw className="w-3 h-3" />
+          )}
+          {t("demo_reset")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function VacationBanner() {
   const t = useTranslations('sidebar');
   const router = useRouter();
@@ -453,12 +521,12 @@ export function Sidebar({
       )}
     >
       {/* Header */}
-      <div className={cn("flex items-center border-b border-border", isCollapsed ? "justify-center px-2 py-3" : "gap-2 px-4 py-3")}>
+      <div className={cn("flex items-center border-b border-border", isCollapsed ? "justify-center px-2 py-2" : "gap-1 px-2 py-2")}>
         <Button
           variant="ghost"
           size="icon"
           onClick={onSidebarClose}
-          className="lg:hidden h-11 w-11 flex-shrink-0"
+          className="lg:hidden h-9 w-9 flex-shrink-0"
           aria-label={t("close")}
         >
           <X className="w-5 h-5" />
@@ -479,29 +547,25 @@ export function Sidebar({
           variant="ghost"
           size="icon"
           onClick={toggleSidebarCollapsed}
-          className="hidden lg:flex flex-shrink-0"
+          className="hidden lg:flex h-8 w-8 flex-shrink-0"
           title={isCollapsed ? t("expand_tooltip") : t("collapse_tooltip")}
         >
           {isCollapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
         </Button>
 
-        {!isCollapsed && primaryIdentity && (
-          <div className="min-w-0">
-            <p className="text-sm font-medium text-foreground truncate" title={primaryIdentity.name}>
-              {primaryIdentity.name}
-            </p>
-            <p className="text-xs text-muted-foreground truncate" title={primaryIdentity.email}>
-              {primaryIdentity.email}
-            </p>
-          </div>
+        {!isCollapsed && (
+          <AccountSwitcher variant="expanded" className="flex-1" />
         )}
       </div>
 
+      {/* Demo Banner */}
+      {!isCollapsed && <DemoBanner />}
+
       {/* Vacation Banner */}
       {!isCollapsed && <VacationBanner />}
 
       {/* Mailbox List */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto" data-tour="sidebar">
         <div className="py-1">
           {mailboxes.length === 0 ? (
             <div className="px-4 py-2 text-sm text-muted-foreground">
@@ -588,7 +652,7 @@ export function Sidebar({
             </div>
 
             {((tagsExpanded && !isCollapsed) || isCollapsed) && (
-              <div className="relative">
+              <div className="relative" data-tour="keyword-tags">
                 {emailKeywords.map((kw) => {
                   const isSelected = selectedKeyword === kw.id;
                   return (
@@ -612,11 +676,11 @@ export function Sidebar({
       {/* Compose Button */}
       <div className={cn("border-t border-border", isCollapsed ? "flex justify-center py-3" : "px-3 py-3")}>
         {isCollapsed ? (
-          <Button onClick={onCompose} variant="ghost" size="icon" title={t("compose_hint")}>
+          <Button onClick={onCompose} variant="ghost" size="icon" title={t("compose_hint")} data-tour="compose-button">
             <PenSquare className="w-5 h-5" />
           </Button>
         ) : (
-          <Button onClick={onCompose} className="w-full" title={t("compose_hint")}>
+          <Button onClick={onCompose} className="w-full" title={t("compose_hint")} data-tour="compose-button">
             <PenSquare className="w-4 h-4 mr-2" />
             {t("compose")}
           </Button>

components/providers/embedded-bridge-provider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect } from "react";
+import { isEmbedded, listenFromParent } from "@/lib/iframe-bridge";
+import { useAuthStore } from "@/stores/auth-store";
+import { useConfig } from "@/hooks/use-config";
+
+export function EmbeddedBridgeProvider({ children }: { children: React.ReactNode }) {
+  const { parentOrigin, embeddedMode } = useConfig();
+  const logout = useAuthStore((s) => s.logout);
+
+  useEffect(() => {
+    if (!embeddedMode || !isEmbedded()) return;
+
+    const unsubscribe = listenFromParent((msg) => {
+      switch (msg.type) {
+        case "sso:trigger-login": {
+          // Navigate to login page to start SSO flow
+          const segments = window.location.pathname.split("/").filter(Boolean);
+          const locale = segments[0] || "en";
+          window.location.href = `/${locale}/login`;
+          break;
+        }
+        case "sso:trigger-logout":
+          logout();
+          break;
+      }
+    }, parentOrigin || undefined);
+
+    return unsubscribe;
+  }, [embeddedMode, parentOrigin, logout]);
+
+  return <>{children}</>;
+}

components/settings/account-settings.tsx

@@ -8,13 +8,21 @@ import { formatFileSize } from '@/lib/utils';
 
 export function AccountSettings() {
   const t = useTranslations('settings.account');
-  const { username, serverUrl } = useAuthStore();
+  const { username, serverUrl, isDemoMode, primaryIdentity } = useAuthStore();
   const { quota } = useEmailStore();
 
   const quotaPercentage = quota ? Math.round((quota.used / quota.total) * 100) : 0;
+  const displayName = primaryIdentity?.name || (isDemoMode ? 'Demo User' : undefined);
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
+      {/* Display Name (show in demo mode or when identity has a name) */}
+      {displayName && (
+        <SettingItem label={t('name_label')}>
+          <span className="text-sm text-foreground">{displayName}</span>
+        </SettingItem>
+      )}
+
       {/* Email Address */}
       <SettingItem label={t('email.label')}>
         <span className="text-sm text-foreground">{username || t('../../common.unknown')}</span>
@@ -49,6 +57,16 @@ export function AccountSettings() {
           </div>
         </SettingItem>
       )}
+
+      {/* Demo mode indicator */}
+      {isDemoMode && (
+        <SettingItem label={t('account_type_label')}>
+          <span className="inline-flex items-center gap-1.5 text-sm font-medium text-amber-600 dark:text-amber-400">
+            <span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
+            {t('demo_account')}
+          </span>
+        </SettingItem>
+      )}
     </SettingsSection>
   );
 }

components/settings/appearance-settings.tsx

@@ -6,6 +6,9 @@ import { useSettingsStore, type ToolbarPosition, type Density } from '@/stores/s
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
 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';
 
 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 },
@@ -61,8 +64,10 @@ function DensityPreview({ density }: { density: Density }) {
 
 export function AppearanceSettings() {
   const t = useTranslations('settings.appearance');
+  const tTour = useTranslations('tour');
   const { theme, setTheme } = useThemeStore();
   const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, updateSetting } = useSettingsStore();
+  const { startTour, resetTourCompletion } = useTour();
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -141,6 +146,19 @@ export function AppearanceSettings() {
           onChange={(checked) => updateSetting('animationsEnabled', checked)}
         />
       </SettingItem>
+
+      {/* Restart Tour */}
+      <SettingItem label={tTour('restart_title')} description={tTour('restart_desc')}>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => { resetTourCompletion(); startTour(); }}
+          className="text-xs h-7"
+        >
+          <PlayCircle className="w-3.5 h-3.5 mr-1" />
+          {tTour('restart_button')}
+        </Button>
+      </SettingItem>
     </SettingsSection>
   );
 }

components/settings/calendar-management-settings.tsx

@@ -153,6 +153,9 @@ export function CalendarManagementSettings() {
   const { client, serverUrl, username } = useAuthStore();
   const { calendars, updateCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
 
+  const [discoveredCalDavUrls, setDiscoveredCalDavUrls] = useState<Record<string, string | null>>({});
+  const [wellKnownCalDavUrl, setWellKnownCalDavUrl] = useState<string | null>(null);
+
   const [isCreating, setIsCreating] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
@@ -175,6 +178,60 @@ export function CalendarManagementSettings() {
     }
   }, [client, calendars.length, fetchCalendars]);
 
+  useEffect(() => {
+    if (!client || !serverUrl || !username) {
+      setDiscoveredCalDavUrls({});
+      setWellKnownCalDavUrl(null);
+      return;
+    }
+
+    const primaryKey = username;
+    const accounts = new Map<string, string[]>();
+    accounts.set(primaryKey, [username]);
+
+    for (const calendar of calendars) {
+      if (!calendar.isShared) continue;
+      const key = calendar.accountId || calendar.accountName || calendar.id;
+      const candidates = accounts.get(key) || [];
+      if (calendar.accountId) candidates.push(calendar.accountId);
+      if (calendar.accountName) candidates.push(calendar.accountName);
+      accounts.set(key, candidates);
+    }
+
+    const controller = new AbortController();
+
+    fetch('/api/caldav/discover', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        accounts: Array.from(accounts.entries()).map(([key, candidates]) => ({ key, candidates })),
+      }),
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`CalDAV discovery failed: ${response.status}`);
+        return response.json() as Promise<{
+          wellKnownUrl?: string;
+          accounts?: Record<string, { url: string | null }>;
+        }>;
+      })
+      .then((payload) => {
+        setWellKnownCalDavUrl(payload.wellKnownUrl || null);
+        const next: Record<string, string | null> = {};
+        for (const [key, value] of Object.entries(payload.accounts || {})) {
+          next[key] = value?.url || null;
+        }
+        setDiscoveredCalDavUrls(next);
+      })
+      .catch(() => {
+        const fallbackWellKnown = new URL('/.well-known/caldav', serverUrl).toString();
+        setDiscoveredCalDavUrls({});
+        setWellKnownCalDavUrl(fallbackWellKnown);
+      });
+
+    return () => controller.abort();
+  }, [client, calendars, serverUrl, username]);
+
   const handleRefreshSubscription = async (subId: string) => {
     if (!client) return;
     setRefreshingSubId(subId);
@@ -295,8 +352,10 @@ export function CalendarManagementSettings() {
 
   const buildCalDavUrl = (calendarId: string) => {
     if (!serverUrl || !username) return null;
-    const base = serverUrl.replace(/\/$/, '');
-    return `${base}/dav/calendars/user/${encodeURIComponent(username)}/${encodeURIComponent(calendarId)}/`;
+    const calendar = calendars.find((entry) => entry.id === calendarId);
+    if (!calendar) return null;
+    const accountKey = calendar.isShared ? (calendar.accountId || calendar.accountName || calendar.id) : username;
+    return discoveredCalDavUrls[accountKey] || wellKnownCalDavUrl;
   };
 
   const handleCopyUrl = async (url: string) => {

components/settings/calendar-settings.tsx

@@ -14,9 +14,13 @@ export function CalendarSettings() {
   const {
     timeFormat,
     firstDayOfWeek,
+    showTimeInMonthView,
+    showWeekNumbers,
     calendarNotificationsEnabled,
     calendarNotificationSound,
     calendarInvitationParsingEnabled,
+    enableCalendarTasks,
+    showTasksOnCalendar,
     updateSetting,
   } = useSettingsStore();
 
@@ -57,6 +61,48 @@ export function CalendarSettings() {
         />
       </SettingItem>
 
+      <SettingItem
+        label={t('show_time_in_month_view')}
+        description={t('show_time_in_month_view_desc')}
+      >
+        <ToggleSwitch
+          checked={showTimeInMonthView}
+          onChange={(checked) => updateSetting('showTimeInMonthView', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem
+        label={t('show_week_numbers')}
+        description={t('show_week_numbers_desc')}
+      >
+        <ToggleSwitch
+          checked={showWeekNumbers}
+          onChange={(checked) => updateSetting('showWeekNumbers', checked)}
+        />
+      </SettingItem>
+
+      <SettingItem
+        label={t('enable_tasks')}
+        description={t('enable_tasks_desc')}
+      >
+        <ToggleSwitch
+          checked={enableCalendarTasks}
+          onChange={(checked) => updateSetting('enableCalendarTasks', checked)}
+        />
+      </SettingItem>
+
+      {enableCalendarTasks && (
+        <SettingItem
+          label={t('show_tasks_on_calendar')}
+          description={t('show_tasks_on_calendar_desc')}
+        >
+          <ToggleSwitch
+            checked={showTasksOnCalendar}
+            onChange={(checked) => updateSetting('showTasksOnCalendar', checked)}
+          />
+        </SettingItem>
+      )}
+
       <SettingItem
         label={t('notifications_enabled')}
         description={t('notifications_enabled_desc')}

components/settings/email-settings.tsx

@@ -3,9 +3,11 @@
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSettingsStore } from '@/stores/settings-store';
-import type { ArchiveMode } 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 { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
 import { TrustedSendersModal } from '@/components/trusted-senders-modal';
 import { ChevronRight, AlertTriangle, FolderSync, Loader2 } from 'lucide-react';
@@ -24,8 +26,10 @@ export function EmailSettings() {
     emailsPerPage,
     externalContentPolicy,
     mailAttachmentAction,
+    attachmentPosition,
     emailAlwaysLightMode,
     archiveMode,
+    hoverActions,
     trustedSenders,
     updateSetting,
   } = useSettingsStore();
@@ -184,6 +188,39 @@ export function EmailSettings() {
         <ToggleSwitch checked={showPreview} onChange={(checked) => updateSetting('showPreview', checked)} />
       </SettingItem>
 
+      {/* Quick Hover Actions */}
+      <div className="py-3 border-b border-border space-y-3">
+        <div>
+          <label className="text-sm font-medium text-foreground">{t('hover_actions.label')}</label>
+          <p className="text-xs text-muted-foreground mt-1">{t('hover_actions.description')}</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {ALL_HOVER_ACTIONS.map((action) => {
+            const isEnabled = hoverActions.includes(action.id);
+            return (
+              <button
+                key={action.id}
+                type="button"
+                onClick={() => {
+                  const newActions = isEnabled
+                    ? hoverActions.filter((a: HoverAction) => a !== action.id)
+                    : [...hoverActions, action.id];
+                  updateSetting('hoverActions', newActions);
+                }}
+                className={cn(
+                  'px-3 py-1.5 text-xs rounded-md transition-colors duration-150',
+                  isEnabled
+                    ? 'bg-primary text-primary-foreground font-medium'
+                    : 'bg-muted hover:bg-accent text-foreground'
+                )}
+              >
+                {t(`hover_actions.${action.labelKey}`)}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       <SettingItem label={t('attachment_click_action.label')} description={t('attachment_click_action.description')}>
         <Select
           value={mailAttachmentAction}
@@ -195,6 +232,17 @@ export function EmailSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('attachment_position.label')} description={t('attachment_position.description')}>
+        <Select
+          value={attachmentPosition}
+          onChange={(value) => updateSetting('attachmentPosition', value as 'beside-sender' | 'below-header')}
+          options={[
+            { value: 'beside-sender', label: t('attachment_position.beside-sender') },
+            { value: 'below-header', label: t('attachment_position.below-header') },
+          ]}
+        />
+      </SettingItem>
+
       {/* Emails Per Page */}
       <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
         <Select

components/settings/filter-settings.tsx

@@ -9,6 +9,7 @@ import { SieveEditorModal } from "@/components/filters/sieve-editor-modal";
 import { useFilterStore } from "@/stores/filter-store";
 import { useAuthStore } from "@/stores/auth-store";
 import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { toast } from "@/stores/toast-store";
 import type { FilterRule } from "@/lib/jmap/sieve-types";
 import {
@@ -25,31 +26,98 @@ import {
 function RuleSummary({ rule }: { rule: FilterRule }) {
   const t = useTranslations("settings.filters");
 
-  const conditionSummary = rule.conditions
-    .slice(0, 2)
-    .map((c) => {
-      const field = t(`condition_fields.${c.field}`);
-      const comparator = t(`comparators.${c.comparator}`);
-      return `${field} ${comparator} "${c.value}"`;
-    })
-    .join(rule.matchType === "all" ? ` ${t("and")} ` : ` ${t("or")} `);
+  const conditions = rule.conditions.slice(0, 2).map((c) => {
+    const field = t(`condition_fields.${c.field}`);
+    const comparator = t(`comparators.${c.comparator}`);
+    return `${field} ${comparator} "${c.value}"`;
+  });
+
+  const joiner = rule.matchType === "all" ? t("and") : t("or");
 
   const extra = rule.conditions.length > 2
     ? ` (+${rule.conditions.length - 2})`
     : "";
 
-  const actionSummary = rule.actions
-    .slice(0, 2)
-    .map((a) => {
-      const action = t(`action_types.${a.type}`);
-      return a.value ? `${action} "${a.value}"` : action;
-    })
-    .join(", ");
+  const actions = rule.actions.slice(0, 2).map((a) => {
+    const action = t(`action_types.${a.type}`);
+    return a.value ? `${action} "${a.value}"` : action;
+  });
 
   return (
-    <span className="text-xs text-muted-foreground truncate">
-      {conditionSummary}{extra} → {actionSummary}
-    </span>
+    <div className="text-xs text-muted-foreground break-words">
+      <span className="inline">
+        {conditions.map((cond, i) => (
+          <span key={i}>
+            {i > 0 && <span className="italic opacity-70"> {joiner} </span>}
+            {cond}
+          </span>
+        ))}
+        {extra}
+      </span>
+      <span className="mx-1 opacity-50">→</span>
+      <span className="inline">
+        {actions.map((act, i) => (
+          <span key={i}>
+            {i > 0 && ", "}
+            {act}
+          </span>
+        ))}
+      </span>
+    </div>
+  );
+}
+
+function VisualRuleSummary({ rule }: { rule: FilterRule }) {
+  const t = useTranslations("settings.filters");
+
+  const joiner = rule.matchType === "all" ? t("and") : t("or");
+  const matchLabel = rule.matchType === "all" ? t("match_all_conditions") : t("match_any_condition");
+
+  return (
+    <div className="mt-1.5 space-y-1 text-xs">
+      <div className="flex items-baseline gap-1.5 flex-wrap">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-blue-500 dark:text-blue-400">
+          {t("if")}
+        </span>
+        {rule.conditions.map((c, i) => {
+          const field = t(`condition_fields.${c.field}`);
+          const comparator = t(`comparators.${c.comparator}`);
+          return (
+            <span key={i} className="contents">
+              {i > 0 && (
+                <span className="text-[10px] text-muted-foreground/70 italic">{joiner}</span>
+              )}
+              <span className="inline-flex items-baseline gap-1 px-1.5 py-px rounded-sm bg-muted/60 text-foreground">
+                <span className="font-medium text-blue-600 dark:text-blue-400">{field}</span>
+                <span className="text-muted-foreground">{comparator}</span>
+                <span className="text-foreground">“{c.value}”</span>
+              </span>
+            </span>
+          );
+        })}
+        <span className="text-[10px] text-muted-foreground/60 italic">({matchLabel})</span>
+      </div>
+
+      <div className="flex items-baseline gap-1.5 flex-wrap">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-emerald-500 dark:text-emerald-400">
+          {t("then")}
+        </span>
+        {rule.actions.map((a, i) => {
+          const action = t(`action_types.${a.type}`);
+          return (
+            <span key={i} className="contents">
+              {i > 0 && (
+                <span className="text-muted-foreground/50">›</span>
+              )}
+              <span className="inline-flex items-baseline gap-1 px-1.5 py-px rounded-sm bg-muted/60 text-foreground">
+                <span className="font-medium text-emerald-600 dark:text-emerald-400">{action}</span>
+                {a.value && <span className="text-muted-foreground">“{a.value}”</span>}
+              </span>
+            </span>
+          );
+        })}
+      </div>
+    </div>
   );
 }
 
@@ -58,6 +126,8 @@ export function FilterSettings() {
   const tNotifications = useTranslations("notifications");
   const { client } = useAuthStore();
   const mailboxes = useEmailStore((s) => s.mailboxes);
+  const expandedFilterView = useSettingsStore((s) => s.expandedFilterView);
+  const updateSetting = useSettingsStore((s) => s.updateSetting);
 
   const {
     rules,
@@ -337,23 +407,25 @@ export function FilterSettings() {
                 onDragOver={(e) => handleDragOver(e, index)}
                 onDrop={(e) => handleDrop(e, index)}
                 onDragEnd={handleDragEnd}
-                className={`flex items-center gap-3 p-3 rounded-md border transition-colors ${
+                className={`flex items-start gap-3 p-3 rounded-md border transition-colors ${
                   dragOverIndex === index
                     ? "border-primary bg-primary/5"
                     : "border-border hover:bg-muted/50"
                 } ${!rule.enabled ? "opacity-60" : ""}`}
               >
                 <div
-                  className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground"
+                  className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground pt-0.5"
                   aria-label={t("drag_to_reorder")}
                 >
                   <GripVertical className="w-4 h-4" />
                 </div>
 
-                <ToggleSwitch
-                  checked={rule.enabled}
-                  onChange={() => handleToggle(rule.id)}
-                />
+                <div className="pt-0.5">
+                  <ToggleSwitch
+                    checked={rule.enabled}
+                    onChange={() => handleToggle(rule.id)}
+                  />
+                </div>
 
                 <div
                   className="flex-1 min-w-0 cursor-pointer"
@@ -374,7 +446,11 @@ export function FilterSettings() {
                   <p className="text-sm font-medium text-foreground truncate">
                     {rule.name}
                   </p>
-                  <RuleSummary rule={rule} />
+                  {expandedFilterView ? (
+                    <VisualRuleSummary rule={rule} />
+                  ) : (
+                    <RuleSummary rule={rule} />
+                  )}
                 </div>
 
                 {deleteConfirmId === rule.id ? (
@@ -435,12 +511,23 @@ export function FilterSettings() {
           </Button>
         </div>
 
-        {isSaving && (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Loader2 className="w-4 h-4 animate-spin" />
-            {t("saving")}
-          </div>
-        )}
+        <div className="flex items-center gap-3">
+          {isSaving && (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              {t("saving")}
+            </div>
+          )}
+          {!isOpaque && rules.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">{t("expanded_view")}</span>
+              <ToggleSwitch
+                checked={expandedFilterView}
+                onChange={(v) => updateSetting("expandedFilterView", v)}
+              />
+            </div>
+          )}
+        </div>
       </div>
 
       {showRuleModal && (

components/settings/folder-settings.tsx

@@ -490,21 +490,34 @@ export function FolderSettings() {
 
       {/* Standard Folder Roles — advanced section */}
       <SettingsSection title={t('standard_roles')} description={t('standard_roles_description')}>
-        {STANDARD_ROLES.map((role) => (
-          <SettingItem key={role} label={t(`role_${role}`)}>
-            <Select
-              value={getRoleMailboxId(role)}
-              onChange={(value) => handleRoleChange(role, value)}
-              options={[
-                { value: '', label: t('role_none') },
-                ...ownMailboxes.map(mb => ({
-                  value: mb.id,
-                  label: mb.name,
-                })),
-              ]}
-            />
-          </SettingItem>
-        ))}
+        {STANDARD_ROLES.map((role) => {
+          // Disambiguate duplicate folder names by appending parent path
+          const nameCounts = new Map<string, number>();
+          ownMailboxes.forEach(mb => nameCounts.set(mb.name, (nameCounts.get(mb.name) || 0) + 1));
+          const getParentPath = (mb: { parentId?: string; name: string }) => {
+            if (!mb.parentId) return '';
+            const parent = ownMailboxes.find(p => p.id === mb.parentId);
+            return parent ? `${parent.name}/` : '';
+          };
+
+          return (
+            <SettingItem key={role} label={t(`role_${role}`)}>
+              <Select
+                value={getRoleMailboxId(role)}
+                onChange={(value) => handleRoleChange(role, value)}
+                options={[
+                  { value: '', label: t('role_none') },
+                  ...ownMailboxes.map(mb => ({
+                    value: mb.id,
+                    label: (nameCounts.get(mb.name) || 0) > 1
+                      ? `${getParentPath(mb)}${mb.name} (${mb.id.slice(-6)})`
+                      : mb.name,
+                  })),
+                ]}
+              />
+            </SettingItem>
+          );
+        })}
       </SettingsSection>
     </div>
   );

components/settings/keyword-settings.tsx

@@ -3,8 +3,10 @@
 import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { useSettingsStore, KEYWORD_PALETTE, DEFAULT_KEYWORDS, type KeywordDefinition } from "@/stores/settings-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { useEmailStore } from "@/stores/email-store";
 import { SettingsSection } from "./settings-section";
-import { Plus, Pencil, Trash2, GripVertical, Check, X, RotateCcw } from "lucide-react";
+import { Plus, Pencil, Trash2, GripVertical, Check, X, RotateCcw, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const PALETTE_KEYS = Object.keys(KEYWORD_PALETTE);
@@ -91,16 +93,14 @@ function KeywordEditForm({
   const [color, setColor] = useState(initial?.color || "blue");
   const isEditing = !!initial;
 
-  const normalizedId = isEditing
-    ? initial.id
-    : label
-        .trim()
-        .toLowerCase()
-        .replace(/[^a-z0-9_-]/g, "-")
-        .replace(/-+/g, "-")
-        .replace(/^-|-$/g, "");
+  const normalizedId = label
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
 
-  const isDuplicate = !isEditing && normalizedId.length > 0 && existingIds.includes(normalizedId);
+  const isDuplicate = normalizedId.length > 0 && existingIds.includes(normalizedId);
   const isValid = normalizedId.length > 0 && label.trim().length > 0 && !isDuplicate;
 
   const handleSave = () => {
@@ -159,10 +159,13 @@ function KeywordEditForm({
 
 export function KeywordSettings() {
   const t = useTranslations("settings.keywords");
-  const { emailKeywords, addKeyword, updateKeyword, removeKeyword, reorderKeywords } =
+  const { emailKeywords, addKeyword, updateKeyword, renameKeyword, removeKeyword, reorderKeywords } =
     useSettingsStore();
+  const { client } = useAuthStore();
+  const { fetchTagCounts } = useEmailStore();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isAdding, setIsAdding] = useState(false);
+  const [isMigrating, setIsMigrating] = useState(false);
 
   const existingIds = emailKeywords.map((k) => k.id);
 
@@ -171,8 +174,32 @@ export function KeywordSettings() {
     setIsAdding(false);
   };
 
-  const handleEdit = (keyword: KeywordDefinition) => {
-    updateKeyword(keyword.id, { label: keyword.label, color: keyword.color });
+  const handleEdit = async (keyword: KeywordDefinition) => {
+    const oldId = editingId;
+    if (!oldId) return;
+
+    const idChanged = oldId !== keyword.id;
+
+    if (idChanged && client) {
+      setIsMigrating(true);
+      try {
+        const oldJmapKeyword = `$label:${oldId}`;
+        const newJmapKeyword = `$label:${keyword.id}`;
+        await client.migrateKeyword(oldJmapKeyword, newJmapKeyword);
+        renameKeyword(oldId, keyword);
+        fetchTagCounts(client);
+      } catch (error) {
+        console.error("Failed to migrate keyword:", error);
+        const toastModule = await import('sonner');
+        toastModule.toast.error(t("migration_error"));
+        setIsMigrating(false);
+        return;
+      }
+      setIsMigrating(false);
+    } else {
+      updateKeyword(oldId, { label: keyword.label, color: keyword.color });
+    }
+
     setEditingId(null);
   };
 
@@ -187,6 +214,12 @@ export function KeywordSettings() {
   return (
     <SettingsSection title={t("title")} description={t("description")}>
       <div className="space-y-2">
+        {isMigrating && (
+          <div className="flex items-center gap-2 p-2 text-xs text-muted-foreground bg-accent/50 rounded-md">
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            {t("migrating")}
+          </div>
+        )}
         {emailKeywords.map((keyword) =>
           editingId === keyword.id ? (
             <KeywordEditForm

components/settings/sidebar-apps-settings.tsx

@@ -18,6 +18,7 @@ interface SidebarAppFormData {
   url: string;
   icon: string;
   openMode: "tab" | "inline";
+  showOnMobile: boolean;
 }
 
 function AppForm({
@@ -37,6 +38,7 @@ function AppForm({
     url: app?.url || "",
     icon: app?.icon || "Globe",
     openMode: app?.openMode || "tab",
+    showOnMobile: app?.showOnMobile ?? false,
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
 
@@ -144,6 +146,25 @@ function AppForm({
         </div>
       </div>
 
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium">{t("show_on_mobile")}</label>
+        <button
+          type="button"
+          onClick={() => setFormData({ ...formData, showOnMobile: !formData.showOnMobile })}
+          className={cn(
+            "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+            formData.showOnMobile ? "bg-primary" : "bg-muted-foreground/30"
+          )}
+        >
+          <span
+            className={cn(
+              "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+              formData.showOnMobile ? "translate-x-4.5" : "translate-x-0.5"
+            )}
+          />
+        </button>
+      </div>
+
       <div className="flex gap-2 justify-end">
         <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
           {t("cancel")}

components/tour/tour-overlay.tsx

@@ -0,0 +1,413 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { useTranslations } from "next-intl";
+import { useTour } from "./tour-provider";
+import { cn } from "@/lib/utils";
+import { useFocusTrap } from "@/hooks/use-focus-trap";
+
+interface Rect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+const PADDING = 8;
+const TOOLTIP_GAP = 12;
+const TOOLTIP_MAX_W = 360;
+
+function getTargetRect(selector: string): Rect | null {
+  const el = document.querySelector(selector);
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  // Element might exist but be hidden (zero dimensions)
+  if (r.width === 0 && r.height === 0) return null;
+  return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+
+function computeTooltipPosition(
+  target: Rect,
+  placement: "top" | "bottom" | "left" | "right",
+  tooltipSize: { width: number; height: number }
+): { top: number; left: number; actualPlacement: string } {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const tw = Math.max(tooltipSize.width, 200); // minimum fallback width
+  const th = Math.max(tooltipSize.height, 100); // minimum fallback height
+
+  const positions = {
+    bottom: {
+      top: target.top + target.height + PADDING + TOOLTIP_GAP,
+      left: target.left + target.width / 2 - tw / 2,
+    },
+    top: {
+      top: target.top - PADDING - TOOLTIP_GAP - th,
+      left: target.left + target.width / 2 - tw / 2,
+    },
+    right: {
+      top: target.top + target.height / 2 - th / 2,
+      left: target.left + target.width + PADDING + TOOLTIP_GAP,
+    },
+    left: {
+      top: target.top + target.height / 2 - th / 2,
+      left: target.left - PADDING - TOOLTIP_GAP - tw,
+    },
+  };
+
+  const fits = (p: { top: number; left: number }) =>
+    p.top >= 8 && p.left >= 8 && p.top + th <= vh - 8 && p.left + tw <= vw - 8;
+
+  // Try preferred placement first, then fallback order
+  const order: Array<"top" | "bottom" | "left" | "right"> = [placement, "bottom", "right", "left", "top"];
+  for (const dir of order) {
+    const pos = positions[dir];
+    if (fits(pos)) return { ...pos, actualPlacement: dir };
+  }
+
+  // If nothing fits perfectly, use preferred but clamped
+  const pos = positions[placement];
+  return {
+    top: Math.max(8, Math.min(pos.top, vh - th - 8)),
+    left: Math.max(8, Math.min(pos.left, vw - tw - 8)),
+    actualPlacement: placement,
+  };
+}
+
+export function TourOverlay() {
+  const t = useTranslations();
+  const { currentStep, totalSteps, steps, nextStep, prevStep, stopTour } = useTour();
+  const step = steps[currentStep];
+
+  const [targetRect, setTargetRect] = useState<Rect | null>(null);
+  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Use refs for callbacks to avoid stale closures in timers/intervals
+  const updatePositionRef = useRef<() => void>(() => {});
+  const nextStepRef = useRef<() => void>(() => {});
+  nextStepRef.current = nextStep;
+
+  const focusTrapRef = useFocusTrap({
+    isActive: visible,
+    onEscape: stopTour,
+    restoreFocus: true,
+  });
+
+  // Set mounted for portal
+  useEffect(() => { setMounted(true); }, []);
+
+  const updatePosition = useCallback(() => {
+    if (!step) return;
+    const rect = getTargetRect(step.target);
+
+    if (rect) {
+      setTargetRect(rect);
+      if (tooltipRef.current) {
+        const { width, height } = tooltipRef.current.getBoundingClientRect();
+        const pos = computeTooltipPosition(rect, step.placement, { width, height });
+        setTooltipPos({ top: pos.top, left: pos.left });
+      }
+    }
+    // If rect is null, keep previous targetRect (element temporarily hidden during scroll/resize)
+    // Only the step-change effect should null out targetRect
+  }, [step]);
+
+  // Keep ref in sync
+  updatePositionRef.current = updatePosition;
+
+  // Wait for target element to appear, then show
+  useEffect(() => {
+    if (!step) return;
+    console.log(`[Tour] Step ${currentStep + 1}/${totalSteps}: "${step.id}" — target: ${step.target}, placement: ${step.placement}, interactive: ${!!step.interactive}`);
+    setVisible(false);
+    // Keep old targetRect and tooltipPos so the cutout/tooltip animate to the new position
+    // instead of disappearing and reappearing
+
+    // Clear any pending timer from a previous step
+    if (pendingTimerRef.current) {
+      clearTimeout(pendingTimerRef.current);
+      pendingTimerRef.current = null;
+    }
+
+    // Run beforeAction if defined (e.g. click an email to open the viewer)
+    if (step.beforeAction) {
+      step.beforeAction();
+    }
+
+    let attempts = 0;
+    const maxAttempts = 50; // 5 seconds
+    let cancelled = false;
+
+    const tryFind = () => {
+      if (cancelled) return true;
+      const el = document.querySelector(step.target);
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        console.log(`[Tour] Step ${currentStep + 1} "${step.id}": element FOUND (${rect.width}x${rect.height} at ${Math.round(rect.left)},${Math.round(rect.top)})`);
+        el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        // Delay after scroll for layout to settle
+        pendingTimerRef.current = setTimeout(() => {
+          if (cancelled) return;
+          console.log(`[Tour] Step ${currentStep + 1} "${step.id}": showing tooltip`);
+          updatePositionRef.current();
+          setVisible(true);
+          // Second position update after tooltip renders with final dimensions
+          requestAnimationFrame(() => {
+            if (!cancelled) updatePositionRef.current();
+          });
+        }, 200);
+        return true;
+      }
+      if (attempts % 10 === 0) {
+        console.log(`[Tour] Step ${currentStep + 1} "${step.id}": element NOT found (attempt ${attempts + 1}/${maxAttempts})`);
+      }
+      return false;
+    };
+
+    if (tryFind()) return () => { cancelled = true; };
+
+    // Poll for element appearance (for page navigation)
+    const interval = setInterval(() => {
+      attempts++;
+      if (tryFind() || attempts >= maxAttempts) {
+        clearInterval(interval);
+        if (attempts >= maxAttempts && !cancelled) {
+          // Skip this step if element never appears
+          console.warn(`[Tour] Step ${currentStep + 1} "${step.id}": SKIPPED — element never appeared after ${maxAttempts} attempts`);
+          nextStepRef.current();
+        }
+      }
+    }, 100);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+      if (pendingTimerRef.current) {
+        clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = null;
+      }
+    };
+  }, [step, currentStep]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Recalculate on resize/scroll (debounced)
+  useEffect(() => {
+    if (!visible) return;
+    let rafId: number | null = null;
+    const handler = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        updatePosition();
+      });
+    };
+    window.addEventListener("resize", handler);
+    window.addEventListener("scroll", handler, true);
+    return () => {
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler, true);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [visible, updatePosition]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight" || e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        nextStep();
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        prevStep();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        stopTour();
+      }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [nextStep, prevStep, stopTour]);
+
+  // Re-position after tooltip content renders with new dimensions
+  useEffect(() => {
+    if (!visible || !tooltipRef.current) return;
+    // Use rAF to wait for the browser to lay out the tooltip content
+    const id = requestAnimationFrame(() => {
+      updatePosition();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [visible, updatePosition, currentStep]);
+
+  if (!mounted || !step) return null;
+
+  const cutout = targetRect
+    ? {
+        x: targetRect.left - PADDING,
+        y: targetRect.top - PADDING,
+        w: targetRect.width + PADDING * 2,
+        h: targetRect.height + PADDING * 2,
+      }
+    : null;
+
+  const isLast = currentStep >= totalSteps - 1;
+  const isFirst = currentStep === 0;
+  const isInteractive = step.interactive;
+
+  const reducedMotion =
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const transitionStyle = reducedMotion ? "none" : "all 300ms ease";
+
+  return createPortal(
+    <>
+      {/* SVG overlay with cutout */}
+      <svg
+        className="fixed inset-0 z-[9998]"
+        width="100%"
+        height="100%"
+        style={{ pointerEvents: isInteractive ? "none" : "auto" }}
+        onClick={stopTour}
+      >
+        <defs>
+          <mask id="tour-mask">
+            <rect fill="white" width="100%" height="100%" />
+            {cutout && (
+              <rect
+                fill="black"
+                x={cutout.x}
+                y={cutout.y}
+                width={cutout.w}
+                height={cutout.h}
+                rx="8"
+                style={{ transition: transitionStyle }}
+              />
+            )}
+          </mask>
+        </defs>
+        <rect
+          fill="black"
+          opacity="0.5"
+          mask="url(#tour-mask)"
+          width="100%"
+          height="100%"
+        />
+      </svg>
+
+      {/* Click-through cutout zone for interactive steps */}
+      {isInteractive && cutout && (
+        <div
+          className="fixed z-[9998]"
+          style={{
+            top: cutout.y,
+            left: cutout.x,
+            width: cutout.w,
+            height: cutout.h,
+            pointerEvents: "none",
+            transition: transitionStyle,
+          }}
+        />
+      )}
+
+      {/* Non-interactive overlay click blocker around cutout */}
+      {!isInteractive && cutout && (
+        <div
+          className="fixed z-[9998]"
+          style={{
+            top: cutout.y,
+            left: cutout.x,
+            width: cutout.w,
+            height: cutout.h,
+            pointerEvents: "none",
+          }}
+        />
+      )}
+
+      {/* Tooltip */}
+      <div
+        ref={(node) => {
+          (tooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          (focusTrapRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t(step.titleKey)}
+        className={cn(
+          "fixed z-[9999] transition-all",
+          visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
+        )}
+        style={{
+          top: tooltipPos?.top ?? -9999,
+          left: tooltipPos?.left ?? -9999,
+          maxWidth: TOOLTIP_MAX_W,
+          transition: reducedMotion ? "none" : "opacity 200ms ease, transform 200ms ease, top 300ms ease, left 300ms ease",
+          pointerEvents: "auto",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="bg-background border border-border rounded-xl shadow-2xl p-4">
+          {/* Step counter */}
+          <p className="text-xs text-muted-foreground mb-1" aria-live="polite">
+            {t("tour.step_counter", { current: currentStep + 1, total: totalSteps })}
+          </p>
+
+          {/* Title */}
+          <h3 className="font-semibold text-sm text-foreground">{t(step.titleKey)}</h3>
+
+          {/* Description */}
+          <p className="text-sm text-muted-foreground mt-1">{t(step.descriptionKey)}</p>
+
+          {/* Navigation buttons */}
+          <div className="flex items-center justify-between mt-3">
+            <button
+              onClick={stopTour}
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-muted"
+            >
+              {t("tour.skip")}
+            </button>
+            <div className="flex gap-2">
+              <button
+                onClick={prevStep}
+                disabled={isFirst}
+                className={cn(
+                  "text-xs px-3 py-1.5 rounded-md border border-border transition-colors",
+                  isFirst
+                    ? "opacity-40 cursor-not-allowed"
+                    : "hover:bg-muted"
+                )}
+              >
+                {t("tour.back")}
+              </button>
+              <button
+                onClick={nextStep}
+                className="text-xs px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+              >
+                {isLast ? t("tour.finish") : t("tour.next")}
+              </button>
+            </div>
+          </div>
+
+          {/* Progress dots */}
+          <div className="flex justify-center gap-1 mt-2">
+            {steps.map((_, i) => (
+              <span
+                key={i}
+                className={cn(
+                  "w-1.5 h-1.5 rounded-full transition-colors",
+                  i === currentStep ? "bg-primary" : "bg-muted-foreground/30"
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}

components/tour/tour-provider.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { useAuthStore } from "@/stores/auth-store";
+import { useCalendarStore } from "@/stores/calendar-store";
+import { useWebDAVStore } from "@/stores/webdav-store";
+import { getTourSteps, type TourStep } from "./tour-steps";
+import { TourOverlay } from "./tour-overlay";
+
+const TOUR_COMPLETED_KEY = "tour_completed";
+const TOUR_CURRENT_STEP_KEY = "tour_current_step";
+
+interface TourContextValue {
+  isActive: boolean;
+  currentStep: number;
+  totalSteps: number;
+  steps: TourStep[];
+  startTour: () => void;
+  stopTour: () => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  hasCompletedTour: boolean;
+  resetTourCompletion: () => void;
+}
+
+const TourContext = createContext<TourContextValue | null>(null);
+
+export function useTour() {
+  const ctx = useContext(TourContext);
+  if (!ctx) throw new Error("useTour must be used within TourProvider");
+  return ctx;
+}
+
+export function TourProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const { isDemoMode } = useAuthStore();
+  const { supportsCalendar } = useCalendarStore();
+  const { supportsWebDAV } = useWebDAVStore();
+
+  const [isActive, setIsActive] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [hasCompletedTour, setHasCompletedTour] = useState(false);
+
+  const steps = getTourSteps({ isDemoMode, supportsCalendar, supportsWebDAV: supportsWebDAV !== false });
+
+  useEffect(() => {
+    try {
+      setHasCompletedTour(localStorage.getItem(TOUR_COMPLETED_KEY) === "true");
+    } catch { /* */ }
+  }, []);
+
+  const startTour = useCallback(() => {
+    let resumeStep = 0;
+    try {
+      const stored = localStorage.getItem(TOUR_CURRENT_STEP_KEY);
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= 0) resumeStep = parsed;
+      }
+    } catch { /* */ }
+
+    // If the resume step is beyond the current steps, start from 0
+    if (resumeStep >= steps.length) resumeStep = 0;
+
+    setCurrentStep(resumeStep);
+    setIsActive(true);
+  }, [steps.length]);
+
+  const stopTour = useCallback(() => {
+    setIsActive(false);
+    try {
+      localStorage.removeItem(TOUR_CURRENT_STEP_KEY);
+    } catch { /* */ }
+  }, []);
+
+  const completeTour = useCallback(() => {
+    setIsActive(false);
+    setHasCompletedTour(true);
+    try {
+      localStorage.setItem(TOUR_COMPLETED_KEY, "true");
+      localStorage.removeItem(TOUR_CURRENT_STEP_KEY);
+    } catch { /* */ }
+  }, []);
+
+  const nextStep = useCallback(() => {
+    if (currentStep >= steps.length - 1) {
+      completeTour();
+      return;
+    }
+    const next = currentStep + 1;
+    const nextStepDef = steps[next];
+    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);
+    }
+  }, [currentStep, steps, completeTour, router]);
+
+  const prevStep = useCallback(() => {
+    if (currentStep <= 0) return;
+    const prev = currentStep - 1;
+    const prevStepDef = steps[prev];
+    setCurrentStep(prev);
+    try {
+      localStorage.setItem(TOUR_CURRENT_STEP_KEY, String(prev));
+    } catch { /* */ }
+
+    if (prevStepDef?.page) {
+      router.push(prevStepDef.page);
+    } else if (steps[currentStep]?.page) {
+      // Going back from a page-specific step to a non-page step => go to mail
+      router.push("/");
+    }
+  }, [currentStep, steps, router]);
+
+  const resetTourCompletion = useCallback(() => {
+    setHasCompletedTour(false);
+    try {
+      localStorage.removeItem(TOUR_COMPLETED_KEY);
+      localStorage.removeItem(TOUR_CURRENT_STEP_KEY);
+    } catch { /* */ }
+  }, []);
+
+  const value: TourContextValue = {
+    isActive,
+    currentStep,
+    totalSteps: steps.length,
+    steps,
+    startTour,
+    stopTour,
+    nextStep,
+    prevStep,
+    hasCompletedTour,
+    resetTourCompletion,
+  };
+
+  return (
+    <TourContext.Provider value={value}>
+      {children}
+      {isActive && <TourOverlay />}
+    </TourContext.Provider>
+  );
+}

components/tour/tour-steps.ts

@@ -0,0 +1,221 @@
+export interface TourStep {
+  id: string;
+  target: string;
+  titleKey: string;
+  descriptionKey: string;
+  placement: "top" | "bottom" | "left" | "right";
+  interactive?: boolean;
+  spotlight?: "rect" | "circle";
+  page?: string;
+  demoOnly?: boolean;
+  beforeAction?: () => void;
+}
+
+export const BASE_TOUR_STEPS: TourStep[] = [
+  {
+    id: "sidebar",
+    target: '[data-tour="sidebar"]',
+    titleKey: "tour.sidebar_title",
+    descriptionKey: "tour.sidebar_desc",
+    placement: "right",
+  },
+  {
+    id: "compose",
+    target: '[data-tour="compose-button"]',
+    titleKey: "tour.compose_title",
+    descriptionKey: "tour.compose_desc",
+    placement: "right",
+    interactive: true,
+  },
+  {
+    id: "search",
+    target: '[data-tour="search-input"]',
+    titleKey: "tour.search_title",
+    descriptionKey: "tour.search_desc",
+    placement: "bottom",
+    interactive: true,
+  },
+  {
+    id: "email-list",
+    target: '[data-tour="email-list"]',
+    titleKey: "tour.email_list_title",
+    descriptionKey: "tour.email_list_desc",
+    placement: "right",
+  },
+  {
+    id: "email-viewer",
+    target: '[data-tour="email-viewer"]',
+    titleKey: "tour.email_viewer_title",
+    descriptionKey: "tour.email_viewer_desc",
+    placement: "left",
+    beforeAction: () => {
+      // Click the "Welcome to Bulwark Mail!" email (or the first email) to open the viewer
+      const emailList = document.querySelector('[data-tour="email-list"]');
+      if (!emailList) return;
+      // Try to find the welcome email by subject text
+      const items = emailList.querySelectorAll('.cursor-pointer');
+      let target: HTMLElement | null = null;
+      for (const item of items) {
+        if (item.textContent?.includes("Welcome to Bulwark Mail")) {
+          target = item as HTMLElement;
+          break;
+        }
+      }
+      // Fallback to first email if welcome email not found
+      if (!target) target = emailList.querySelector('.cursor-pointer') as HTMLElement | null;
+      if (target) target.click();
+    },
+  },
+  {
+    id: "keywords",
+    target: '[data-tour="keyword-tags"]',
+    titleKey: "tour.keywords_title",
+    descriptionKey: "tour.keywords_desc",
+    placement: "right",
+  },
+  {
+    id: "nav-calendar",
+    target: '[data-tour="nav-calendar"]',
+    titleKey: "tour.calendar_title",
+    descriptionKey: "tour.calendar_desc",
+    placement: "right",
+  },
+  {
+    id: "nav-contacts",
+    target: '[data-tour="nav-contacts"]',
+    titleKey: "tour.contacts_title",
+    descriptionKey: "tour.contacts_desc",
+    placement: "right",
+  },
+  {
+    id: "nav-settings",
+    target: '[data-tour="nav-settings"]',
+    titleKey: "tour.settings_title",
+    descriptionKey: "tour.settings_desc",
+    placement: "right",
+  },
+  {
+    id: "shortcuts",
+    target: '[data-tour="nav-shortcuts"]',
+    titleKey: "tour.shortcuts_title",
+    descriptionKey: "tour.shortcuts_desc",
+    placement: "right",
+    interactive: true,
+  },
+];
+
+export const DEMO_TOUR_STEPS: TourStep[] = [
+  {
+    id: "compose-open",
+    target: '[data-tour="composer"]',
+    titleKey: "tour.compose_open_title",
+    descriptionKey: "tour.compose_open_desc",
+    placement: "left",
+    demoOnly: true,
+    beforeAction: () => {
+      // Click the compose button to open the composer
+      const btn = document.querySelector('[data-tour="compose-button"]') as HTMLElement | null;
+      if (btn) btn.click();
+    },
+  },
+  {
+    id: "calendar-view",
+    target: '[data-tour="calendar-view"]',
+    titleKey: "tour.calendar_view_title",
+    descriptionKey: "tour.calendar_view_desc",
+    placement: "bottom",
+    page: "/calendar",
+    demoOnly: true,
+  },
+  {
+    id: "create-event",
+    target: '[data-tour="create-event-button"]',
+    titleKey: "tour.create_event_title",
+    descriptionKey: "tour.create_event_desc",
+    placement: "bottom",
+    page: "/calendar",
+    interactive: true,
+    demoOnly: true,
+  },
+  {
+    id: "event-modal",
+    target: '[data-tour="event-modal"]',
+    titleKey: "tour.event_modal_title",
+    descriptionKey: "tour.event_modal_desc",
+    placement: "left",
+    page: "/calendar",
+    interactive: true,
+    demoOnly: true,
+    beforeAction: () => {
+      // Click the create event button to open the modal
+      const btn = document.querySelector('[data-tour="create-event-button"]') as HTMLElement | null;
+      if (btn) btn.click();
+    },
+  },
+  {
+    id: "contacts-list",
+    target: '[data-tour="contacts-list"]',
+    titleKey: "tour.contacts_list_title",
+    descriptionKey: "tour.contacts_list_desc",
+    placement: "right",
+    page: "/contacts",
+    demoOnly: true,
+  },
+  {
+    id: "settings-tabs",
+    target: '[data-tour="settings-tabs"]',
+    titleKey: "tour.settings_tabs_title",
+    descriptionKey: "tour.settings_tabs_desc",
+    placement: "right",
+    page: "/settings",
+    demoOnly: true,
+  },
+  {
+    id: "nav-files",
+    target: '[data-tour="nav-files"]',
+    titleKey: "tour.files_title",
+    descriptionKey: "tour.files_desc",
+    placement: "right",
+    demoOnly: true,
+  },
+  {
+    id: "demo-banner",
+    target: '[data-tour="demo-banner"]',
+    titleKey: "tour.demo_banner_title",
+    descriptionKey: "tour.demo_banner_desc",
+    placement: "bottom",
+    page: "/",
+    demoOnly: true,
+  },
+  {
+    id: "quota",
+    target: '[data-tour="storage-quota"]',
+    titleKey: "tour.quota_title",
+    descriptionKey: "tour.quota_desc",
+    placement: "right",
+    demoOnly: true,
+  },
+];
+
+export function getTourSteps(options: {
+  isDemoMode: boolean;
+  supportsCalendar: boolean;
+  supportsWebDAV: boolean;
+}): TourStep[] {
+  let steps = [...BASE_TOUR_STEPS];
+
+  if (!options.supportsCalendar) {
+    steps = steps.filter((s) => s.id !== "nav-calendar");
+  }
+
+  if (options.isDemoMode) {
+    const demoSteps = DEMO_TOUR_STEPS.filter((s) => {
+      if (s.id === "nav-files" && !options.supportsWebDAV) return false;
+      if ((s.id === "calendar-view" || s.id === "create-event" || s.id === "event-modal") && !options.supportsCalendar) return false;
+      return true;
+    });
+    steps = [...steps, ...demoSteps];
+  }
+
+  return steps;
+}

components/ui/welcome-banner.tsx

@@ -2,15 +2,17 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
-import { X, Lightbulb, Settings } from "lucide-react";
+import { X, Lightbulb, Settings, PlayCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "@/i18n/navigation";
+import { useTour } from "@/components/tour/tour-provider";
 
 const ONBOARDING_KEY = "onboarding_completed";
 
 export function WelcomeBanner() {
   const t = useTranslations("welcome");
   const router = useRouter();
+  const { startTour } = useTour();
   const [visible, setVisible] = useState(false);
   const [dismissed, setDismissed] = useState(false);
 
@@ -78,6 +80,15 @@ export function WelcomeBanner() {
           </button>
         </div>
         <div className="mt-2.5 flex justify-end gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => { dismiss(); startTour(); }}
+            className="text-xs h-7"
+          >
+            <PlayCircle className="w-3.5 h-3.5 mr-1" />
+            {t("start_tour")}
+          </Button>
           <Button
             variant="outline"
             size="sm"

eslint.config.mjs

@@ -28,15 +28,18 @@ export default [
     },
     plugins: {
       "@typescript-eslint": tseslint,
-      "react": reactPlugin,
+      react: reactPlugin,
       "react-hooks": reactHooksPlugin,
     },
     rules: {
       ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/no-unused-vars": ["warn", {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
       "@typescript-eslint/no-explicit-any": "warn",
       "@typescript-eslint/no-empty-object-type": "off",
       "react-hooks/rules-of-hooks": "error",
@@ -70,6 +73,7 @@ export default [
       "*.config.js",
       "*.config.mjs",
       "e2e/**",
+      "local-data/**/*.mjs",
     ],
   },
 ];

hooks/use-calendar-alerts.ts

@@ -5,9 +5,10 @@ import { useTranslations, useLocale } from 'next-intl';
 import { useAuthStore } from '@/stores/auth-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useSettingsStore } from '@/stores/settings-store';
+import { useTaskStore } from '@/stores/task-store';
 import { useCalendarNotificationStore } from '@/stores/calendar-notification-store';
 import { useToastStore } from '@/stores/toast-store';
-import { getPendingAlerts, buildAlertKey } from '@/lib/calendar-alerts';
+import { getPendingAlerts, getPendingTaskAlerts, buildAlertKey } from '@/lib/calendar-alerts';
 import { playNotificationSound } from '@/lib/notification-sound';
 import type { CalendarEvent } from '@/lib/jmap/types';
 
@@ -18,7 +19,8 @@ const PROACTIVE_THROTTLE_MS = CHECK_INTERVAL_MS * 5;
 export function useCalendarAlerts() {
   const { isAuthenticated, client } = useAuthStore();
   const { events, calendars, supportsCalendar } = useCalendarStore();
-  const { calendarNotificationsEnabled, calendarNotificationSound } = useSettingsStore();
+  const { calendarNotificationsEnabled, calendarNotificationSound, enableCalendarTasks } = useSettingsStore();
+  const { tasks: storeTasks } = useTaskStore();
   const { acknowledgedAlerts, acknowledgeAlert, cleanupStaleAlerts } = useCalendarNotificationStore();
   const addToast = useToastStore((s) => s.addToast);
   const t = useTranslations('calendar.notifications');
@@ -69,6 +71,36 @@ export function useCalendarAlerts() {
           },
         });
       }
+
+      // Task alerts
+      if (enableCalendarTasks && storeTasks.length > 0) {
+        const pendingTaskAlerts = getPendingTaskAlerts(storeTasks, calendars, acknowledgedKeys, now);
+        for (const taskAlert of pendingTaskAlerts) {
+          const key = buildAlertKey(taskAlert.taskId, taskAlert.alertId, taskAlert.fireTimeMs);
+          if (shownKeysRef.current.has(key)) continue;
+
+          shownKeysRef.current.add(key);
+          acknowledgeAlert(key, taskAlert.fireTimeMs);
+
+          if (calendarNotificationSound) {
+            playNotificationSound();
+          }
+
+          const taskMsg = taskAlert.calendarName
+            ? `${t('task_due')} · ${taskAlert.calendarName}`
+            : t('task_due');
+
+          addToast({
+            type: 'info',
+            title: taskAlert.task.title || t('alert_title'),
+            message: taskMsg,
+            duration: 15000,
+            onClick: () => {
+              window.location.href = `/${locale}/calendar`;
+            },
+          });
+        }
+      }
     } catch {
       // Silently ignore alert evaluation errors
     }

hooks/use-config.ts

@@ -22,6 +22,10 @@ interface ConfigData {
   loginImprintUrl: string;
   loginPrivacyPolicyUrl: string;
   loginWebsiteUrl: string;
+  demoMode: boolean;
+  autoSsoEnabled: boolean;
+  embeddedMode: boolean;
+  parentOrigin: string;
 }
 
 interface AppConfig extends ConfigData {
@@ -91,6 +95,10 @@ export function useConfig(): AppConfig {
     loginImprintUrl: configCache?.loginImprintUrl || '',
     loginPrivacyPolicyUrl: configCache?.loginPrivacyPolicyUrl || '',
     loginWebsiteUrl: configCache?.loginWebsiteUrl || '',
+    demoMode: configCache?.demoMode || false,
+    autoSsoEnabled: configCache?.autoSsoEnabled || false,
+    embeddedMode: configCache?.embeddedMode || false,
+    parentOrigin: configCache?.parentOrigin || '',
     isLoading: !configCache,
     error: null,
   });
@@ -118,6 +126,10 @@ export function useConfig(): AppConfig {
         loginImprintUrl: configCache.loginImprintUrl,
         loginPrivacyPolicyUrl: configCache.loginPrivacyPolicyUrl,
         loginWebsiteUrl: configCache.loginWebsiteUrl,
+        demoMode: configCache.demoMode,
+        autoSsoEnabled: configCache.autoSsoEnabled,
+        embeddedMode: configCache.embeddedMode,
+        parentOrigin: configCache.parentOrigin,
         isLoading: false,
         error: null,
       });
@@ -146,6 +158,10 @@ export function useConfig(): AppConfig {
           loginImprintUrl: data.loginImprintUrl,
           loginPrivacyPolicyUrl: data.loginPrivacyPolicyUrl,
           loginWebsiteUrl: data.loginWebsiteUrl,
+          demoMode: data.demoMode,
+          autoSsoEnabled: data.autoSsoEnabled,
+          embeddedMode: data.embeddedMode,
+          parentOrigin: data.parentOrigin,
           isLoading: false,
           error: null,
         });

lib/__tests__/health-route.test.ts

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const loggerError = vi.fn();
+
+vi.mock('next/server', () => ({
+  NextResponse: {
+    json: (data: unknown, init?: { status?: number; headers?: unknown }) => ({
+      status: init?.status ?? 200,
+      headers: init?.headers,
+      json: async () => data,
+    }),
+  },
+}));
+
+vi.mock('@/lib/logger', () => ({
+  logger: {
+    error: loggerError,
+  },
+}));
+
+describe('health route', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    loggerError.mockReset();
+  });
+
+  it('returns healthy for the basic liveness probe even when heap usage is high', async () => {
+    vi.spyOn(process, 'memoryUsage').mockReturnValue({
+      rss: 120_000_000,
+      heapTotal: 45_000_000,
+      heapUsed: 43_000_000,
+      external: 8_000_000,
+      arrayBuffers: 1_000_000,
+    });
+
+    const { GET } = await import('@/app/api/health/route');
+    const response = await GET({ nextUrl: new URL('http://localhost/api/health') } as never);
+    const payload = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(payload).toMatchObject({
+      status: 'healthy',
+    });
+    expect(payload.warnings).toBeUndefined();
+  });
+
+  it('returns degraded diagnostics in detailed mode without failing the probe', async () => {
+    vi.spyOn(process, 'memoryUsage').mockReturnValue({
+      rss: 120_000_000,
+      heapTotal: 4_100_000_000,
+      heapUsed: 4_000_000_000,
+      external: 8_000_000,
+      arrayBuffers: 1_000_000,
+    });
+    vi.spyOn(process, 'uptime').mockReturnValue(123.45);
+
+    const { GET } = await import('@/app/api/health/route');
+    const response = await GET({ nextUrl: new URL('http://localhost/api/health?detailed=true') } as never);
+    const payload = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(payload.status).toBe('degraded');
+    expect(payload.memory).toMatchObject({
+      heapUsed: 4_000_000_000,
+      heapTotal: 4_100_000_000,
+      rss: 120_000_000,
+      external: 8_000_000,
+    });
+    expect(payload.memory.heapSizeLimit).toBeGreaterThan(0);
+    expect(payload.warnings).toEqual([
+      expect.stringContaining('V8 heap usage is high'),
+    ]);
+  });
+
+  it('keeps HEAD as a stable liveness probe', async () => {
+    const { HEAD } = await import('@/app/api/health/route');
+    const response = await HEAD();
+
+    expect(response.status).toBe(200);
+  });
+
+  it('returns 503 when collecting health diagnostics throws', async () => {
+    vi.spyOn(process, 'memoryUsage').mockImplementation(() => {
+      throw new Error('boom');
+    });
+
+    const { GET } = await import('@/app/api/health/route');
+    const response = await GET({ nextUrl: new URL('http://localhost/api/health') } as never);
+    const payload = await response.json();
+
+    expect(response.status).toBe(503);
+    expect(payload).toMatchObject({
+      status: 'unhealthy',
+      reason: 'boom',
+    });
+    expect(loggerError).toHaveBeenCalledWith('Health check failed', { error: 'boom' });
+  });
+});

lib/__tests__/jmap-contact-client.test.ts

@@ -122,10 +122,15 @@ describe('JMAPClient contact methods', () => {
   describe('getContacts', () => {
     it('should return contacts from server', async () => {
       const client = createClient();
-      mockFetch({
+      const spy = vi.spyOn(globalThis, 'fetch');
+      mockFetchOnce(spy, {
         methodResponses: [
-          ['ContactCard/query', { ids: ['contact-1'] }, '0'],
-          ['ContactCard/get', { list: [mockContact] }, '1'],
+          ['ContactCard/query', { ids: ['contact-1'] }, 'q'],
+        ],
+      });
+      mockFetchOnce(spy, {
+        methodResponses: [
+          ['ContactCard/get', { list: [mockContact] }, 'g'],
         ],
       });
 

lib/__tests__/signature-utils.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  appendPlainTextSignature,
+  getPlainTextSignature,
+  hasMeaningfulHtmlBody,
+} from '../signature-utils';
+
+describe('signature-utils', () => {
+  describe('getPlainTextSignature', () => {
+    it('prefers text signatures when present', () => {
+      expect(getPlainTextSignature({ textSignature: 'Regards,\nAlice', htmlSignature: '<p>Ignored</p>' })).toBe('Regards,\nAlice');
+    });
+
+    it('converts html-only signatures into plain text', () => {
+      expect(getPlainTextSignature({ htmlSignature: '<p>Alice Example<br><a href="mailto:alice@example.com">alice@example.com</a></p>' })).toBe('Alice Example\nalice@example.com');
+    });
+  });
+
+  describe('appendPlainTextSignature', () => {
+    it('appends a converted html signature to the text body', () => {
+      expect(appendPlainTextSignature('Hello there', { htmlSignature: '<p>Alice<br>Engineering</p>' })).toBe('Hello there\n\n-- \nAlice\nEngineering');
+    });
+
+    it('leaves the body untouched when no signature exists', () => {
+      expect(appendPlainTextSignature('Hello there', {})).toBe('Hello there');
+    });
+  });
+
+  describe('hasMeaningfulHtmlBody', () => {
+    it('prefers html bodies that preserve signature formatting', () => {
+      expect(hasMeaningfulHtmlBody('<div>Hello</div><br><p>Alice</p>')).toBe(true);
+    });
+
+    it('ignores minimal wrapper html with a single block', () => {
+      expect(hasMeaningfulHtmlBody('<div>Hello world</div>')).toBe(false);
+    });
+  });
+});

lib/account-state-manager.ts

@@ -0,0 +1,130 @@
+/**
+ * Manages per-account state snapshots for fast switching.
+ * When user switches from Account A → B, we snapshot A's store state
+ * into memory, clear stores, then restore B's cached state.
+ */
+
+import { useEmailStore } from '@/stores/email-store';
+import { useContactStore } from '@/stores/contact-store';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useFilterStore } from '@/stores/filter-store';
+import { DEFAULT_SEARCH_FILTERS } from '@/lib/jmap/search-utils';
+import { useIdentityStore } from '@/stores/identity-store';
+import { useVacationStore } from '@/stores/vacation-store';
+
+// Minimal snapshot shapes — we only capture what we need
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type StoreSnapshot = Record<string, any>;
+
+interface AccountSnapshot {
+  email: StoreSnapshot;
+  contact: StoreSnapshot;
+  calendar: StoreSnapshot;
+  filter: StoreSnapshot;
+  identity: StoreSnapshot;
+  vacation: StoreSnapshot;
+}
+
+const cache = new Map<string, AccountSnapshot>();
+
+/** Capture current store states for the given account */
+export function snapshotAccount(accountId: string): void {
+  const emailState = useEmailStore.getState();
+  const contactState = useContactStore.getState();
+  const calendarState = useCalendarStore.getState();
+  const filterState = useFilterStore.getState();
+  const identityState = useIdentityStore.getState();
+  const vacationState = useVacationStore.getState();
+
+  cache.set(accountId, {
+    email: {
+      emails: emailState.emails,
+      mailboxes: emailState.mailboxes,
+      selectedEmail: emailState.selectedEmail,
+      selectedMailbox: emailState.selectedMailbox,
+      searchQuery: emailState.searchQuery,
+      quota: emailState.quota,
+    },
+    contact: {
+      contacts: contactState.contacts,
+      addressBooks: contactState.addressBooks,
+      supportsSync: contactState.supportsSync,
+    },
+    calendar: {
+      calendars: calendarState.calendars,
+      events: calendarState.events,
+      selectedCalendarIds: calendarState.selectedCalendarIds,
+      viewMode: calendarState.viewMode,
+      supportsCalendar: calendarState.supportsCalendar,
+    },
+    filter: {
+      rules: filterState.rules,
+      isSupported: filterState.isSupported,
+    },
+    identity: {
+      identities: identityState.identities,
+      preferredPrimaryId: identityState.preferredPrimaryId,
+    },
+    vacation: {
+      isEnabled: vacationState.isEnabled,
+      isSupported: vacationState.isSupported,
+    },
+  });
+}
+
+/** Restore cached store states for the given account. Returns false if no cache exists. */
+export function restoreAccount(accountId: string): boolean {
+  const snapshot = cache.get(accountId);
+  if (!snapshot) return false;
+
+  useEmailStore.setState(snapshot.email);
+  useContactStore.setState(snapshot.contact);
+  useCalendarStore.setState(snapshot.calendar);
+  useFilterStore.setState(snapshot.filter);
+  useIdentityStore.setState(snapshot.identity);
+  useVacationStore.setState(snapshot.vacation);
+
+  return true;
+}
+
+/** Clear all stores (used before restoring a different account) */
+export function clearAllStores(): void {
+  useEmailStore.setState({
+    emails: [],
+    mailboxes: [],
+    selectedEmail: null,
+    selectedMailbox: '',
+    isLoading: false,
+    error: null,
+    searchQuery: '',
+    quota: null,
+    isPushConnected: false,
+    lastPushUpdate: null,
+    newEmailNotification: null,
+    selectedEmailIds: new Set<string>(),
+    hasMoreEmails: false,
+    totalEmails: 0,
+    expandedThreadIds: new Set<string>(),
+    threadEmailsCache: new Map(),
+    isLoadingThread: null,
+    selectedKeyword: null,
+    tagCounts: {},
+    searchFilters: { ...DEFAULT_SEARCH_FILTERS },
+    isAdvancedSearchOpen: false,
+  });
+  useIdentityStore.getState().clearIdentities();
+  useContactStore.getState().clearContacts();
+  useVacationStore.getState().clearState();
+  useCalendarStore.getState().clearState();
+  useFilterStore.getState().clearState();
+}
+
+/** Evict cached state for one account */
+export function evictAccount(accountId: string): void {
+  cache.delete(accountId);
+}
+
+/** Evict all cached states */
+export function evictAll(): void {
+  cache.clear();
+}

lib/account-utils.ts

@@ -0,0 +1,59 @@
+/**
+ * Utilities for multi-account support:
+ * - Account ID generation
+ * - Deterministic avatar colors
+ * - Account-scoped localStorage keys
+ */
+
+/** Generate a unique, deterministic account ID from username and server URL */
+export function generateAccountId(username: string, serverUrl: string): string {
+  const host = new URL(serverUrl).hostname;
+  return `${username}@${host}`;
+}
+
+/** Deterministic avatar/accent color from an email string */
+export function generateAvatarColor(email: string): string {
+  let hash = 0;
+  for (let i = 0; i < email.length; i++) {
+    hash = ((hash << 5) - hash + email.charCodeAt(i)) | 0;
+  }
+  // 12 distinct, accessible hues
+  const colors = [
+    '#2563eb', // blue
+    '#7c3aed', // violet
+    '#db2777', // pink
+    '#dc2626', // red
+    '#ea580c', // orange
+    '#d97706', // amber
+    '#65a30d', // lime
+    '#16a34a', // green
+    '#0d9488', // teal
+    '#0891b2', // cyan
+    '#6366f1', // indigo
+    '#9333ea', // purple
+  ];
+  return colors[Math.abs(hash) % colors.length];
+}
+
+/** Get initials for an avatar from a display name or email */
+export function getInitials(name: string, email?: string): string {
+  if (name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return parts[0][0]?.toUpperCase() ?? '?';
+  }
+  if (email) {
+    return email[0]?.toUpperCase() ?? '?';
+  }
+  return '?';
+}
+
+/** Build an account-scoped localStorage key */
+export function getAccountScopedKey(baseKey: string, accountId: string): string {
+  return `${baseKey}::${accountId}`;
+}
+
+/** Maximum number of accounts allowed */
+export const MAX_ACCOUNTS = 5;

lib/auth/crypto.ts

@@ -48,3 +48,38 @@ export function decryptSession(token: string): { serverUrl: string; username: st
     return null;
   }
 }
+
+export function encryptPayload(payload: Record<string, unknown>): string {
+  const key = getKey();
+  const iv = randomBytes(IV_LENGTH);
+  const cipher = createCipheriv(ALGORITHM, key, iv);
+
+  const json = JSON.stringify(payload);
+  const encrypted = Buffer.concat([cipher.update(json, 'utf8'), cipher.final()]);
+  const tag = cipher.getAuthTag();
+
+  return Buffer.concat([iv, tag, encrypted]).toString('base64');
+}
+
+export function decryptPayload(token: string): Record<string, unknown> | null {
+  try {
+    const key = getKey();
+    const data = Buffer.from(token, 'base64');
+    if (data.length < IV_LENGTH + TAG_LENGTH) return null;
+
+    const iv = data.subarray(0, IV_LENGTH);
+    const tag = data.subarray(IV_LENGTH, IV_LENGTH + TAG_LENGTH);
+    const encrypted = data.subarray(IV_LENGTH + TAG_LENGTH);
+
+    const decipher = createDecipheriv(ALGORITHM, key, iv);
+    decipher.setAuthTag(tag);
+
+    const decrypted = Buffer.concat([decipher.update(encrypted), decipher.final()]);
+    return JSON.parse(decrypted.toString('utf8'));
+  } catch (error) {
+    logger.warn('Payload decryption failed', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    });
+    return null;
+  }
+}

lib/auth/session-cookie.ts

@@ -1,2 +1,7 @@
 export const SESSION_COOKIE = 'jmap_session';
 export const SESSION_COOKIE_MAX_AGE = 30 * 24 * 60 * 60;
+
+/** Get the cookie name for a given account slot (0-4). Slot 0 uses the legacy name. */
+export function sessionCookieName(slot: number): string {
+  return slot === 0 ? SESSION_COOKIE : `${SESSION_COOKIE}_${slot}`;
+}

lib/browser-navigation.ts

@@ -0,0 +1,7 @@
+export function replaceWindowLocation(url: string): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.location.replace(url);
+}

lib/calendar-alerts.ts

@@ -4,6 +4,7 @@ import type {
   CalendarOffsetTrigger,
   CalendarAbsoluteTrigger,
   Calendar,
+  CalendarTask,
 } from '@/lib/jmap/types';
 
 export interface PendingAlert {
@@ -121,3 +122,68 @@ export function getPendingAlerts(
 
   return pending;
 }
+
+export interface PendingTaskAlert {
+  taskId: string;
+  alertId: string;
+  fireTimeMs: number;
+  task: CalendarTask;
+  calendarName: string | null;
+}
+
+export function computeTaskFireTime(
+  task: CalendarTask,
+  trigger: CalendarOffsetTrigger | CalendarAbsoluteTrigger
+): number | null {
+  if (trigger['@type'] === 'AbsoluteTrigger') {
+    const t = new Date(trigger.when).getTime();
+    return Number.isNaN(t) ? null : t;
+  }
+
+  const offsetMs = parseAlertOffset(trigger.offset);
+  if (offsetMs === null) return null;
+
+  if (!task.due) return null;
+  const baseTime = new Date(task.due).getTime();
+  if (Number.isNaN(baseTime)) return null;
+  return baseTime + offsetMs;
+}
+
+export function getPendingTaskAlerts(
+  tasks: CalendarTask[],
+  calendars: Calendar[],
+  acknowledgedKeys: Set<string>,
+  now: number
+): PendingTaskAlert[] {
+  const pending: PendingTaskAlert[] = [];
+
+  for (const task of tasks) {
+    if (!task.alerts) continue;
+    if (task.progress === 'completed' || task.progress === 'cancelled') continue;
+
+    const calendar = calendars.find(c => c.id === Object.keys(task.calendarIds)[0]) ?? null;
+
+    for (const [alertId, alert] of Object.entries(task.alerts)) {
+      if (alert.action !== 'display') continue;
+      if (alert.acknowledged) continue;
+
+      const fireTimeMs = computeTaskFireTime(task, alert.trigger);
+      if (fireTimeMs === null) continue;
+      if (fireTimeMs > now) continue;
+      if (fireTimeMs <= now - STALE_THRESHOLD_MS) continue;
+
+      const key = buildAlertKey(task.id, alertId, fireTimeMs);
+      if (acknowledgedKeys.has(key)) continue;
+
+      pending.push({
+        taskId: task.id,
+        alertId,
+        fireTimeMs,
+        task,
+        calendarName: calendar?.name ?? null,
+      });
+    }
+  }
+
+  return pending;
+}

lib/calendar-utils.ts

@@ -142,3 +142,7 @@ export function formatSnapTime(minutes: number, timeFormat: "12h" | "24h"): stri
   }
   return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
 }
+
+export function getPrimaryCalendarId(event: Pick<CalendarEvent, 'calendarIds'>): string | undefined {
+  return Object.keys(event.calendarIds || {})[0];
+}

lib/demo/demo-client.ts

@@ -0,0 +1,861 @@
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
+import type { Email, Mailbox, StateChange, AccountStates, Thread, Identity, EmailAddress, ContactCard, AddressBook, VacationResponse, Calendar, CalendarEvent, CalendarEventFilter, CalendarTask, FileNode } from '@/lib/jmap/types';
+import type { SieveScript, SieveCapabilities } from '@/lib/jmap/sieve-types';
+import { getDemoData, type DemoData } from './demo-data';
+import { generateDemoId } from './demo-utils';
+
+/**
+ * In-memory JMAP client for demo mode.
+ * All data lives in memory — no network calls, no cookies.
+ */
+export class DemoJMAPClient implements IJMAPClient {
+  private data: DemoData;
+  private blobStore = new Map<string, Blob>();
+  private connectionCallback: ((connected: boolean) => void) | null = null;
+  private stateChangeCallback: ((change: StateChange) => void) | null = null;
+  private lastStates: AccountStates = {};
+  private incomingTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    this.data = getDemoData();
+  }
+
+  // ── Connection lifecycle ──────────────────────────────────────
+
+  async connect(): Promise<void> {
+    // Start simulated incoming email timer
+    this.startIncomingEmailTimer();
+  }
+
+  disconnect(): void {
+    this.stopIncomingEmailTimer();
+    this.connectionCallback = null;
+    this.stateChangeCallback = null;
+  }
+
+  async reconnect(): Promise<void> { /* no-op */ }
+  async ping(): Promise<void> { /* no-op */ }
+
+  // ── Session / auth accessors ──────────────────────────────────
+
+  getServerUrl(): string { return 'https://demo.example.com'; }
+  getAuthHeader(): string { return 'Bearer demo-token'; }
+  updateAccessToken(): void { /* no-op */ }
+  getAccountId(): string { return 'demo-account'; }
+  getUsername(): string { return 'demo@example.com'; }
+
+  // ── Capabilities ──────────────────────────────────────────────
+
+  getCapabilities(): Record<string, unknown> {
+    return {
+      'urn:ietf:params:jmap:core': { maxSizeUpload: 50_000_000, maxCallsInRequest: 16, maxObjectsInGet: 500 },
+      'urn:ietf:params:jmap:mail': {},
+      'urn:ietf:params:jmap:submission': {},
+      'urn:ietf:params:jmap:vacationresponse': {},
+      'urn:ietf:params:jmap:contacts': {},
+      'urn:ietf:params:jmap:calendars': {},
+      'urn:ietf:params:jmap:sieve': {},
+      'urn:ietf:params:jmap:quota': {},
+      'urn:ietf:params:jmap:files': {},
+    };
+  }
+
+  getMaxSizeUpload(): number { return 50_000_000; }
+  getMaxCallsInRequest(): number { return 16; }
+  getMaxObjectsInGet(): number { return 500; }
+  getEventSourceUrl(): string | null { return null; }
+  supportsEmailSubmission(): boolean { return true; }
+  supportsQuota(): boolean { return true; }
+  supportsVacationResponse(): boolean { return true; }
+  supportsContacts(): boolean { return true; }
+  supportsCalendars(): boolean { return true; }
+  supportsSieve(): boolean { return true; }
+  supportsFiles(): boolean { return true; }
+
+  // ── Push / state ──────────────────────────────────────────────
+
+  setupPushNotifications(): boolean { return true; }
+  closePushNotifications(): void { /* no-op in demo */ }
+  onConnectionChange(callback: (connected: boolean) => void): void { this.connectionCallback = callback; }
+  onStateChange(callback: (change: StateChange) => void): void { this.stateChangeCallback = callback; }
+  getLastStates(): AccountStates { return { ...this.lastStates }; }
+  setLastStates(states: AccountStates): void { this.lastStates = { ...states }; }
+
+  // ── Quota ─────────────────────────────────────────────────────
+
+  async getQuota(): Promise<{ used: number; total: number } | null> {
+    return { used: 245_366_784, total: 1_073_741_824 };
+  }
+
+  // ── Mailboxes ─────────────────────────────────────────────────
+
+  async getMailboxes(): Promise<Mailbox[]> { return [...this.data.mailboxes]; }
+  async getAllMailboxes(): Promise<Mailbox[]> { return [...this.data.mailboxes]; }
+
+  async createMailbox(name: string, parentId?: string): Promise<Mailbox> {
+    const mb: Mailbox = {
+      id: generateDemoId('mailbox'),
+      name,
+      sortOrder: 100,
+      totalEmails: 0,
+      unreadEmails: 0,
+      totalThreads: 0,
+      unreadThreads: 0,
+      parentId,
+      isSubscribed: true,
+      myRights: { mayReadItems: true, mayAddItems: true, mayRemoveItems: true, maySetSeen: true, maySetKeywords: true, mayCreateChild: true, mayRename: true, mayDelete: true, maySubmit: true },
+    };
+    this.data.mailboxes.push(mb);
+    return mb;
+  }
+
+  async updateMailbox(mailboxId: string, changes: { name?: string; parentId?: string | null; role?: string | null; sortOrder?: number }): Promise<void> {
+    const mb = this.data.mailboxes.find(m => m.id === mailboxId);
+    if (mb) Object.assign(mb, changes);
+  }
+
+  async deleteMailbox(mailboxId: string): Promise<void> {
+    this.data.mailboxes = this.data.mailboxes.filter(m => m.id !== mailboxId);
+    // Also remove emails in this mailbox
+    this.data.emails = this.data.emails.filter(e => !e.mailboxIds[mailboxId]);
+  }
+
+  // ── Emails ────────────────────────────────────────────────────
+
+  async getEmails(mailboxId?: string, _accountId?: string, limit: number = 50, position: number = 0): Promise<{ emails: Email[]; hasMore: boolean; total: number }> {
+    let filtered = this.data.emails;
+    if (mailboxId) {
+      filtered = filtered.filter(e => e.mailboxIds[mailboxId]);
+    }
+    filtered.sort((a, b) => new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime());
+    const total = filtered.length;
+    const emails = filtered.slice(position, position + limit);
+    return { emails, hasMore: position + limit < total, total };
+  }
+
+  async getEmailsInMailbox(mailboxId: string): Promise<Email[]> {
+    return this.data.emails.filter(e => e.mailboxIds[mailboxId]);
+  }
+
+  async getEmail(emailId: string): Promise<Email | null> {
+    return this.data.emails.find(e => e.id === emailId) ?? null;
+  }
+
+  async getTagCounts(tagIds: string[]): Promise<Record<string, { total: number; unread: number }>> {
+    const result: Record<string, { total: number; unread: number }> = {};
+    for (const tagId of tagIds) {
+      const tagged = this.data.emails.filter(e => e.keywords[tagId]);
+      result[tagId] = {
+        total: tagged.length,
+        unread: tagged.filter(e => !e.keywords.$seen).length,
+      };
+    }
+    return result;
+  }
+
+  async searchEmails(query: string, mailboxId?: string, _accountId?: string, limit: number = 50, position: number = 0): Promise<{ emails: Email[]; hasMore: boolean; total: number }> {
+    const q = query.toLowerCase();
+    let filtered = this.data.emails.filter(e => {
+      const text = [e.subject, e.preview, e.from?.[0]?.name, e.from?.[0]?.email].filter(Boolean).join(' ').toLowerCase();
+      return text.includes(q);
+    });
+    if (mailboxId) filtered = filtered.filter(e => e.mailboxIds[mailboxId]);
+    filtered.sort((a, b) => new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime());
+    const total = filtered.length;
+    const emails = filtered.slice(position, position + limit);
+    return { emails, hasMore: position + limit < total, total };
+  }
+
+  async advancedSearchEmails(filter: Record<string, unknown>, _accountId?: string, limit: number = 50, position: number = 0): Promise<{ emails: Email[]; hasMore: boolean; total: number }> {
+    // Simplified: just return all emails for any advanced filter
+    let filtered = [...this.data.emails];
+    if (filter.inMailbox) filtered = filtered.filter(e => e.mailboxIds[filter.inMailbox as string]);
+    if (filter.text) {
+      const q = (filter.text as string).toLowerCase();
+      filtered = filtered.filter(e => [e.subject, e.preview].filter(Boolean).join(' ').toLowerCase().includes(q));
+    }
+    filtered.sort((a, b) => new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime());
+    const total = filtered.length;
+    const emails = filtered.slice(position, position + limit);
+    return { emails, hasMore: position + limit < total, total };
+  }
+
+  // ── Email mutations ───────────────────────────────────────────
+
+  async markAsRead(emailId: string, read: boolean = true): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (!email) return;
+    if (read) {
+      email.keywords.$seen = true;
+    } else {
+      delete email.keywords.$seen;
+    }
+    this.recalcMailboxCounts();
+  }
+
+  async batchMarkAsRead(emailIds: string[], read: boolean = true): Promise<void> {
+    for (const id of emailIds) {
+      const email = this.data.emails.find(e => e.id === id);
+      if (email) {
+        if (read) email.keywords.$seen = true;
+        else delete email.keywords.$seen;
+      }
+    }
+    this.recalcMailboxCounts();
+  }
+
+  async toggleStar(emailId: string, starred: boolean): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (!email) return;
+    if (starred) email.keywords.$flagged = true;
+    else delete email.keywords.$flagged;
+  }
+
+  async updateEmailKeywords(emailId: string, keywords: Record<string, boolean>): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (email) email.keywords = { ...email.keywords, ...keywords };
+  }
+
+  async migrateKeyword(oldKeyword: string, newKeyword: string): Promise<number> {
+    let count = 0;
+    for (const email of this.data.emails) {
+      if (email.keywords[oldKeyword]) {
+        delete email.keywords[oldKeyword];
+        email.keywords[newKeyword] = true;
+        count++;
+      }
+    }
+    return count;
+  }
+
+  async deleteEmail(emailId: string): Promise<void> {
+    this.data.emails = this.data.emails.filter(e => e.id !== emailId);
+    this.recalcMailboxCounts();
+  }
+
+  async moveToTrash(emailId: string, trashMailboxId: string): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (!email) return;
+    email.mailboxIds = { [trashMailboxId]: true };
+    this.recalcMailboxCounts();
+  }
+
+  async batchDeleteEmails(emailIds: string[]): Promise<void> {
+    const idSet = new Set(emailIds);
+    this.data.emails = this.data.emails.filter(e => !idSet.has(e.id));
+    this.recalcMailboxCounts();
+  }
+
+  async batchMoveEmails(emailIds: string[], toMailboxId: string): Promise<void> {
+    for (const id of emailIds) {
+      const email = this.data.emails.find(e => e.id === id);
+      if (email) email.mailboxIds = { [toMailboxId]: true };
+    }
+    this.recalcMailboxCounts();
+  }
+
+  async moveEmail(emailId: string, toMailboxId: string): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (email) email.mailboxIds = { [toMailboxId]: true };
+    this.recalcMailboxCounts();
+  }
+
+  async emptyMailbox(mailboxId: string): Promise<number> {
+    const before = this.data.emails.length;
+    this.data.emails = this.data.emails.filter(e => !e.mailboxIds[mailboxId]);
+    const removed = before - this.data.emails.length;
+    this.recalcMailboxCounts();
+    return removed;
+  }
+
+  async markAsSpam(emailId: string): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    const junkMb = this.data.mailboxes.find(m => m.role === 'junk');
+    if (email && junkMb) email.mailboxIds = { [junkMb.id]: true };
+    this.recalcMailboxCounts();
+  }
+
+  async undoSpam(emailId: string, originalMailboxId: string): Promise<void> {
+    const email = this.data.emails.find(e => e.id === emailId);
+    if (email) email.mailboxIds = { [originalMailboxId]: true };
+    this.recalcMailboxCounts();
+  }
+
+  // ── Threads ───────────────────────────────────────────────────
+
+  async getThread(threadId: string): Promise<Thread | null> {
+    const emails = this.data.emails.filter(e => e.threadId === threadId);
+    if (emails.length === 0) return null;
+    return { id: threadId, emailIds: emails.map(e => e.id) };
+  }
+
+  async getThreadEmails(threadId: string): Promise<Email[]> {
+    return this.data.emails
+      .filter(e => e.threadId === threadId)
+      .sort((a, b) => new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime());
+  }
+
+  // ── Compose / Send ────────────────────────────────────────────
+
+  async createDraft(
+    to: string[],
+    subject: string,
+    body: string,
+    cc?: string[],
+    bcc?: string[],
+    _identityId?: string,
+    _fromEmail?: string,
+    draftId?: string,
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>,
+    _fromName?: string,
+  ): Promise<string> {
+    const draftsMb = this.data.mailboxes.find(m => m.role === 'drafts');
+    const id = draftId || generateDemoId('email');
+    const existing = draftId ? this.data.emails.findIndex(e => e.id === draftId) : -1;
+
+    const email: Email = {
+      id, threadId: generateDemoId('thread'),
+      mailboxIds: { [draftsMb?.id || 'demo-mailbox-drafts']: true },
+      keywords: { $seen: true, $draft: true },
+      size: body.length,
+      receivedAt: new Date().toISOString(),
+      from: [{ name: 'Demo User', email: 'demo@example.com' }],
+      to: to.map(e => ({ email: e })),
+      cc: cc?.map(e => ({ email: e })),
+      bcc: bcc?.map(e => ({ email: e })),
+      subject,
+      sentAt: new Date().toISOString(),
+      preview: body.substring(0, 200),
+      hasAttachment: !!attachments?.length,
+      textBody: [{ partId: '1', blobId: generateDemoId('blob'), size: body.length, type: 'text/plain' }],
+      htmlBody: [],
+      bodyValues: { '1': { value: body } },
+      attachments: attachments?.map(a => ({ ...a, partId: generateDemoId('part') })),
+      messageId: `<${id}@demo.example.com>`,
+    };
+
+    if (existing >= 0) {
+      this.data.emails[existing] = email;
+    } else {
+      this.data.emails.push(email);
+    }
+    this.recalcMailboxCounts();
+    return id;
+  }
+
+  async sendEmail(
+    to: string[],
+    subject: string,
+    body: string,
+    cc?: string[],
+    bcc?: string[],
+    _identityId?: string,
+    _fromEmail?: string,
+    draftId?: string,
+    _fromName?: string,
+    htmlBody?: string,
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>,
+  ): Promise<void> {
+    // Remove draft if updating
+    if (draftId) {
+      this.data.emails = this.data.emails.filter(e => e.id !== draftId);
+    }
+    const sentMb = this.data.mailboxes.find(m => m.role === 'sent');
+    const email: Email = {
+      id: generateDemoId('email'), threadId: generateDemoId('thread'),
+      mailboxIds: { [sentMb?.id || 'demo-mailbox-sent']: true },
+      keywords: { $seen: true },
+      size: body.length + (htmlBody?.length || 0),
+      receivedAt: new Date().toISOString(),
+      from: [{ name: 'Demo User', email: 'demo@example.com' }],
+      to: to.map(e => ({ email: e })),
+      cc: cc?.map(e => ({ email: e })),
+      bcc: bcc?.map(e => ({ email: e })),
+      subject,
+      sentAt: new Date().toISOString(),
+      preview: body.substring(0, 200),
+      hasAttachment: !!attachments?.length,
+      textBody: [{ partId: '1', blobId: generateDemoId('blob'), size: body.length, type: 'text/plain' }],
+      htmlBody: htmlBody ? [{ partId: '2', blobId: generateDemoId('blob'), size: htmlBody.length, type: 'text/html' }] : [],
+      bodyValues: htmlBody ? { '1': { value: body }, '2': { value: htmlBody } } : { '1': { value: body } },
+      attachments: attachments?.map(a => ({ ...a, partId: generateDemoId('part') })),
+      messageId: `<${generateDemoId('msg')}@demo.example.com>`,
+    };
+    this.data.emails.push(email);
+    this.recalcMailboxCounts();
+  }
+
+  async sendImipReply(): Promise<void> { /* no-op in demo */ }
+  async sendImipInvitation(): Promise<void> { /* no-op in demo */ }
+  async sendImipCancellation(): Promise<void> { /* no-op in demo */ }
+
+  // ── Blobs ─────────────────────────────────────────────────────
+
+  async uploadBlob(file: File): Promise<{ blobId: string; size: number; type: string }> {
+    const blobId = generateDemoId('blob');
+    this.blobStore.set(blobId, file);
+    return { blobId, size: file.size, type: file.type };
+  }
+
+  getBlobDownloadUrl(blobId: string): string {
+    return `data:application/octet-stream;demo-blob=${blobId}`;
+  }
+
+  async fetchBlob(blobId: string): Promise<Blob> {
+    return this.blobStore.get(blobId) ?? new Blob(['[Demo placeholder content]'], { type: 'text/plain' });
+  }
+
+  async fetchBlobAsObjectUrl(blobId: string): Promise<string> {
+    const blob = await this.fetchBlob(blobId);
+    return URL.createObjectURL(blob);
+  }
+
+  async fetchBlobArrayBuffer(blobId: string): Promise<ArrayBuffer> {
+    const blob = await this.fetchBlob(blobId);
+    return blob.arrayBuffer();
+  }
+
+  async downloadBlob(blobId: string, name?: string): Promise<void> {
+    const blob = await this.fetchBlob(blobId);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name || 'download';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  // ── Identities ────────────────────────────────────────────────
+
+  async getIdentities(): Promise<Identity[]> { return [...this.data.identities]; }
+
+  async createIdentity(
+    name: string, email: string,
+    replyTo?: EmailAddress[] | null, bcc?: EmailAddress[] | null,
+    htmlSignature?: string, textSignature?: string,
+  ): Promise<Identity> {
+    const identity: Identity = {
+      id: generateDemoId('identity'), name, email,
+      replyTo: replyTo ?? undefined, bcc: bcc ?? undefined,
+      htmlSignature: htmlSignature ?? '', textSignature: textSignature ?? '',
+      mayDelete: true,
+    };
+    this.data.identities.push(identity);
+    return identity;
+  }
+
+  async updateIdentity(identityId: string, updates: { name?: string; replyTo?: EmailAddress[] | null; bcc?: EmailAddress[] | null; htmlSignature?: string; textSignature?: string }): Promise<void> {
+    const identity = this.data.identities.find(i => i.id === identityId);
+    if (identity) Object.assign(identity, updates);
+  }
+
+  async deleteIdentity(identityId: string): Promise<void> {
+    this.data.identities = this.data.identities.filter(i => i.id !== identityId);
+  }
+
+  // ── Vacation ──────────────────────────────────────────────────
+
+  async getVacationResponse(): Promise<VacationResponse> { return { ...this.data.vacationResponse }; }
+
+  async setVacationResponse(updates: Partial<VacationResponse>): Promise<void> {
+    Object.assign(this.data.vacationResponse, updates);
+  }
+
+  // ── Contacts ──────────────────────────────────────────────────
+
+  getContactsAccountId(): string { return 'demo-account'; }
+
+  async getAddressBooks(): Promise<AddressBook[]> { return [...this.data.addressBooks]; }
+  async getAllAddressBooks(): Promise<AddressBook[]> { return [...this.data.addressBooks]; }
+
+  async getContacts(addressBookId?: string): Promise<ContactCard[]> {
+    if (addressBookId) return this.data.contacts.filter(c => c.addressBookIds[addressBookId]);
+    return [...this.data.contacts];
+  }
+
+  async getAllContacts(): Promise<ContactCard[]> { return [...this.data.contacts]; }
+
+  async getContact(contactId: string): Promise<ContactCard | null> {
+    return this.data.contacts.find(c => c.id === contactId) ?? null;
+  }
+
+  async createContact(contact: Partial<ContactCard>): Promise<ContactCard> {
+    const full: ContactCard = {
+      id: generateDemoId('contact'),
+      addressBookIds: contact.addressBookIds ?? { 'demo-addressbook-personal': true },
+      ...contact,
+    } as ContactCard;
+    this.data.contacts.push(full);
+    return full;
+  }
+
+  async updateContact(contactId: string, updates: Partial<ContactCard>): Promise<void> {
+    const contact = this.data.contacts.find(c => c.id === contactId);
+    if (contact) Object.assign(contact, updates);
+  }
+
+  async deleteContact(contactId: string): Promise<void> {
+    this.data.contacts = this.data.contacts.filter(c => c.id !== contactId);
+  }
+
+  async searchContacts(query: string): Promise<ContactCard[]> {
+    const q = query.toLowerCase();
+    return this.data.contacts.filter(c => {
+      const nameStr = c.name?.components?.map(nc => nc.value).join(' ').toLowerCase() ?? '';
+      const emailStr = Object.values(c.emails ?? {}).map(e => e.address).join(' ').toLowerCase();
+      return nameStr.includes(q) || emailStr.includes(q);
+    });
+  }
+
+  // ── Calendars ─────────────────────────────────────────────────
+
+  getCalendarsAccountId(): string { return 'demo-account'; }
+
+  async getCalendars(): Promise<Calendar[]> { return [...this.data.calendars]; }
+  async getAllCalendars(): Promise<Calendar[]> { return [...this.data.calendars]; }
+
+  async createCalendar(calendar: Partial<Calendar>): Promise<Calendar> {
+    const full: Calendar = {
+      id: generateDemoId('calendar'),
+      name: calendar.name ?? 'New Calendar',
+      description: calendar.description ?? null,
+      color: calendar.color ?? '#6366f1',
+      sortOrder: calendar.sortOrder ?? 99,
+      isSubscribed: true, isVisible: true, isDefault: false,
+      includeInAvailability: 'all',
+      defaultAlertsWithTime: null, defaultAlertsWithoutTime: null,
+      timeZone: null, shareWith: null,
+      myRights: { mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true, mayUpdatePrivate: true, mayRSVP: true, mayAdmin: true, mayDelete: true },
+      ...calendar,
+    } as Calendar;
+    this.data.calendars.push(full);
+    return full;
+  }
+
+  async updateCalendar(calendarId: string, updates: Partial<Calendar>): Promise<void> {
+    const cal = this.data.calendars.find(c => c.id === calendarId);
+    if (cal) Object.assign(cal, updates);
+  }
+
+  async deleteCalendar(calendarId: string): Promise<void> {
+    this.data.calendars = this.data.calendars.filter(c => c.id !== calendarId);
+    this.data.calendarEvents = this.data.calendarEvents.filter(e => !e.calendarIds[calendarId]);
+  }
+
+  async getCalendarEvents(calendarIds?: string[]): Promise<CalendarEvent[]> {
+    let events = [...this.data.calendarEvents];
+    if (calendarIds?.length) {
+      events = events.filter(e => calendarIds.some(cid => e.calendarIds[cid]));
+    }
+    return events;
+  }
+
+  async getCalendarEvent(id: string): Promise<CalendarEvent | null> {
+    return this.data.calendarEvents.find(e => e.id === id) ?? null;
+  }
+
+  async createCalendarEvent(event: Partial<CalendarEvent>): Promise<CalendarEvent> {
+    const full: CalendarEvent = {
+      id: generateDemoId('event'),
+      calendarIds: event.calendarIds ?? { 'demo-calendar-personal': true },
+      '@type': 'Event',
+      uid: generateDemoId('uid'),
+      title: event.title ?? 'New Event',
+      description: event.description ?? '',
+      descriptionContentType: 'text/plain',
+      isDraft: false, isOrigin: true,
+      created: new Date().toISOString(),
+      updated: new Date().toISOString(),
+      sequence: 0,
+      start: event.start ?? new Date().toISOString(),
+      duration: event.duration ?? 'PT1H',
+      timeZone: event.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+      utcStart: event.utcStart ?? null,
+      utcEnd: event.utcEnd ?? null,
+      showWithoutTime: event.showWithoutTime ?? false,
+      status: 'confirmed', freeBusyStatus: 'busy', privacy: 'public',
+      color: null, keywords: null, categories: null, locale: null,
+      replyTo: null, organizerCalendarAddress: null, participants: null,
+      mayInviteSelf: false, mayInviteOthers: false, hideAttendees: false,
+      recurrenceId: null, recurrenceIdTimeZone: null, recurrenceRules: null,
+      recurrenceOverrides: null, excludedRecurrenceRules: null,
+      useDefaultAlerts: true, alerts: null, locations: null,
+      virtualLocations: null, links: null, relatedTo: null,
+      ...event,
+    } as CalendarEvent;
+    this.data.calendarEvents.push(full);
+    return full;
+  }
+
+  async updateCalendarEvent(eventId: string, updates: Partial<CalendarEvent>): Promise<void> {
+    const event = this.data.calendarEvents.find(e => e.id === eventId);
+    if (!event) throw new Error('Event not found');
+    Object.assign(event, updates, { updated: new Date().toISOString() });
+  }
+
+  async deleteCalendarEvent(eventId: string): Promise<void> {
+    this.data.calendarEvents = this.data.calendarEvents.filter(e => e.id !== eventId);
+  }
+
+  async batchDeleteCalendarEvents(eventIds: string[]): Promise<{ destroyed: string[]; notDestroyed: string[] }> {
+    const idSet = new Set(eventIds);
+    this.data.calendarEvents = this.data.calendarEvents.filter(e => !idSet.has(e.id));
+    return { destroyed: eventIds, notDestroyed: [] };
+  }
+
+  async queryCalendarEvents(filter: CalendarEventFilter): Promise<CalendarEvent[]> {
+    return this.data.calendarEvents.filter(e => {
+      if (filter.after && e.start < filter.after) return false;
+      if (filter.before && e.start > filter.before) return false;
+      return true;
+    });
+  }
+
+  async queryAllCalendarEvents(filter: CalendarEventFilter): Promise<CalendarEvent[]> {
+    return this.queryCalendarEvents(filter);
+  }
+
+  async parseCalendarEvents(): Promise<Partial<CalendarEvent>[]> {
+    return []; // no-op in demo
+  }
+
+  // ── Calendar Tasks ────────────────────────────────────────────
+
+  async getCalendarTasks(calendarIds?: string[]): Promise<CalendarTask[]> {
+    let tasks = this.data.calendarTasks || [];
+    if (calendarIds) {
+      tasks = tasks.filter(t => Object.keys(t.calendarIds).some(id => calendarIds.includes(id)));
+    }
+    return [...tasks];
+  }
+
+  async createCalendarTask(task: Partial<CalendarTask>): Promise<CalendarTask> {
+    const full: CalendarTask = {
+      id: generateDemoId('task'),
+      uid: generateDemoId('task-uid'),
+      '@type': 'Task',
+      calendarIds: task.calendarIds || { [this.data.calendars[0]?.id || 'cal-1']: true },
+      title: task.title || '',
+      description: task.description || '',
+      due: task.due || null,
+      start: task.start || null,
+      duration: task.duration || null,
+      timeZone: task.timeZone || null,
+      showWithoutTime: task.showWithoutTime ?? true,
+      progress: task.progress || 'needs-action',
+      progressUpdated: null,
+      priority: task.priority || 0,
+      privacy: task.privacy || 'public',
+      keywords: task.keywords || null,
+      categories: task.categories || null,
+      color: task.color || null,
+      created: new Date().toISOString(),
+      updated: new Date().toISOString(),
+      recurrenceRules: task.recurrenceRules || null,
+      alerts: task.alerts || null,
+      relatedTo: task.relatedTo || null,
+    };
+    this.data.calendarTasks.push(full);
+    return full;
+  }
+
+  async updateCalendarTask(taskId: string, updates: Partial<CalendarTask>): Promise<void> {
+    const task = this.data.calendarTasks.find(t => t.id === taskId);
+    if (task) Object.assign(task, updates, { updated: new Date().toISOString() });
+  }
+
+  async deleteCalendarTask(taskId: string): Promise<void> {
+    this.data.calendarTasks = this.data.calendarTasks.filter(t => t.id !== taskId);
+  }
+
+  // ── Sieve / Filters ──────────────────────────────────────────
+
+  getSieveAccountId(): string { return 'demo-account'; }
+
+  getSieveCapabilities(): SieveCapabilities | null {
+    return { ...this.data.sieveCapabilities };
+  }
+
+  async getSieveScripts(): Promise<SieveScript[]> { return [...this.data.sieveScripts]; }
+
+  async getSieveScriptContent(blobId: string): Promise<string> {
+    return this.data.sieveContent[blobId] ?? '';
+  }
+
+  async createSieveScript(name: string, content: string, activate?: boolean): Promise<SieveScript> {
+    const blobId = generateDemoId('sieve-blob');
+    const script: SieveScript = { id: generateDemoId('sieve'), name, blobId, isActive: activate ?? false };
+    this.data.sieveScripts.push(script);
+    this.data.sieveContent[blobId] = content;
+    if (activate) {
+      for (const s of this.data.sieveScripts) {
+        if (s.id !== script.id) s.isActive = false;
+      }
+    }
+    return script;
+  }
+
+  async updateSieveScript(scriptId: string, content: string, activate?: boolean): Promise<void> {
+    const script = this.data.sieveScripts.find(s => s.id === scriptId);
+    if (!script) return;
+    const blobId = generateDemoId('sieve-blob');
+    this.data.sieveContent[blobId] = content;
+    script.blobId = blobId;
+    if (activate !== undefined) {
+      script.isActive = activate;
+      if (activate) {
+        for (const s of this.data.sieveScripts) {
+          if (s.id !== scriptId) s.isActive = false;
+        }
+      }
+    }
+  }
+
+  async deleteSieveScript(scriptId: string): Promise<void> {
+    this.data.sieveScripts = this.data.sieveScripts.filter(s => s.id !== scriptId);
+  }
+
+  async validateSieveScript(): Promise<{ isValid: boolean; errors?: string[] }> {
+    return { isValid: true };
+  }
+
+  // ── Files (FileNode) ─────────────────────────────────────────
+
+  getFilesAccountId(): string { return 'demo-account'; }
+
+  async probeFileNodeSupport(): Promise<boolean> { return true; }
+
+  async listFileNodes(parentId: string | null): Promise<FileNode[]> {
+    return this.data.fileNodes.filter(n => n.parentId === parentId);
+  }
+
+  async getFileNodes(ids: string[] | null): Promise<FileNode[]> {
+    if (ids === null) return [...this.data.fileNodes];
+    return this.data.fileNodes.filter(n => ids.includes(n.id));
+  }
+
+  async createFileDirectory(name: string, parentId: string | null): Promise<FileNode> {
+    const node: FileNode = {
+      id: generateDemoId('file'),
+      parentId, name, type: 'd', blobId: null, size: 0,
+      created: new Date().toISOString(), updated: new Date().toISOString(),
+    };
+    this.data.fileNodes.push(node);
+    return node;
+  }
+
+  async createFileNode(name: string, blobId: string, type: string, size: number, parentId: string | null): Promise<FileNode> {
+    const node: FileNode = {
+      id: generateDemoId('file'),
+      parentId, name, type, blobId, size,
+      created: new Date().toISOString(), updated: new Date().toISOString(),
+    };
+    this.data.fileNodes.push(node);
+    return node;
+  }
+
+  async updateFileNode(id: string, updates: Partial<Pick<FileNode, 'name' | 'parentId'>>): Promise<void> {
+    const node = this.data.fileNodes.find(n => n.id === id);
+    if (node) Object.assign(node, updates, { updated: new Date().toISOString() });
+  }
+
+  async destroyFileNodes(ids: string[]): Promise<{ destroyed: string[]; notDestroyed: string[] }> {
+    const idSet = new Set(ids);
+    this.data.fileNodes = this.data.fileNodes.filter(n => !idSet.has(n.id));
+    return { destroyed: ids, notDestroyed: [] };
+  }
+
+  async copyFileNode(id: string, newName: string, parentId: string | null): Promise<FileNode> {
+    const original = this.data.fileNodes.find(n => n.id === id);
+    if (!original) throw new Error('File node not found');
+    return this.createFileNode(newName, original.blobId ?? '', original.type, original.size, parentId);
+  }
+
+  // ── S/MIME raw-email helpers ──────────────────────────────────
+
+  async importRawEmail(): Promise<string> { return generateDemoId('email'); }
+  async submitEmail(): Promise<void> { /* no-op */ }
+  async sendRawEmail(): Promise<void> { /* no-op */ }
+
+  // ── Internal helpers ──────────────────────────────────────────
+
+  private recalcMailboxCounts(): void {
+    for (const mb of this.data.mailboxes) {
+      const inMb = this.data.emails.filter(e => e.mailboxIds[mb.id]);
+      mb.totalEmails = inMb.length;
+      mb.unreadEmails = inMb.filter(e => !e.keywords.$seen).length;
+      mb.totalThreads = new Set(inMb.map(e => e.threadId)).size;
+      mb.unreadThreads = new Set(inMb.filter(e => !e.keywords.$seen).map(e => e.threadId)).size;
+    }
+  }
+
+  private startIncomingEmailTimer(): void {
+    this.stopIncomingEmailTimer();
+
+    const scheduleNext = () => {
+      const delay = 60_000 + Math.random() * 60_000; // 60-120 seconds
+      this.incomingTimer = setTimeout(() => {
+        this.simulateIncomingEmail();
+        scheduleNext();
+      }, delay);
+    };
+    scheduleNext();
+  }
+
+  private stopIncomingEmailTimer(): void {
+    if (this.incomingTimer) {
+      clearTimeout(this.incomingTimer);
+      this.incomingTimer = null;
+    }
+  }
+
+  private simulateIncomingEmail(): void {
+    const senders = [
+      { name: 'Alice Johnson', email: 'alice.johnson@example.com' },
+      { name: 'Bob Chen', email: 'bob.chen@example.com' },
+      { name: 'Sarah Kim', email: 'sarah.kim@example.com' },
+      { name: 'Carlos Rivera', email: 'carlos.rivera@example.com' },
+    ];
+    const subjects = [
+      'Quick question about the project',
+      'Meeting rescheduled to tomorrow',
+      'FYI: Updated documentation',
+      'Can you review this PR?',
+      'Lunch today?',
+      'Important: deadline reminder',
+    ];
+
+    const sender = senders[Math.floor(Math.random() * senders.length)];
+    const subject = subjects[Math.floor(Math.random() * subjects.length)];
+    const id = generateDemoId('email');
+
+    const email: Email = {
+      id, threadId: generateDemoId('thread'),
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: {},
+      size: 1800,
+      receivedAt: new Date().toISOString(),
+      from: [sender],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject, sentAt: new Date().toISOString(),
+      preview: `Hi, ${subject.toLowerCase()}. Let me know what you think.`,
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: generateDemoId('blob'), size: 120, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: `Hi,\n\n${subject}. Let me know what you think.\n\nBest,\n${sender.name}` },
+      },
+      messageId: `<${id}@demo.example.com>`,
+    };
+
+    this.data.emails.unshift(email);
+    this.recalcMailboxCounts();
+
+    // Notify state change to trigger UI refresh
+    this.stateChangeCallback?.({
+      '@type': 'StateChange',
+      changed: { 'demo-account': { Email: generateDemoId('state'), Mailbox: generateDemoId('state') } },
+    });
+  }
+}

lib/demo/demo-data.ts

@@ -0,0 +1,48 @@
+import { cloneFixtures } from './demo-utils';
+import { createDemoMailboxes } from './fixtures/mailboxes';
+import { createDemoEmails } from './fixtures/emails';
+import { createDemoContacts, createDemoAddressBooks } from './fixtures/contacts';
+import { createDemoCalendars, createDemoCalendarEvents } from './fixtures/calendars';
+import { createDemoCalendarTasks } from './fixtures/tasks';
+import { createDemoIdentities } from './fixtures/identities';
+import { createDemoSieveScripts, createDemoSieveCapabilities, createDemoSieveContent } from './fixtures/filters';
+import { createDemoFileNodes } from './fixtures/files';
+import { createDemoVacationResponse } from './fixtures/vacation';
+
+import type { Email, Mailbox, ContactCard, AddressBook, Calendar, CalendarEvent, CalendarTask, Identity, VacationResponse, FileNode } from '@/lib/jmap/types';
+import type { SieveScript, SieveCapabilities } from '@/lib/jmap/sieve-types';
+
+export interface DemoData {
+  mailboxes: Mailbox[];
+  emails: Email[];
+  contacts: ContactCard[];
+  addressBooks: AddressBook[];
+  calendars: Calendar[];
+  calendarEvents: CalendarEvent[];
+  calendarTasks: CalendarTask[];
+  identities: Identity[];
+  sieveScripts: SieveScript[];
+  sieveCapabilities: SieveCapabilities;
+  sieveContent: Record<string, string>;
+  fileNodes: FileNode[];
+  vacationResponse: VacationResponse;
+}
+
+/** Return a fresh deep-cloned copy of all demo data. */
+export function getDemoData(): DemoData {
+  return cloneFixtures({
+    mailboxes: createDemoMailboxes(),
+    emails: createDemoEmails(),
+    contacts: createDemoContacts(),
+    addressBooks: createDemoAddressBooks(),
+    calendars: createDemoCalendars(),
+    calendarEvents: createDemoCalendarEvents(),
+    calendarTasks: createDemoCalendarTasks(),
+    identities: createDemoIdentities(),
+    sieveScripts: createDemoSieveScripts(),
+    sieveCapabilities: createDemoSieveCapabilities(),
+    sieveContent: createDemoSieveContent(),
+    fileNodes: createDemoFileNodes(),
+    vacationResponse: createDemoVacationResponse(),
+  });
+}

lib/demo/demo-utils.ts

@@ -0,0 +1,35 @@
+let demoIdCounter = 0;
+
+/** Generate a unique demo ID with the given prefix. */
+export function generateDemoId(prefix: string = 'demo'): string {
+  return `${prefix}-${Date.now()}-${++demoIdCounter}`;
+}
+
+/**
+ * Generate an ISO date string relative to "now".
+ * @param daysOffset — whole days from today
+ * @param hoursOffset — additional hours offset (default 0)
+ * @param minutesOffset — additional minutes offset (default 0)
+ */
+export function demoDate(daysOffset: number, hoursOffset: number = 0, minutesOffset: number = 0): string {
+  const d = new Date();
+  d.setDate(d.getDate() + daysOffset);
+  d.setHours(d.getHours() + hoursOffset, d.getMinutes() + minutesOffset, 0, 0);
+  return d.toISOString();
+}
+
+/**
+ * Generate a local date-time string (YYYY-MM-DDTHH:mm:ss) for JSCalendar "start" fields.
+ */
+export function demoISODate(daysOffset: number, hours: number = 0, minutes: number = 0): string {
+  const d = new Date();
+  d.setDate(d.getDate() + daysOffset);
+  d.setHours(hours, minutes, 0, 0);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:00`;
+}
+
+/** Deep clone fixture data so in-memory mutations don't corrupt originals. */
+export function cloneFixtures<T>(data: T): T {
+  return JSON.parse(JSON.stringify(data));
+}

lib/demo/fixtures/calendars.ts

@@ -0,0 +1,274 @@
+import type { Calendar, CalendarEvent } from '@/lib/jmap/types';
+import { demoDate, demoISODate } from '../demo-utils';
+
+export function createDemoCalendars(): Calendar[] {
+  return [
+    {
+      id: 'demo-calendar-personal',
+      name: 'Personal',
+      description: null,
+      color: '#3b82f6',
+      sortOrder: 1,
+      isSubscribed: true,
+      isVisible: true,
+      isDefault: true,
+      includeInAvailability: 'all',
+      defaultAlertsWithTime: null,
+      defaultAlertsWithoutTime: null,
+      timeZone: null,
+      shareWith: null,
+      myRights: { mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true, mayUpdatePrivate: true, mayRSVP: true, mayAdmin: true, mayDelete: false },
+    },
+    {
+      id: 'demo-calendar-work',
+      name: 'Work',
+      description: null,
+      color: '#22c55e',
+      sortOrder: 2,
+      isSubscribed: true,
+      isVisible: true,
+      isDefault: false,
+      includeInAvailability: 'all',
+      defaultAlertsWithTime: null,
+      defaultAlertsWithoutTime: null,
+      timeZone: null,
+      shareWith: null,
+      myRights: { mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true, mayUpdatePrivate: true, mayRSVP: true, mayAdmin: true, mayDelete: true },
+    },
+    {
+      id: 'demo-calendar-birthdays',
+      name: 'Birthdays',
+      description: null,
+      color: '#eab308',
+      sortOrder: 3,
+      isSubscribed: true,
+      isVisible: true,
+      isDefault: false,
+      includeInAvailability: 'none',
+      defaultAlertsWithTime: null,
+      defaultAlertsWithoutTime: null,
+      timeZone: null,
+      shareWith: null,
+      myRights: { mayReadFreeBusy: true, mayReadItems: true, mayWriteAll: true, mayWriteOwn: true, mayUpdatePrivate: true, mayRSVP: true, mayAdmin: true, mayDelete: true },
+    },
+  ];
+}
+
+export function createDemoCalendarEvents(): CalendarEvent[] {
+  const baseEvent = {
+    '@type': 'Event' as const,
+    descriptionContentType: 'text/plain',
+    isDraft: false,
+    isOrigin: true,
+    sequence: 0,
+    status: 'confirmed' as const,
+    freeBusyStatus: 'busy' as const,
+    privacy: 'public' as const,
+    color: null,
+    keywords: null,
+    categories: null,
+    locale: null,
+    replyTo: null,
+    organizerCalendarAddress: null,
+    participants: null,
+    mayInviteSelf: false,
+    mayInviteOthers: false,
+    hideAttendees: false,
+    recurrenceId: null,
+    recurrenceIdTimeZone: null,
+    recurrenceRules: null,
+    recurrenceOverrides: null,
+    excludedRecurrenceRules: null,
+    useDefaultAlerts: true,
+    alerts: null,
+    locations: null,
+    virtualLocations: null,
+    links: null,
+    relatedTo: null,
+  };
+
+  return [
+    // ── Personal calendar ──────────────────────────────────────
+    {
+      ...baseEvent,
+      id: 'demo-event-1',
+      calendarIds: { 'demo-calendar-personal': true },
+      uid: 'demo-event-1@example.com',
+      title: 'Dentist Appointment',
+      description: 'Regular checkup at Dr. Smith\'s office',
+      created: demoDate(-7),
+      updated: demoDate(-7),
+      start: demoISODate(2, 10, 0),
+      utcStart: demoDate(2, 10),
+      utcEnd: demoDate(2, 11),
+      duration: 'PT1H',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      showWithoutTime: false,
+      locations: { loc1: { '@type': 'Location', name: 'Dr. Smith Dental Clinic', description: '123 Medical Plaza', locationTypes: null, coordinates: null, timeZone: null, links: null, relativeTo: null } },
+    },
+    {
+      ...baseEvent,
+      id: 'demo-event-2',
+      calendarIds: { 'demo-calendar-personal': true },
+      uid: 'demo-event-2@example.com',
+      title: 'Birthday Party',
+      description: 'Emma\'s birthday celebration',
+      created: demoDate(-10),
+      updated: demoDate(-10),
+      start: demoISODate(5),
+      utcStart: demoDate(5),
+      utcEnd: demoDate(6),
+      duration: 'P1D',
+      timeZone: null,
+      showWithoutTime: true,
+      freeBusyStatus: 'free' as const,
+    },
+    {
+      ...baseEvent,
+      id: 'demo-event-3',
+      calendarIds: { 'demo-calendar-personal': true },
+      uid: 'demo-event-3@example.com',
+      title: 'Weekend Trip',
+      description: 'Road trip to the mountains',
+      created: demoDate(-5),
+      updated: demoDate(-5),
+      start: demoISODate(8),
+      utcStart: demoDate(8),
+      utcEnd: demoDate(10),
+      duration: 'P2D',
+      timeZone: null,
+      showWithoutTime: true,
+      freeBusyStatus: 'busy' as const,
+    },
+
+    // ── Work calendar ──────────────────────────────────────────
+    {
+      ...baseEvent,
+      id: 'demo-event-4',
+      calendarIds: { 'demo-calendar-work': true },
+      uid: 'demo-event-4@example.com',
+      title: 'Weekly Standup',
+      description: 'Team sync-up meeting',
+      created: demoDate(-30),
+      updated: demoDate(-1),
+      start: demoISODate(1, 9, 30),
+      utcStart: demoDate(1, 9, 30),
+      utcEnd: demoDate(1, 10, 0),
+      duration: 'PT30M',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      showWithoutTime: false,
+      recurrenceRules: [{
+        '@type': 'RecurrenceRule',
+        frequency: 'weekly',
+        interval: 1,
+        rscale: 'gregorian',
+        skip: 'omit',
+        firstDayOfWeek: 'mo',
+        byDay: [{ day: 'mo' }],
+        byMonthDay: null,
+        byMonth: null,
+        byYearDay: null,
+        byWeekNo: null,
+        byHour: null,
+        byMinute: null,
+        bySecond: null,
+        bySetPosition: null,
+        count: null,
+        until: null,
+      }],
+      virtualLocations: { vl1: { '@type': 'VirtualLocation', name: 'Zoom', uri: 'https://zoom.example/123456', description: 'Weekly standup room', features: null } },
+    },
+    {
+      ...baseEvent,
+      id: 'demo-event-5',
+      calendarIds: { 'demo-calendar-work': true },
+      uid: 'demo-event-5@example.com',
+      title: 'Quarterly Review',
+      description: 'Q4 performance review and planning session',
+      created: demoDate(-14),
+      updated: demoDate(-3),
+      start: demoISODate(4, 14, 0),
+      utcStart: demoDate(4, 14),
+      utcEnd: demoDate(4, 16),
+      duration: 'PT2H',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      showWithoutTime: false,
+      participants: {
+        p1: {
+          '@type': 'Participant', name: 'Demo User', email: 'demo@example.com', calendarAddress: null, description: null, sendTo: null,
+          kind: 'individual', roles: { attendee: true }, participationStatus: 'accepted', participationComment: null,
+          expectReply: false, scheduleAgent: 'server', scheduleForceSend: false, scheduleId: null, scheduleSequence: 0,
+          scheduleStatus: null, scheduleUpdated: null, invitedBy: null, delegatedTo: null, delegatedFrom: null, memberOf: null,
+          locationId: null, language: null, links: null,
+        },
+        p2: {
+          '@type': 'Participant', name: 'Alice Johnson', email: 'alice.johnson@example.com', calendarAddress: null, description: null, sendTo: null,
+          kind: 'individual', roles: { owner: true }, participationStatus: 'accepted', participationComment: null,
+          expectReply: false,  scheduleAgent: 'server', scheduleForceSend: false, scheduleId: null, scheduleSequence: 0,
+          scheduleStatus: null, scheduleUpdated: null, invitedBy: null, delegatedTo: null, delegatedFrom: null, memberOf: null,
+          locationId: null, language: null, links: null,
+        },
+        p3: {
+          '@type': 'Participant', name: 'Bob Chen', email: 'bob.chen@example.com', calendarAddress: null, description: null, sendTo: null,
+          kind: 'individual', roles: { attendee: true }, participationStatus: 'tentative', participationComment: null,
+          expectReply: true, scheduleAgent: 'server', scheduleForceSend: false, scheduleId: null, scheduleSequence: 0,
+          scheduleStatus: null, scheduleUpdated: null, invitedBy: null, delegatedTo: null, delegatedFrom: null, memberOf: null,
+          locationId: null, language: null, links: null,
+        },
+      },
+    },
+    {
+      ...baseEvent,
+      id: 'demo-event-6',
+      calendarIds: { 'demo-calendar-work': true },
+      uid: 'demo-event-6@example.com',
+      title: 'Lunch Meeting with Sarah',
+      description: 'Design review over lunch',
+      created: demoDate(-3),
+      updated: demoDate(-3),
+      start: demoISODate(3, 12, 0),
+      utcStart: demoDate(3, 12),
+      utcEnd: demoDate(3, 13),
+      duration: 'PT1H',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      showWithoutTime: false,
+      locations: { loc1: { '@type': 'Location', name: 'The Garden Bistro', description: '123 Oak Street', locationTypes: null, coordinates: null, timeZone: null, links: null, relativeTo: null } },
+    },
+
+    // ── Birthdays calendar ─────────────────────────────────────
+    {
+      ...baseEvent,
+      id: 'demo-event-7',
+      calendarIds: { 'demo-calendar-birthdays': true },
+      uid: 'demo-event-7@example.com',
+      title: 'Alice Johnson\'s Birthday',
+      description: '',
+      created: demoDate(-30),
+      updated: demoDate(-30),
+      start: demoISODate(12),
+      utcStart: demoDate(12),
+      utcEnd: demoDate(13),
+      duration: 'P1D',
+      timeZone: null,
+      showWithoutTime: true,
+      freeBusyStatus: 'free' as const,
+    },
+    {
+      ...baseEvent,
+      id: 'demo-event-8',
+      calendarIds: { 'demo-calendar-birthdays': true },
+      uid: 'demo-event-8@example.com',
+      title: 'Carlos Rivera\'s Birthday',
+      description: '',
+      created: demoDate(-30),
+      updated: demoDate(-30),
+      start: demoISODate(-3),
+      utcStart: demoDate(-3),
+      utcEnd: demoDate(-2),
+      duration: 'P1D',
+      timeZone: null,
+      showWithoutTime: true,
+      freeBusyStatus: 'free' as const,
+    },
+  ];
+}

lib/demo/fixtures/contacts.ts

@@ -0,0 +1,194 @@
+import type { ContactCard, AddressBook } from '@/lib/jmap/types';
+
+export function createDemoAddressBooks(): AddressBook[] {
+  return [
+    {
+      id: 'demo-addressbook-personal',
+      name: 'Personal',
+      isDefault: true,
+      isSubscribed: true,
+      sortOrder: 1,
+      myRights: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: false },
+    },
+    {
+      id: 'demo-addressbook-work',
+      name: 'Work',
+      isDefault: false,
+      isSubscribed: true,
+      sortOrder: 2,
+      myRights: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true },
+    },
+  ];
+}
+
+export function createDemoContacts(): ContactCard[] {
+  return [
+    // ── Personal address book ──────────────────────────────────
+    {
+      id: 'demo-contact-1',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Alice' }, { kind: 'surname', value: 'Johnson' }] },
+      emails: { e1: { address: 'alice.johnson@example.com', contexts: { work: true }, pref: 1 } },
+      phones: { p1: { number: '+1-555-0101', features: { voice: true }, contexts: { work: true } } },
+      organizations: { o1: { name: 'Acme Corp', units: [{ name: 'Engineering' }] } },
+      titles: { t1: { name: 'Senior Engineer', kind: 'title' } },
+      anniversaries: { a1: { kind: 'birth', date: { year: 1990, month: 3, day: 15 } } },
+    },
+    {
+      id: 'demo-contact-2',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Bob' }, { kind: 'surname', value: 'Chen' }] },
+      emails: {
+        e1: { address: 'bob.chen@example.com', contexts: { work: true }, pref: 1 },
+        e2: { address: 'bob.personal@email.example', contexts: { private: true } },
+      },
+      phones: {
+        p1: { number: '+1-555-0102', features: { voice: true }, contexts: { work: true } },
+        p2: { number: '+1-555-0103', features: { cell: true }, contexts: { private: true } },
+      },
+      organizations: { o1: { name: 'Acme Corp', units: [{ name: 'Backend Team' }] } },
+      titles: { t1: { name: 'Staff Engineer', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-3',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Sarah' }, { kind: 'surname', value: 'Kim' }] },
+      emails: { e1: { address: 'sarah.kim@example.com', pref: 1 } },
+      phones: { p1: { number: '+1-555-0104', features: { voice: true } } },
+      organizations: { o1: { name: 'DesignCo' } },
+      titles: { t1: { name: 'UX Designer', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-4',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Carlos' }, { kind: 'surname', value: 'Rivera' }] },
+      emails: { e1: { address: 'carlos.rivera@example.com', pref: 1 } },
+      phones: { p1: { number: '+1-555-0105', features: { cell: true } } },
+      notes: { n1: { note: 'Met at the DevConf 2024 conference' } },
+    },
+    {
+      id: 'demo-contact-5',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Emma' }, { kind: 'surname', value: 'Wilson' }] },
+      emails: { e1: { address: 'emma.wilson@example.com', pref: 1 } },
+      addresses: {
+        a1: {
+          components: [
+            { kind: 'number', value: '456' },
+            { kind: 'name', value: 'Elm Street' },
+            { kind: 'locality', value: 'Springfield' },
+            { kind: 'region', value: 'IL' },
+            { kind: 'postcode', value: '62701' },
+          ],
+          contexts: { private: true },
+        },
+      },
+      anniversaries: { a1: { kind: 'birth', date: { month: 7, day: 22 } } },
+    },
+    {
+      id: 'demo-contact-6',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'David' }, { kind: 'surname', value: 'Park' }] },
+      emails: { e1: { address: 'david.park@example.com', pref: 1 } },
+      phones: { p1: { number: '+82-10-1234-5678', features: { cell: true } } },
+    },
+    {
+      id: 'demo-contact-7',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'org',
+      name: { components: [{ kind: 'surname', value: 'Local Coffee Shop' }] },
+      emails: { e1: { address: 'hello@localcoffee.example', pref: 1 } },
+      phones: { p1: { number: '+1-555-0200', features: { voice: true } } },
+      addresses: {
+        a1: {
+          components: [
+            { kind: 'number', value: '789' },
+            { kind: 'name', value: 'Main Street' },
+            { kind: 'locality', value: 'Anytown' },
+            { kind: 'region', value: 'CA' },
+            { kind: 'postcode', value: '90210' },
+          ],
+        },
+      },
+    },
+    {
+      id: 'demo-contact-8',
+      addressBookIds: { 'demo-addressbook-personal': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Lisa' }, { kind: 'surname', value: 'Tanaka' }] },
+      emails: { e1: { address: 'lisa.tanaka@example.com', pref: 1 } },
+    },
+
+    // ── Work address book ──────────────────────────────────────
+    {
+      id: 'demo-contact-9',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Michael' }, { kind: 'surname', value: 'Torres' }] },
+      emails: { e1: { address: 'michael.torres@company.example', contexts: { work: true }, pref: 1 } },
+      phones: { p1: { number: '+1-555-0301', features: { voice: true }, contexts: { work: true } } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'Product' }] } },
+      titles: { t1: { name: 'Product Manager', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-10',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Rachel' }, { kind: 'surname', value: 'Green' }] },
+      emails: { e1: { address: 'rachel.green@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'Marketing' }] } },
+      titles: { t1: { name: 'Marketing Lead', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-11',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'James' }, { kind: 'surname', value: 'Miller' }] },
+      emails: { e1: { address: 'james.miller@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'Engineering' }] } },
+      titles: { t1: { name: 'CTO', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-12',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Priya' }, { kind: 'surname', value: 'Sharma' }] },
+      emails: { e1: { address: 'priya.sharma@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'QA' }] } },
+      titles: { t1: { name: 'QA Engineer', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-13',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Ahmed' }, { kind: 'surname', value: 'Hassan' }] },
+      emails: { e1: { address: 'ahmed.hassan@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'DevOps' }] } },
+      titles: { t1: { name: 'DevOps Engineer', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-14',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Maria' }, { kind: 'surname', value: 'Lopez' }] },
+      emails: { e1: { address: 'maria.lopez@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'HR' }] } },
+      titles: { t1: { name: 'HR Business Partner', kind: 'title' } },
+    },
+    {
+      id: 'demo-contact-15',
+      addressBookIds: { 'demo-addressbook-work': true },
+      kind: 'individual',
+      name: { components: [{ kind: 'given', value: 'Wei' }, { kind: 'surname', value: 'Zhang' }] },
+      emails: { e1: { address: 'wei.zhang@company.example', contexts: { work: true }, pref: 1 } },
+      organizations: { o1: { name: 'Company Inc', units: [{ name: 'Data Science' }] } },
+      titles: { t1: { name: 'Data Scientist', kind: 'title' } },
+    },
+  ];
+}

lib/demo/fixtures/emails.ts

@@ -0,0 +1,364 @@
+import type { Email } from '@/lib/jmap/types';
+import { demoDate } from '../demo-utils';
+
+export function createDemoEmails(): Email[] {
+  const now = new Date();
+
+  return [
+    // ── Inbox ───────────────────────────────────────────────────
+    {
+      id: 'demo-email-1',
+      threadId: 'demo-thread-1',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: {},
+      size: 4200,
+      receivedAt: demoDate(0, -2),
+      from: [{ name: 'Bulwark Team', email: 'welcome@bulwark.email' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Welcome to Bulwark Mail!',
+      sentAt: demoDate(0, -2),
+      preview: 'Thanks for trying out Bulwark Mail. This is a demo environment where you can explore all features...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-1', size: 350, type: 'text/plain' }],
+      htmlBody: [{ partId: '2', blobId: 'blob-2', size: 800, type: 'text/html' }],
+      bodyValues: {
+        '1': { value: 'Thanks for trying out Bulwark Mail!\n\nThis is a demo environment where you can explore all features without connecting to a real server. All data stays on your device.\n\nFeel free to:\n- Read, compose, and organize emails\n- Manage contacts and calendars\n- Configure filters and settings\n- Try keyboard shortcuts (press ? to see them)\n\nEnjoy exploring!' },
+        '2': { value: '<div><h2>Welcome to Bulwark Mail!</h2><p>Thanks for trying out Bulwark Mail!</p><p>This is a demo environment where you can explore all features without connecting to a real server. <strong>All data stays on your device.</strong></p><p>Feel free to:</p><ul><li>Read, compose, and organize emails</li><li>Manage contacts and calendars</li><li>Configure filters and settings</li><li>Try keyboard shortcuts (press <kbd>?</kbd> to see them)</li></ul><p>Enjoy exploring!</p></div>' },
+      },
+      messageId: '<welcome@demo.bulwark.email>',
+    },
+    {
+      id: 'demo-email-2',
+      threadId: 'demo-thread-2',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: { $seen: true },
+      size: 18500,
+      receivedAt: demoDate(-1, -5),
+      from: [{ name: 'TechDigest Weekly', email: 'newsletter@techdigest.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'This Week in Tech: AI Developments & Open Source Updates',
+      sentAt: demoDate(-1, -5),
+      preview: 'Your weekly roundup of the most important technology news and open source developments...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-3', size: 2400, type: 'text/plain' }],
+      htmlBody: [{ partId: '2', blobId: 'blob-4', size: 5200, type: 'text/html' }],
+      bodyValues: {
+        '1': { value: 'This Week in Tech\n\n1. AI-Powered Code Review Tools\nNew tools are making code reviews faster and more thorough...\n\n2. Open Source Licensing Update\nThe OSI has published new guidelines for AI-generated code...\n\n3. WebAssembly 2.0 Draft\nThe W3C has released the first draft of WebAssembly 2.0...\n\nRead more at techdigest.example' },
+        '2': { value: '<div style="max-width:600px;margin:0 auto;"><h1>This Week in Tech</h1><h3>1. AI-Powered Code Review Tools</h3><p>New tools are making code reviews faster and more thorough, with several open-source options gaining traction.</p><h3>2. Open Source Licensing Update</h3><p>The OSI has published new guidelines for AI-generated code contributions to open source projects.</p><h3>3. WebAssembly 2.0 Draft</h3><p>The W3C has released the first draft of WebAssembly 2.0, promising improved memory management.</p></div>' },
+      },
+      messageId: '<weekly-42@techdigest.example>',
+    },
+    // Thread: Project discussion (3 emails in same thread)
+    {
+      id: 'demo-email-3a',
+      threadId: 'demo-thread-3',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: { $seen: true },
+      size: 3100,
+      receivedAt: demoDate(-3, -10),
+      from: [{ name: 'Alice Johnson', email: 'alice.johnson@example.com' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }, { name: 'Bob Chen', email: 'bob.chen@example.com' }],
+      subject: 'Q4 Project Timeline',
+      sentAt: demoDate(-3, -10),
+      preview: 'Hi team, I wanted to share the updated timeline for our Q4 deliverables...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-5', size: 450, type: 'text/plain' }],
+      htmlBody: [{ partId: '2', blobId: 'blob-6', size: 650, type: 'text/html' }],
+      bodyValues: {
+        '1': { value: 'Hi team,\n\nI wanted to share the updated timeline for our Q4 deliverables:\n\n- Phase 1: Design review — Oct 15\n- Phase 2: Development — Nov 1-30\n- Phase 3: Testing — Dec 1-15\n- Phase 4: Launch — Dec 20\n\nPlease review and let me know if you see any conflicts.\n\nBest,\nAlice' },
+        '2': { value: '<p>Hi team,</p><p>I wanted to share the updated timeline for our Q4 deliverables:</p><ul><li>Phase 1: Design review — Oct 15</li><li>Phase 2: Development — Nov 1-30</li><li>Phase 3: Testing — Dec 1-15</li><li>Phase 4: Launch — Dec 20</li></ul><p>Please review and let me know if you see any conflicts.</p><p>Best,<br>Alice</p>' },
+      },
+      messageId: '<q4-timeline-1@example.com>',
+    },
+    {
+      id: 'demo-email-3b',
+      threadId: 'demo-thread-3',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: { $seen: true },
+      size: 3500,
+      receivedAt: demoDate(-2, -8),
+      from: [{ name: 'Bob Chen', email: 'bob.chen@example.com' }],
+      to: [{ name: 'Alice Johnson', email: 'alice.johnson@example.com' }, { name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Re: Q4 Project Timeline',
+      sentAt: demoDate(-2, -8),
+      preview: 'Looks good to me! One concern: the testing window might be tight given the holidays...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-7', size: 520, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Looks good to me! One concern: the testing window might be tight given the holidays. Could we start testing a few days earlier?\n\nAlso, should we set up a shared doc for tracking blockers?\n\n— Bob' },
+      },
+      messageId: '<q4-timeline-2@example.com>',
+      inReplyTo: ['<q4-timeline-1@example.com>'],
+      references: ['<q4-timeline-1@example.com>'],
+    },
+    {
+      id: 'demo-email-3c',
+      threadId: 'demo-thread-3',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: {},
+      size: 3800,
+      receivedAt: demoDate(-1, -3),
+      from: [{ name: 'Alice Johnson', email: 'alice.johnson@example.com' }],
+      to: [{ name: 'Bob Chen', email: 'bob.chen@example.com' }, { name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Re: Q4 Project Timeline',
+      sentAt: demoDate(-1, -3),
+      preview: 'Great point Bob. Let\'s move testing to Nov 28. I\'ll create the shared doc today...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-8', size: 400, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Great point Bob. Let\'s move testing to Nov 28. I\'ll create the shared doc today and share the link.\n\nUpdated timeline:\n- Design review: Oct 15\n- Development: Nov 1-27\n- Testing: Nov 28 - Dec 15\n- Launch: Dec 20\n\n— Alice' },
+      },
+      messageId: '<q4-timeline-3@example.com>',
+      inReplyTo: ['<q4-timeline-2@example.com>'],
+      references: ['<q4-timeline-1@example.com>', '<q4-timeline-2@example.com>'],
+    },
+    // Email with attachments
+    {
+      id: 'demo-email-4',
+      threadId: 'demo-thread-4',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: {},
+      size: 245000,
+      receivedAt: demoDate(0, -6),
+      from: [{ name: 'Sarah Kim', email: 'sarah.kim@example.com' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Invoice #2024-089 & Project Screenshot',
+      sentAt: demoDate(0, -6),
+      preview: 'Hi, please find attached the invoice for October and a screenshot of the latest prototype...',
+      hasAttachment: true,
+      textBody: [{ partId: '1', blobId: 'blob-9', size: 280, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Hi,\n\nPlease find attached the invoice for October and a screenshot of the latest prototype.\n\nLet me know if you have any questions.\n\nBest regards,\nSarah' },
+      },
+      attachments: [
+        { partId: 'att-1', blobId: 'demo-blob-att-1', size: 145000, name: 'Invoice-2024-089.pdf', type: 'application/pdf' },
+        { partId: 'att-2', blobId: 'demo-blob-att-2', size: 89000, name: 'prototype-v3.png', type: 'image/png' },
+      ],
+      messageId: '<invoice-089@example.com>',
+    },
+    // Starred email
+    {
+      id: 'demo-email-5',
+      threadId: 'demo-thread-5',
+      mailboxIds: { 'demo-mailbox-inbox': true },
+      keywords: { $seen: true, $flagged: true },
+      size: 2800,
+      receivedAt: demoDate(-2, -1),
+      from: [{ name: 'Carlos Rivera', email: 'carlos.rivera@example.com' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Reminder: Team Dinner Friday',
+      sentAt: demoDate(-2, -1),
+      preview: 'Hey! Just a reminder about our team dinner this Friday at 7 PM at The Garden Bistro...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-10', size: 320, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Hey!\n\nJust a reminder about our team dinner this Friday at 7 PM at The Garden Bistro. I\'ve made a reservation for 8 people.\n\nAddress: 123 Oak Street\n\nLet me know if you can make it!\n\nCheers,\nCarlos' },
+      },
+      messageId: '<dinner-reminder@example.com>',
+    },
+
+    // ── Sent ────────────────────────────────────────────────────
+    {
+      id: 'demo-email-6',
+      threadId: 'demo-thread-6',
+      mailboxIds: { 'demo-mailbox-sent': true },
+      keywords: { $seen: true },
+      size: 2100,
+      receivedAt: demoDate(-1, -4),
+      from: [{ name: 'Demo User', email: 'demo@example.com' }],
+      to: [{ name: 'Alice Johnson', email: 'alice.johnson@example.com' }],
+      subject: 'Updated Requirements Document',
+      sentAt: demoDate(-1, -4),
+      preview: 'Hi Alice, I\'ve updated the requirements document with the changes we discussed...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-11', size: 290, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Hi Alice,\n\nI\'ve updated the requirements document with the changes we discussed in yesterday\'s meeting. The main updates are in sections 3 and 5.\n\nLet me know if you have any questions.\n\nBest,\nDemo User' },
+      },
+      messageId: '<sent-1@example.com>',
+    },
+    {
+      id: 'demo-email-7',
+      threadId: 'demo-thread-7',
+      mailboxIds: { 'demo-mailbox-sent': true },
+      keywords: { $seen: true },
+      size: 1800,
+      receivedAt: demoDate(-4, -2),
+      from: [{ name: 'Demo User', email: 'demo@example.com' }],
+      to: [{ name: 'Sarah Kim', email: 'sarah.kim@example.com' }],
+      subject: 'Re: Design Feedback',
+      sentAt: demoDate(-4, -2),
+      preview: 'Thanks Sarah! The new color scheme looks great. I especially like the contrast improvements...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-12', size: 250, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Thanks Sarah! The new color scheme looks great. I especially like the contrast improvements for accessibility.\n\nLet\'s go with Option B for the navigation.\n\nBest,\nDemo User' },
+      },
+      messageId: '<sent-2@example.com>',
+    },
+
+    // ── Drafts ──────────────────────────────────────────────────
+    {
+      id: 'demo-email-8',
+      threadId: 'demo-thread-8',
+      mailboxIds: { 'demo-mailbox-drafts': true },
+      keywords: { $seen: true, $draft: true },
+      size: 900,
+      receivedAt: demoDate(0, -1),
+      from: [{ name: 'Demo User', email: 'demo@example.com' }],
+      to: [{ name: 'Bob Chen', email: 'bob.chen@example.com' }],
+      subject: 'Meeting Notes - Draft',
+      sentAt: demoDate(0, -1),
+      preview: 'Here are the notes from today\'s standup...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-13', size: 180, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Here are the notes from today\'s standup:\n\n- API integration on track\n- Need to resolve the caching issue\n- ' },
+      },
+      messageId: '<draft-1@example.com>',
+    },
+
+    // ── Trash ───────────────────────────────────────────────────
+    {
+      id: 'demo-email-9',
+      threadId: 'demo-thread-9',
+      mailboxIds: { 'demo-mailbox-trash': true },
+      keywords: { $seen: true },
+      size: 15200,
+      receivedAt: demoDate(-5, -3),
+      from: [{ name: 'Promo Store', email: 'deals@promostore.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: '🎉 Flash Sale: 50% Off Everything!',
+      sentAt: demoDate(-5, -3),
+      preview: 'Limited time offer! Get 50% off all items in our store...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-14', size: 400, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Limited time offer! Get 50% off all items in our store. Use code FLASH50 at checkout.' },
+      },
+      messageId: '<promo-1@promostore.example>',
+    },
+    {
+      id: 'demo-email-10',
+      threadId: 'demo-thread-10',
+      mailboxIds: { 'demo-mailbox-trash': true },
+      keywords: { $seen: true },
+      size: 2300,
+      receivedAt: demoDate(-7, 0),
+      from: [{ name: 'System Notification', email: 'noreply@service.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Your password was changed',
+      sentAt: demoDate(-7, 0),
+      preview: 'Your account password was successfully changed on...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-15', size: 200, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Your account password was successfully changed. If you did not make this change, please contact support immediately.' },
+      },
+      messageId: '<notification-1@service.example>',
+    },
+
+    // ── Projects ────────────────────────────────────────────────
+    {
+      id: 'demo-email-11',
+      threadId: 'demo-thread-11',
+      mailboxIds: { 'demo-mailbox-projects': true },
+      keywords: { $seen: true, $flagged: true },
+      size: 4500,
+      receivedAt: demoDate(-2, -7),
+      from: [{ name: 'Alice Johnson', email: 'alice.johnson@example.com' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: '[Project] Sprint Planning Agenda',
+      sentAt: demoDate(-2, -7),
+      preview: 'Here\'s the agenda for next week\'s sprint planning session...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-16', size: 600, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Hi team,\n\nHere\'s the agenda for next week\'s sprint planning:\n\n1. Review previous sprint velocity\n2. Discuss tech debt items\n3. Prioritize backlog\n4. Assign story points\n5. Capacity planning\n\nPlease come prepared with your updates.\n\nThanks,\nAlice' },
+      },
+      messageId: '<project-1@example.com>',
+    },
+    {
+      id: 'demo-email-12',
+      threadId: 'demo-thread-12',
+      mailboxIds: { 'demo-mailbox-projects': true },
+      keywords: {},
+      size: 3200,
+      receivedAt: demoDate(0, -8),
+      from: [{ name: 'Bob Chen', email: 'bob.chen@example.com' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: '[Project] API Rate Limiting Discussion',
+      sentAt: demoDate(0, -8),
+      preview: 'I\'ve been thinking about our rate limiting approach and wanted to propose a few changes...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-17', size: 480, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Hey,\n\nI\'ve been thinking about our rate limiting approach and wanted to propose:\n\n1. Token bucket algorithm instead of fixed window\n2. Per-endpoint limits rather than global\n3. Graduated response (warn → throttle → block)\n\nThoughts? I can put together a more detailed RFC if we agree on the direction.\n\n— Bob' },
+      },
+      messageId: '<project-2@example.com>',
+    },
+
+    // ── Archive ─────────────────────────────────────────────────
+    {
+      id: 'demo-email-13',
+      threadId: 'demo-thread-13',
+      mailboxIds: { 'demo-mailbox-archive': true },
+      keywords: { $seen: true },
+      size: 2600,
+      receivedAt: demoDate(-14, -6),
+      from: [{ name: 'HR Department', email: 'hr@company.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Updated PTO Policy - Effective January 1',
+      sentAt: demoDate(-14, -6),
+      preview: 'Please review the updated PTO policy that takes effect January 1st...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-18', size: 380, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Dear team,\n\nPlease review the updated PTO policy effective January 1st. Key changes include:\n\n- Increased annual allowance from 20 to 25 days\n- Flexible half-day options\n- Rollover limit increased to 10 days\n\nPlease acknowledge receipt.\n\nBest,\nHR Department' },
+      },
+      messageId: '<hr-policy-1@company.example>',
+    },
+
+    // ── Receipts ────────────────────────────────────────────────
+    {
+      id: 'demo-email-14',
+      threadId: 'demo-thread-14',
+      mailboxIds: { 'demo-mailbox-receipts': true },
+      keywords: { $seen: true },
+      size: 5200,
+      receivedAt: demoDate(-3, -12),
+      from: [{ name: 'Cloud Services', email: 'billing@cloudprovider.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Payment Receipt - Invoice #INV-2024-1042',
+      sentAt: demoDate(-3, -12),
+      preview: 'Your payment of $49.99 has been processed successfully...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-19', size: 350, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Payment Confirmation\n\nAmount: $49.99\nDate: Processing date\nInvoice: INV-2024-1042\nService: Cloud Hosting (Standard Plan)\n\nThank you for your payment.' },
+      },
+      messageId: '<receipt-1@cloudprovider.example>',
+    },
+
+    // ── Spam ────────────────────────────────────────────────────
+    {
+      id: 'demo-email-15',
+      threadId: 'demo-thread-15',
+      mailboxIds: { 'demo-mailbox-junk': true },
+      keywords: {},
+      size: 8900,
+      receivedAt: demoDate(-1, -9),
+      from: [{ name: 'Prize Center', email: 'winner@totallylegit.example' }],
+      to: [{ name: 'Demo User', email: 'demo@example.com' }],
+      subject: 'Congratulations! You Won $1,000,000!!!',
+      sentAt: demoDate(-1, -9),
+      preview: 'Dear lucky winner, you have been selected to receive one million dollars...',
+      hasAttachment: false,
+      textBody: [{ partId: '1', blobId: 'blob-20', size: 500, type: 'text/plain' }],
+      bodyValues: {
+        '1': { value: 'Dear lucky winner,\n\nYou have been selected to receive ONE MILLION DOLLARS! Click below to claim your prize immediately.\n\n[This is a demo spam email]' },
+      },
+      messageId: '<spam-1@totallylegit.example>',
+    },
+  ];
+}

lib/demo/fixtures/files.ts

@@ -0,0 +1,94 @@
+import type { FileNode } from '@/lib/jmap/types';
+import { demoDate } from '../demo-utils';
+
+export function createDemoFileNodes(): FileNode[] {
+  return [
+    // Root-level directories
+    {
+      id: 'demo-file-documents',
+      parentId: null,
+      name: 'Documents',
+      type: 'd',
+      blobId: null,
+      size: 0,
+      created: demoDate(-30),
+      updated: demoDate(-2),
+    },
+    {
+      id: 'demo-file-photos',
+      parentId: null,
+      name: 'Photos',
+      type: 'd',
+      blobId: null,
+      size: 0,
+      created: demoDate(-30),
+      updated: demoDate(-5),
+    },
+
+    // Documents contents
+    {
+      id: 'demo-file-meeting-notes',
+      parentId: 'demo-file-documents',
+      name: 'meeting-notes.md',
+      type: 'text/markdown',
+      blobId: 'demo-blob-file-1',
+      size: 2150,
+      created: demoDate(-7),
+      updated: demoDate(-2),
+    },
+    {
+      id: 'demo-file-quarterly-report',
+      parentId: 'demo-file-documents',
+      name: 'quarterly-report.pdf',
+      type: 'application/pdf',
+      blobId: 'demo-blob-file-2',
+      size: 148480,
+      created: demoDate(-14),
+      updated: demoDate(-14),
+    },
+    {
+      id: 'demo-file-todo',
+      parentId: 'demo-file-documents',
+      name: 'todo.txt',
+      type: 'text/plain',
+      blobId: 'demo-blob-file-3',
+      size: 410,
+      created: demoDate(-3),
+      updated: demoDate(-1),
+    },
+
+    // Photos contents
+    {
+      id: 'demo-file-vacation',
+      parentId: 'demo-file-photos',
+      name: 'vacation.jpg',
+      type: 'image/jpeg',
+      blobId: 'demo-blob-file-4',
+      size: 1258291,
+      created: demoDate(-10),
+      updated: demoDate(-10),
+    },
+    {
+      id: 'demo-file-team-photo',
+      parentId: 'demo-file-photos',
+      name: 'team-photo.png',
+      type: 'image/png',
+      blobId: 'demo-blob-file-5',
+      size: 911360,
+      created: demoDate(-21),
+      updated: demoDate(-21),
+    },
+
+    // Root-level file
+    {
+      id: 'demo-file-budget',
+      parentId: null,
+      name: 'budget.xlsx',
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      blobId: 'demo-blob-file-6',
+      size: 68608,
+      created: demoDate(-5),
+      updated: demoDate(-1),
+    },
+  ];
+}

lib/demo/fixtures/filters.ts

@@ -0,0 +1,48 @@
+import type { SieveScript, SieveCapabilities } from '@/lib/jmap/sieve-types';
+
+export function createDemoSieveCapabilities(): SieveCapabilities {
+  return {
+    implementation: 'Demo Sieve Engine',
+    maxSizeScript: 65536,
+    sieveExtensions: ['fileinto', 'reject', 'vacation', 'imap4flags', 'comparator-i;ascii-casemap', 'body', 'envelope'],
+    notificationMethods: [],
+    externalLists: [],
+  };
+}
+
+export function createDemoSieveScripts(): SieveScript[] {
+  return [
+    {
+      id: 'demo-sieve-1',
+      name: 'Default Filters',
+      blobId: 'demo-sieve-blob-1',
+      isActive: true,
+    },
+  ];
+}
+
+// Sieve script content keyed by blobId
+export function createDemoSieveContent(): Record<string, string> {
+  return {
+    'demo-sieve-blob-1': [
+      'require ["fileinto", "imap4flags"];',
+      '',
+      '# Newsletters to Receipts',
+      'if address :contains "from" "newsletter@" {',
+      '  fileinto "Receipts";',
+      '  stop;',
+      '}',
+      '',
+      '# Flag emails from boss',
+      'if address :is "from" "alice.johnson@example.com" {',
+      '  addflag "\\\\Flagged";',
+      '}',
+      '',
+      '# Move project updates',
+      'if header :contains "subject" "[Project]" {',
+      '  fileinto "Projects";',
+      '  stop;',
+      '}',
+    ].join('\n'),
+  };
+}

lib/demo/fixtures/identities.ts

@@ -0,0 +1,22 @@
+import type { Identity } from '@/lib/jmap/types';
+
+export function createDemoIdentities(): Identity[] {
+  return [
+    {
+      id: 'demo-identity-primary',
+      name: 'Demo User',
+      email: 'demo@example.com',
+      textSignature: 'Best regards,\nDemo User\nBulwark Mail Demo',
+      htmlSignature: '<p>Best regards,<br><b>Demo User</b><br>Bulwark Mail Demo</p>',
+      mayDelete: false,
+    },
+    {
+      id: 'demo-identity-alias',
+      name: 'Demo User',
+      email: 'demo+newsletter@example.com',
+      textSignature: '',
+      htmlSignature: '',
+      mayDelete: true,
+    },
+  ];
+}