Merge dev into main - version 1.4.7

chore: bump version to 1.4.7
fix: handle updates and deletions for synthetic JMAP IDs in calendar events
2026-03-21 20:46:33 +01:00 · 2026-03-21 20:45:57 +01:00 · 2026-03-21 20:45:23 +01:00 · 2026-03-21 20:45:23 +01:00 · 2026-03-21 20:45:22 +01:00 · 2026-03-21 20:45:22 +01:00
155 changed files with 16572 additions and 2925 deletions
@@ -5,9 +5,7 @@ node_modules
 .env*
 !.env.example
 !.env.dev.example
-.claude/
 scripts/
 TODO.md
-CLAUDE.md
 *.md
 !README.md
@@ -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

 # =============================================================================
@@ -72,7 +75,7 @@ JMAP_SERVER_URL=https://your-jmap-server.com
 # =============================================================================

 # Hostname the server binds to (default: 0.0.0.0)
-# Set to "::" for IPv6 or "[::]" for dual-stack support.
+# Set to "::" for dual-stack
 # HOSTNAME=0.0.0.0

 # Port the server listens on (default: 3000)
@@ -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 }}
@@ -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 }}
@@ -42,9 +42,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts

-# claude code
-.claude/
-
 # settings sync data
 /data/

@@ -1,6 +1,126 @@
 # Changelog

-## 1.4.0 (2026-03-17)
+## 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
+
+- **Calendar**: Add task list view for calendar tasks with task details and management
+- **Calendar**: Add shared calendar grouping with visual separation in sidebar
+- **Calendar**: Support double-click to create events and improve modal date handling
+- **Contacts**: Add address book directories with drag-and-drop and editor picker
+- **Email**: Add email attachment support in sendEmail functionality
+- **Email**: Implement draft editing functionality across email components
+- **Email**: Implement unwrapping of embedded message/rfc822 attachments with enhanced HTML body validation
+- **Email**: Add email export/import localization keys for multiple languages
+- **Contacts**: Update gender handling to use speakToAs structure
+
+### Fixes
+
+- **Email**: Resolve default sender to canonical identity on local-part login
+- **Email**: Refactor overflow handling in EmailViewer to use hidden priorities and layout effects
+- **Email**: Remove debugMode usage from EmailViewer component
+- **Calendar**: Enhance IMIP invitation and cancellation handling for calendar events
+- **Calendar**: Add time-based sorting for events in buildWeekSegments function
+- **Dependencies**: Update dompurify to 3.3.3 and elliptic to 6.6.1, add undici override
+
+## 1.4.1 (2026-03-18)

 ### Features

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

@@ -1 +1 @@
-1.4.0
+1.4.7
@@ -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) {
@@ -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);
@@ -236,10 +259,12 @@ export default function CalendarPage() {

  const openCreateModal = useCallback((date?: Date, endDate?: Date) => {
    setEditEvent(null);
-    setDefaultModalDate(date || selectedDate);
+    const d = date || selectedDate;
+    setDefaultModalDate(d);
    setDefaultModalEndDate(endDate);
+    setSelectedDate(d);
    setShowEventModal(true);
-  }, [selectedDate]);
+  }, [selectedDate, setSelectedDate]);

  const openEditModal = useCallback((event: CalendarEvent) => {
    setEditEvent(event);
@@ -247,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(() => {
@@ -262,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(() => {
@@ -416,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) {
@@ -476,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) {
@@ -590,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) {
@@ -600,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;
      }
    };
@@ -609,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));
    }),
@@ -638,8 +719,10 @@ export default function CalendarPage() {
              onSelectEvent={handleSelectEvent}
              onHoverEvent={handleHoverEvent}
              onHoverLeave={handleHoverLeave}
+              onCreateAtTime={openCreateModal}
              firstDayOfWeek={firstDayOfWeek}
              isMobile={isMobile}
+              pendingPreview={pendingPreview}
            />
          );
        case "week":
@@ -656,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":
@@ -670,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":
@@ -684,13 +773,40 @@ 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>
+          );
      }
    })();

    return (
      <div className="relative flex-1 flex flex-col overflow-hidden">
        {viewContent}
-        {isLoadingEvents && calendars.length > 0 && (
+        {isLoadingEvents && calendars.length > 0 && events.length === 0 && (
          <div className="absolute inset-0 bg-background/50 flex items-center justify-center pointer-events-none">
            <div className="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
          </div>
@@ -700,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)' }}>
@@ -708,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}
@@ -738,6 +854,7 @@ export default function CalendarPage() {
              onChangeMonth={handleMiniMonthChange}
              events={events}
              firstDayOfWeek={firstDayOfWeek}
+              showWeekNumbers={showWeekNumbers}
            />
            <CalendarSidebarPanel
              calendars={calendars}
@@ -763,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}
@@ -778,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}
        >
@@ -791,6 +910,7 @@ export default function CalendarPage() {
          {!isMobile && showEventModal && (
            <div className="w-[400px] border-l border-border flex-shrink-0 overflow-hidden">
              <EventModal
+                key={editEvent?.id ?? 'new'}
                event={editEvent}
                calendars={calendars}
                defaultDate={defaultModalDate}
@@ -799,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
@@ -822,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 && (
@@ -852,6 +990,7 @@ export default function CalendarPage() {

      {showEventModal && isMobile && (
        <EventModal
+          key={editEvent?.id ?? 'new'}
          event={editEvent}
          calendars={calendars}
          defaultDate={defaultModalDate}
@@ -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";
@@ -25,7 +25,7 @@ import { InlineAppView } from "@/components/layout/inline-app-view";
 import { useSidebarApps } from "@/hooks/use-sidebar-apps";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { useIsMobile } from "@/hooks/use-media-query";
-import type { ContactCard } from "@/lib/jmap/types";
+import type { ContactCard, AddressBook } from "@/lib/jmap/types";

 type View =
  | "list"
@@ -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();
@@ -46,6 +45,7 @@ export default function ContactsPage() {
  const { quota, isPushConnected } = useEmailStore();
  const {
    contacts,
+    addressBooks,
    selectedContactId,
    searchQuery,
    supportsSync,
@@ -71,10 +71,13 @@ export default function ContactsPage() {
    clearSelection,
    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();
@@ -82,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(() => {
@@ -104,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) {
@@ -121,9 +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;
+    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;
+        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]);
@@ -131,20 +159,75 @@ 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, t]);
+  }, [activeCategory, contacts, addressBooks, t]);

  const handleSelectCategory = useCallback((category: ContactCategory) => {
    setActiveCategory(category);
    clearSelection();
-    if (typeof category === "object") {
+    if (typeof category === "object" && "groupId" in category) {
      setSelectedGroupId(category.groupId);
+      setView("group-detail");
    } else {
      setSelectedGroupId(null);
    }
  }, [clearSelection]);

+  const handleDropContacts = useCallback(async (contactIds: string[], addressBook: AddressBook) => {
+    if (!client) return;
+    try {
+      await moveContactToAddressBook(client, contactIds, addressBook);
+      const msg = contactIds.length === 1
+        ? t("address_books.moved", { name: addressBook.name })
+        : t("address_books.moved_plural", { count: contactIds.length, name: addressBook.name });
+      toast.success(msg);
+    } catch (error) {
+      console.error('Failed to move contacts:', error);
+      toast.error(t("address_books.move_failed"));
+    }
+  }, [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();
@@ -239,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;

@@ -357,13 +469,15 @@ export default function ContactsPage() {
  const renderRightPanel = () => {
    switch (view) {
      case "create":
-        return <ContactForm onSave={handleSaveNew} onCancel={handleCancel} />;
+        return <ContactForm addressBooks={addressBooks} allKeywords={allKeywords} onSave={handleSaveNew} onCancel={handleCancel} />;

      case "edit":
        if (!selectedContact) return null;
        return (
          <ContactForm
            contact={selectedContact}
+            addressBooks={addressBooks}
+            allKeywords={allKeywords}
            onSave={handleSaveEdit}
            onCancel={handleCancel}
          />
@@ -381,7 +495,6 @@ export default function ContactsPage() {
            isMobile={isMobile}
            onSelectMember={(id) => {
              setSelectedContact(id);
-              setActiveCategory("all");
              setView("detail");
            }}
          />
@@ -471,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)' }}>
@@ -479,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}
@@ -508,26 +621,33 @@ export default function ContactsPage() {
                    <ContactsSidebar
                      groups={groups}
                      individuals={individuals}
+                      addressBooks={addressBooks}
                      activeCategory={activeCategory}
                      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" : "",
@@ -605,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>
  );
 }
@@ -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}
@@ -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>
@@ -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.0";
+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>

@@ -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(() => {
@@ -437,11 +436,12 @@ export default function Home() {
    fromEmail?: string;
    fromName?: string;
    identityId?: string;
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>;
  }) => {
    if (!client) return;

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

      // Refresh the current mailbox to update the UI
@@ -468,6 +468,33 @@ export default function Home() {
    if (isMobile) setActiveView('viewer');
  };

+  const handleEditDraft = (email?: Email) => {
+    const draft = email || selectedEmail;
+    if (!draft) return;
+    const bodyText = draft.bodyValues
+      ? Object.values(draft.bodyValues).map(v => v.value).join('\n')
+      : '';
+    const htmlBody = draft.htmlBody?.[0]?.partId && draft.bodyValues?.[draft.htmlBody[0].partId]
+      ? draft.bodyValues[draft.htmlBody[0].partId].value
+      : undefined;
+    setPendingDraft({
+      to: draft.to?.map(a => a.email).filter(Boolean).join(', ') || '',
+      cc: draft.cc?.map(a => a.email).filter(Boolean).join(', ') || '',
+      bcc: draft.bcc?.map(a => a.email).filter(Boolean).join(', ') || '',
+      subject: draft.subject || '',
+      body: htmlBody || bodyText,
+      showCc: (draft.cc?.length || 0) > 0,
+      showBcc: (draft.bcc?.length || 0) > 0,
+      selectedIdentityId: null,
+      subAddressTag: '',
+      mode: 'compose',
+      draftId: draft.id,
+    });
+    setComposerMode('compose');
+    setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
+  };
+
  const handleReplyAll = () => {
    setComposerMode('replyAll');
    setShowComposer(true);
@@ -739,10 +766,7 @@ export default function Home() {
    }
  };

-  const handleLogout = () => {
-    logout();
-    router.push('/login');
-  };
+  const handleLogout = logout;

  const handleSearch = async (query: string) => {
    if (!client) return;
@@ -785,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;
      }
@@ -832,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(
@@ -992,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">
@@ -1142,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
@@ -1370,6 +1396,9 @@ export default function Home() {
                  selectEmail(email);
                  await handleUndoSpam();
                }}
+                onEditDraft={(email) => {
+                  handleEditDraft(email);
+                }}
                className="flex-1 min-h-0"
              />
            </ErrorBoundary>
@@ -1543,8 +1572,9 @@ export default function Home() {
                    onNavigateNext={handleNavigateNext}
                    onNavigatePrev={handleNavigatePrev}
                    onShowShortcuts={() => setShowShortcutsModal(true)}
-                    currentUserEmail={client?.["username"]}
-                    currentUserName={client?.["username"]?.split("@")[0]}
+                    onEditDraft={handleEditDraft}
+                    currentUserEmail={client?.getUsername()}
+                    currentUserName={client?.getUsername()?.split("@")[0]}
                    currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
                    mailboxes={mailboxes}
                    selectedMailbox={selectedMailbox}
@@ -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}>
@@ -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' });
@@ -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 });
+  }
+}
@@ -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 });
+  }
+}
@@ -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;
@@ -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 });
+  }
+}
@@ -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 || '',
  });
 }
@@ -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 });
@@ -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 });
  }
 }
@@ -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;
+}
@@ -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
@@ -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>
+  );
+}
@@ -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>
@@ -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>
@@ -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 {
@@ -22,8 +23,10 @@ interface CalendarMonthViewProps {
  onSelectEvent: (event: CalendarEvent, anchorRect: DOMRect) => void;
  onHoverEvent?: (event: CalendarEvent, anchorRect: DOMRect) => void;
  onHoverLeave?: () => void;
+  onCreateAtTime?: (date: Date) => void;
  firstDayOfWeek?: number;
  isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }

 export function CalendarMonthView({
@@ -34,8 +37,10 @@ export function CalendarMonthView({
  onSelectEvent,
  onHoverEvent,
  onHoverLeave,
+  onCreateAtTime,
  firstDayOfWeek = 1,
  isMobile,
+  pendingPreview,
 }: CalendarMonthViewProps) {
  const t = useTranslations("calendar");
  const intlFormatter = useFormatter();
@@ -165,6 +170,7 @@ export function CalendarMonthView({
                  aria-selected={selected}
                  aria-label={fullDateLabel}
                  onClick={() => onSelectDate(day)}
+                  onDoubleClick={() => onCreateAtTime?.(day)}
                  onDragOver={(e) => handleCellDragOver(e, key)}
                  onDragLeave={handleCellDragLeave}
                  onDrop={(e) => handleCellDrop(e, day)}
@@ -191,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}`}
@@ -233,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}
@@ -1,15 +1,16 @@
 "use client";

-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import { Globe, Plus, RefreshCw, 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);
@@ -42,6 +52,20 @@ export function CalendarSidebarPanel({
  const colorPickerRef = useRef<HTMLDivElement>(null);
  const contextMenuRef = useRef<HTMLDivElement>(null);

+  const personalCalendars = useMemo(() => calendars.filter(c => !c.isShared), [calendars]);
+  const sharedAccountGroups = useMemo(() => {
+    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 || cal.accountName || cal.id;
+      if (!groups.has(key)) {
+        groups.set(key, { accountName: cal.accountName || key, calendars: [] });
+      }
+      groups.get(key)!.calendars.push(cal);
+    }
+    return Array.from(groups.values());
+  }, [calendars]);
+
  useEffect(() => {
    if (!colorPickerId && !contextMenuCalId) return;
    const handleClick = (e: MouseEvent) => {
@@ -97,108 +121,137 @@ export function CalendarSidebarPanel({

  if (calendars.length === 0 && !onSubscribe) return null;

-  return (
-    <div className="mt-4">
-      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
-        {t("my_calendars")}
-      </h3>
-      <div className="space-y-0.5">
-        {calendars.map((cal) => {
-          const isVisible = selectedCalendarIds.includes(cal.id);
-          const color = cal.color || "#3b82f6";
+  const renderCalendarItem = (cal: Calendar) => {
+    const isVisible = selectedCalendarIds.includes(cal.id);
+    const color = cal.color || "#3b82f6";

+    return (
+      <div key={cal.id} className="relative">
+        <button
+          onClick={() => onToggleVisibility(cal.id)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            if (isSubscriptionCalendar(cal.id) && client) {
+              setContextMenuCalId(contextMenuCalId === cal.id ? null : cal.id);
+              setColorPickerId(null);
+            } else if (onColorChange) {
+              setColorPickerId(colorPickerId === cal.id ? null : cal.id);
+              setContextMenuCalId(null);
+            }
+          }}
+          className={cn(
+            "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
+            "hover:bg-muted"
+          )}
+        >
+          <span
+            className={cn(
+              "w-3 h-3 rounded-sm border-2 flex-shrink-0 transition-colors",
+              isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+            )}
+            style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
+          />
+          <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
+            {cal.name}
+          </span>
+          {isSubscriptionCalendar(cal.id) && (
+            <>
+              <Globe className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+              {refreshingSubId === getSubscriptionForCalendar(cal.id)?.id && (
+                <RefreshCw className="w-3 h-3 text-muted-foreground flex-shrink-0 animate-spin" />
+              )}
+            </>
+          )}
+        </button>
+
+        {/* Subscription context menu on right-click */}
+        {contextMenuCalId === cal.id && isSubscriptionCalendar(cal.id) && client && (() => {
+          const sub = getSubscriptionForCalendar(cal.id);
+          if (!sub) return null;
          return (
-            <div key={cal.id} className="relative">
+            <div
+              ref={contextMenuRef}
+              className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg py-1 w-48"
+            >
              <button
-                onClick={() => onToggleVisibility(cal.id)}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  if (isSubscriptionCalendar(cal.id) && client) {
-                    setContextMenuCalId(contextMenuCalId === cal.id ? null : cal.id);
-                    setColorPickerId(null);
-                  } else if (onColorChange) {
-                    setColorPickerId(colorPickerId === cal.id ? null : cal.id);
-                    setContextMenuCalId(null);
-                  }
-                }}
-                className={cn(
-                  "flex items-center gap-2 w-full px-1.5 py-1 rounded-md text-sm transition-colors duration-150",
-                  "hover:bg-muted"
-                )}
+                onClick={() => handleRefreshSubscription(sub.id)}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
              >
-                <span
-                  className={cn(
-                    "w-3 h-3 rounded-sm border-2 flex-shrink-0 transition-colors",
-                    isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
-                  )}
-                  style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
-                />
-                <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
-                  {cal.name}
-                </span>
-                {isSubscriptionCalendar(cal.id) && (
-                  <>
-                    <Globe className="w-3 h-3 text-muted-foreground flex-shrink-0" />
-                    {refreshingSubId === getSubscriptionForCalendar(cal.id)?.id && (
-                      <RefreshCw className="w-3 h-3 text-muted-foreground flex-shrink-0 animate-spin" />
-                    )}
-                  </>
-                )}
+                <RefreshCw className="w-3.5 h-3.5" />
+                {tSub('refresh')}
              </button>
-
-              {/* Subscription context menu on right-click */}
-              {contextMenuCalId === cal.id && isSubscriptionCalendar(cal.id) && client && (() => {
-                const sub = getSubscriptionForCalendar(cal.id);
-                if (!sub) return null;
-                return (
-                  <div
-                    ref={contextMenuRef}
-                    className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg py-1 w-48"
-                  >
-                    <button
-                      onClick={() => handleRefreshSubscription(sub.id)}
-                      className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-muted transition-colors"
-                    >
-                      <RefreshCw className="w-3.5 h-3.5" />
-                      {tSub('refresh')}
-                    </button>
-                    <button
-                      onClick={() => handleUnsubscribe(sub.id)}
-                      className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                      {tSub('unsubscribe')}
-                    </button>
-                    {sub.lastRefreshed && (
-                      <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
-                        {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })()}
-
-              {/* Color picker popover on right-click */}
-              {colorPickerId === cal.id && onColorChange && (
-                <div
-                  ref={colorPickerRef}
-                  className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
-                >
-                  <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
-                  <CalendarColorPicker
-                    value={color}
-                    onChange={(c) => {
-                      onColorChange(cal.id, c);
-                      setColorPickerId(null);
-                    }}
-                    allowCustom
-                  />
+              <button
+                onClick={() => handleUnsubscribe(sub.id)}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+                {tSub('unsubscribe')}
+              </button>
+              {sub.lastRefreshed && (
+                <div className="px-3 py-1.5 text-xs text-muted-foreground border-t border-border mt-1 pt-1">
+                  {tSub('last_refreshed', { time: formatDateTime(sub.lastRefreshed, timeFormat, { month: 'short', day: 'numeric', year: 'numeric' }) })}
                </div>
              )}
            </div>
          );
-        })}
+        })()}
+
+        {/* Color picker popover on right-click */}
+        {colorPickerId === cal.id && onColorChange && (
+          <div
+            ref={colorPickerRef}
+            className="absolute left-6 top-full mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-3 w-56"
+          >
+            <p className="text-xs font-medium text-muted-foreground mb-2">{t("management.change_color")}</p>
+            <CalendarColorPicker
+              value={color}
+              onChange={(c) => {
+                onColorChange(cal.id, c);
+                setColorPickerId(null);
+              }}
+              allowCustom
+            />
+          </div>
+        )}
      </div>
+    );
+  };
+
+  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>
+      <div className="space-y-0.5">
+        {personalCalendars.map(renderCalendarItem)}
+      </div>
+
+      {sharedAccountGroups.map((group) => (
+        <div key={group.accountName} className="mt-4">
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1 flex items-center gap-1.5">
+            <Share2 className="w-3 h-3" />
+            {group.accountName}
+          </h3>
+          <div className="space-y-0.5">
+            {group.calendars.map(renderCalendarItem)}
+          </div>
+        </div>
+      ))}
    </div>
  );
 }
@@ -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
@@ -153,7 +173,7 @@ export function CalendarToolbar({
                {t("my_calendars")}
              </h3>
              <div className="space-y-0.5">
-                {calendars.map((cal) => {
+                {calendars.filter(c => !c.isShared).map((cal) => {
                  const isVisible = selectedCalendarIds.includes(cal.id);
                  const color = cal.color || "#3b82f6";
                  return (
@@ -179,6 +199,49 @@ export function CalendarToolbar({
                  );
                })}
              </div>
+              {(() => {
+                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 || c.accountName || c.id;
+                  if (!groups.has(key)) groups.set(key, { accountName: c.accountName || key, cals: [] });
+                  groups.get(key)!.cals.push(c);
+                }
+                return Array.from(groups.values()).map((group) => (
+                  <div key={group.accountName} className="mt-2">
+                    <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
+                      {group.accountName}
+                    </h3>
+                    <div className="space-y-0.5">
+                      {group.cals.map((cal) => {
+                        const isVisible = selectedCalendarIds.includes(cal.id);
+                        const color = cal.color || "#3b82f6";
+                        return (
+                          <button
+                            key={cal.id}
+                            onClick={() => onToggleVisibility(cal.id)}
+                            className={cn(
+                              "flex items-center gap-2 w-full px-2 py-2 rounded-md text-sm transition-colors duration-150 touch-manipulation",
+                              "hover:bg-muted"
+                            )}
+                          >
+                            <span
+                              className={cn(
+                                "w-3.5 h-3.5 rounded-sm border-2 flex-shrink-0 transition-colors",
+                                isVisible ? "border-transparent" : "border-muted-foreground/40 bg-transparent"
+                              )}
+                              style={isVisible ? { backgroundColor: color, borderColor: color } : undefined}
+                            />
+                            <span className={cn("truncate", !isVisible && "text-muted-foreground")}>
+                              {cal.name}
+                            </span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ));
+              })()}
            </div>
          )}
        </div>
@@ -269,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>
@@ -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>
              );
            })}
@@ -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>
@@ -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();
@@ -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>
@@ -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;
 }

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

@@ -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>
@@ -0,0 +1,248 @@
+"use client";
+
+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, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { CalendarTask, Calendar } from "@/lib/jmap/types";
+import type { TaskViewFilter } from "@/stores/task-store";
+import { useSettingsStore } from "@/stores/settings-store";
+
+interface TaskListViewProps {
+  tasks: CalendarTask[];
+  calendars: Calendar[];
+  selectedCalendarIds: string[];
+  filter: TaskViewFilter;
+  showCompleted: boolean;
+  onSelectTask: (task: CalendarTask) => void;
+  onToggleComplete: (task: CalendarTask) => void;
+  selectedTaskId?: string | null;
+  onQuickCreate?: (title: string) => void;
+}
+
+function getTaskPriorityIcon(priority: number) {
+  if (priority >= 1 && priority <= 4) return <Flag className="h-3.5 w-3.5 text-red-500" />;
+  if (priority === 5) return <Flag className="h-3.5 w-3.5 text-orange-500" />;
+  if (priority >= 6 && priority <= 9) return <Flag className="h-3.5 w-3.5 text-gray-400" />;
+  return null;
+}
+
+function getDueDateLabel(due: string, showWithoutTime: boolean, t: ReturnType<typeof useTranslations>, timeFormat: string): { label: string; className: string } {
+  const dueDate = parseISO(due);
+  const overdue = isPast(dueDate) && !isToday(dueDate);
+
+  if (isToday(dueDate)) {
+    return {
+      label: t("tasks.due_today"),
+      className: "text-blue-600 dark:text-blue-400",
+    };
+  }
+  if (isTomorrow(dueDate)) {
+    return {
+      label: t("tasks.due_tomorrow"),
+      className: "text-muted-foreground",
+    };
+  }
+  if (overdue) {
+    return {
+      label: t("tasks.overdue"),
+      className: "text-red-600 dark:text-red-400",
+    };
+  }
+
+  const formatted = showWithoutTime
+    ? format(dueDate, "MMM d")
+    : format(dueDate, timeFormat === "12h" ? "MMM d, h:mm a" : "MMM d, HH:mm");
+
+  return {
+    label: formatted,
+    className: "text-muted-foreground",
+  };
+}
+
+export function TaskListView({
+  tasks,
+  calendars,
+  selectedCalendarIds,
+  filter,
+  showCompleted,
+  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 => {
+      const calIds = Object.keys(task.calendarIds);
+      return calIds.some(id => selectedCalendarIds.includes(id));
+    });
+
+    if (!showCompleted) {
+      result = result.filter(task => task.progress !== "completed" && task.progress !== "cancelled");
+    }
+
+    switch (filter) {
+      case "pending":
+        result = result.filter(task => task.progress === "needs-action" || task.progress === "in-process");
+        break;
+      case "completed":
+        result = result.filter(task => task.progress === "completed");
+        break;
+      case "overdue":
+        result = result.filter(task => {
+          if (!task.due || task.progress === "completed" || task.progress === "cancelled") return false;
+          return isPast(parseISO(task.due)) && !isToday(parseISO(task.due));
+        });
+        break;
+    }
+
+    // Sort: overdue first, then by due date (no due date last), then by priority
+    result.sort((a, b) => {
+      // Completed tasks at the bottom
+      if (a.progress === "completed" && b.progress !== "completed") return 1;
+      if (a.progress !== "completed" && b.progress === "completed") return -1;
+
+      // Tasks with due dates before those without
+      if (a.due && !b.due) return -1;
+      if (!a.due && b.due) return 1;
+      if (a.due && b.due) {
+        const dateCompare = new Date(a.due).getTime() - new Date(b.due).getTime();
+        if (dateCompare !== 0) return dateCompare;
+      }
+
+      // Higher priority first (lower number = higher priority, but 0 = no priority goes last)
+      const aPri = a.priority || 10;
+      const bPri = b.priority || 10;
+      return aPri - bPri;
+    });
+
+    return result;
+  }, [tasks, selectedCalendarIds, filter, showCompleted]);
+
+  const handleToggle = useCallback((e: React.MouseEvent, task: CalendarTask) => {
+    e.stopPropagation();
+    onToggleComplete(task);
+  }, [onToggleComplete]);
+
+  if (filteredTasks.length === 0) {
+    return (
+      <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]);
+          const isCompleted = task.progress === "completed";
+          const priorityIcon = getTaskPriorityIcon(task.priority);
+          const dueDateInfo = task.due ? getDueDateLabel(task.due, task.showWithoutTime, t, timeFormat) : null;
+
+          return (
+            <div
+              key={task.id}
+              onClick={() => onSelectTask(task)}
+              className={cn(
+                "flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-muted/50 transition-colors",
+                selectedTaskId === task.id && "bg-muted",
+              )}
+            >
+              {/* Checkbox */}
+              <button
+                onClick={(e) => handleToggle(e, task)}
+                className={cn(
+                  "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
+                  isCompleted
+                    ? "bg-green-500 border-green-500 text-white"
+                    : "border-muted-foreground/40 hover:border-primary"
+                )}
+                aria-label={isCompleted ? t("tasks.mark_incomplete") : t("tasks.mark_complete")}
+              >
+                {isCompleted && <Check className="h-3 w-3" />}
+              </button>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className={cn(
+                    "text-sm font-medium truncate",
+                    isCompleted && "line-through text-muted-foreground"
+                  )}>
+                    {task.title || t("tasks.no_title")}
+                  </span>
+                  {priorityIcon}
+                </div>
+
+                <div className="flex items-center gap-2 mt-0.5">
+                  {dueDateInfo && (
+                    <span className={cn("text-xs flex items-center gap-1", dueDateInfo.className)}>
+                      <CalendarDays className="h-3 w-3" />
+                      {dueDateInfo.label}
+                    </span>
+                  )}
+                  {cal && (
+                    <span className="text-xs text-muted-foreground flex items-center gap-1">
+                      <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: cal.color || "#3b82f6" }} />
+                      {cal.name}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -30,6 +30,7 @@ describe('ContactListItem', () => {
    density: 'regular' as const,
    onClick: vi.fn(),
    onCheckboxClick: vi.fn(),
+    selectedContactIds: new Set<string>(),
  };

  it('renders contact name and email', () => {
@@ -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 && (
@@ -351,13 +364,16 @@ export function ContactDetail({ contact, onEdit, onDelete, isMobile, className }
            </Section>
          )}

-          {contact.gender && (contact.gender.sex || contact.gender.identity) && (
+          {contact.speakToAs && (contact.speakToAs.grammaticalGender || contact.speakToAs.pronouns) && (
            <Section icon={UserCircle} title={t("detail.gender")} category="personal">
              <div className="text-sm">
-                {contact.gender.sex && <span>{t(`detail.gender_${contact.gender.sex.toUpperCase()}`, { defaultValue: contact.gender.sex })}</span>}
-                {contact.gender.identity && (
-                  <span className="text-muted-foreground">{contact.gender.sex ? " — " : ""}{contact.gender.identity}</span>
-                )}
+                {contact.speakToAs.grammaticalGender && <span>{t(`detail.gender_${contact.speakToAs.grammaticalGender}`, { defaultValue: contact.speakToAs.grammaticalGender })}</span>}
+                {contact.speakToAs.pronouns && (() => {
+                  const firstPronoun = Object.values(contact.speakToAs!.pronouns!)[0]?.pronouns;
+                  return firstPronoun ? (
+                    <span className="text-muted-foreground">{contact.speakToAs!.grammaticalGender ? " — " : ""}{firstPronoun}</span>
+                  ) : null;
+                })()}
              </div>
            </Section>
          )}
@@ -1,12 +1,12 @@
 "use client";

-import { useState } 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 } from "lucide-react";
+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 } from "@/lib/jmap/types";
+import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress } from "@/lib/jmap/types";

 interface EmailEntry {
  address: string;
@@ -47,6 +47,8 @@ interface AddressEntry {

 interface ContactFormProps {
  contact?: ContactCard | null;
+  addressBooks?: AddressBook[];
+  allKeywords?: string[];
  onSave: (data: Partial<ContactCard>) => Promise<void>;
  onCancel: () => void;
 }
@@ -122,12 +124,73 @@ function Select({ value, onChange, children, className }: {
  );
 }

-export function ContactForm({ contact, 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"));
@@ -183,14 +246,7 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {

  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 [];
  });
@@ -209,7 +265,7 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
  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,
      }));
    }
@@ -235,12 +291,31 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
    contact?.notes ? Object.values(contact.notes)[0]?.note || "" : ""
  );

-  const [genderSex, setGenderSex] = useState(contact?.gender?.sex || "");
-  const [genderIdentity, setGenderIdentity] = useState(contact?.gender?.identity || "");
+  const [genderSex, setGenderSex] = useState(contact?.speakToAs?.grammaticalGender || "");
+  const [genderIdentity, setGenderIdentity] = useState(
+    contact?.speakToAs?.pronouns ? Object.values(contact.speakToAs.pronouns)[0]?.pronouns || "" : ""
+  );
  const [calendarUri, setCalendarUri] = useState(contact?.calendarUri || "");
  const [schedulingUri, setSchedulingUri] = useState(contact?.schedulingUri || "");
  const [freeBusyUri, setFreeBusyUri] = useState(contact?.freeBusyUri || "");

+  // Address book selection
+  const currentBookId = useMemo(() => {
+    if (contact?.addressBookIds) {
+      const ids = Object.keys(contact.addressBookIds).filter(k => contact.addressBookIds[k]);
+      if (ids.length > 0) {
+        // For shared contacts, the addressBookIds uses the original (non-namespaced) id
+        // but we need the namespaced id to match addressBooks entries
+        if (contact.isShared && contact.accountId) {
+          return `${contact.accountId}:${ids[0]}`;
+        }
+        return ids[0];
+      }
+    }
+    return "";
+  }, [contact]);
+  const [selectedBookId, setSelectedBookId] = useState(currentBookId);
+
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [emailErrors, setEmailErrors] = useState<Record<number, string>>({});
@@ -316,12 +391,13 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {

    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;
@@ -337,7 +413,7 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {

    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> = {};
@@ -371,12 +447,16 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
      notes: note.trim()
        ? { n0: { note: note.trim() } }
        : undefined,
-      gender: (genderSex.trim() || genderIdentity.trim())
-        ? { sex: genderSex.trim() || undefined, identity: genderIdentity.trim() || undefined }
+      speakToAs: (genderSex.trim() || genderIdentity.trim())
+        ? {
+            grammaticalGender: genderSex.trim() || undefined,
+            pronouns: genderIdentity.trim() ? { p0: { pronouns: genderIdentity.trim() } } : undefined,
+          }
        : undefined,
      calendarUri: calendarUri.trim() || undefined,
      schedulingUri: schedulingUri.trim() || undefined,
      freeBusyUri: freeBusyUri.trim() || undefined,
+      ...(selectedBookId ? { addressBookIds: { [selectedBookId]: true } } : {}),
    };

    setIsSaving(true);
@@ -410,6 +490,26 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">

+          {/* Address Book Selector */}
+          {addressBooks && addressBooks.length > 1 && (
+            <div className="md:col-span-2 xl:col-span-3">
+              <FormSection icon={Book} title={t("section_address_book") || "Directory"} category="contact">
+                <select
+                  value={selectedBookId}
+                  onChange={(e) => setSelectedBookId(e.target.value)}
+                  className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+                >
+                  <option value="">{t("select_address_book") || "Select a directory..."}</option>
+                  {addressBooks.map((book) => (
+                    <option key={book.id} value={book.id}>
+                      {book.accountName ? `${book.name} (${book.accountName})` : book.name}
+                    </option>
+                  ))}
+                </select>
+              </FormSection>
+            </div>
+          )}
+
          {/* Name & Identity — full width */}
          <div className="md:col-span-2 xl:col-span-3">
          <FormSection icon={User} title={t("section_identity")} category="contact">
@@ -720,14 +820,14 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {

          {/* 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 */}
@@ -737,11 +837,11 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
                <label className="text-xs text-muted-foreground mb-1 block">{t("gender_sex")}</label>
                <Select value={genderSex} onChange={(e) => setGenderSex(e.target.value)} className="w-full">
                  <option value="">—</option>
-                  <option value="M">{t("gender_male")}</option>
-                  <option value="F">{t("gender_female")}</option>
-                  <option value="O">{t("gender_other")}</option>
-                  <option value="N">{t("gender_none")}</option>
-                  <option value="U">{t("gender_unknown")}</option>
+                  <option value="masculine">{t("gender_male")}</option>
+                  <option value="feminine">{t("gender_female")}</option>
+                  <option value="other">{t("gender_other")}</option>
+                  <option value="none">{t("gender_none")}</option>
+                  <option value="unknown">{t("gender_unknown")}</option>
                </Select>
              </div>
              <div>
@@ -796,3 +896,142 @@ export function ContactForm({ contact, onSave, onCancel }: ContactFormProps) {
    </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>
+  );
+}
@@ -1,5 +1,6 @@
 "use client";

+import { useCallback, type DragEvent } from "react";
 import { Avatar } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
 import type { ContactCard } from "@/lib/jmap/types";
@@ -13,19 +14,47 @@ interface ContactListItemProps {
  isChecked: boolean;
  hasSelection: boolean;
  density: Density;
+  selectedContactIds: Set<string>;
  onClick: (e: React.MouseEvent) => void;
  onCheckboxClick: (e: React.MouseEvent) => void;
 }

-export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, onClick, onCheckboxClick }: ContactListItemProps) {
+export function ContactListItem({ contact, isSelected, isChecked, hasSelection, density, selectedContactIds, onClick, onCheckboxClick }: ContactListItemProps) {
  const name = getContactDisplayName(contact);
  const email = getContactPrimaryEmail(contact);
  const org = contact.organizations
    ? Object.values(contact.organizations)[0]?.name
    : undefined;

+  const handleDragStart = useCallback((e: DragEvent<HTMLDivElement>) => {
+    // Drag all selected contacts if this one is selected, otherwise just this one
+    const ids = selectedContactIds.has(contact.id)
+      ? Array.from(selectedContactIds)
+      : [contact.id];
+
+    e.dataTransfer.effectAllowed = "copyMove";
+    e.dataTransfer.setData("application/x-contact-ids", JSON.stringify(ids));
+    e.dataTransfer.setData("text/plain", name || email || contact.id);
+
+    // Custom drag preview
+    const preview = document.createElement("div");
+    preview.style.cssText = `
+      position: fixed; top: -9999px; left: 0;
+      padding: 8px 16px; background-color: var(--color-primary, #3b82f6);
+      color: var(--color-primary-foreground, #ffffff); border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 14px; font-weight: 500;
+      z-index: 9999; white-space: nowrap; pointer-events: none;
+    `;
+    preview.textContent = ids.length === 1 ? (name || "1 contact") : `${ids.length} contacts`;
+    document.body.appendChild(preview);
+    e.dataTransfer.setDragImage(preview, 0, 0);
+    requestAnimationFrame(() => preview.remove());
+  }, [contact.id, name, email, selectedContactIds]);
+
  return (
    <div
+      draggable
+      onDragStart={handleDragStart}
      onClick={onClick}
      className={cn(
        "w-full flex items-center cursor-pointer select-none transition-all duration-200 border-b border-border",
@@ -193,6 +193,7 @@ export function ContactList({
                isChecked={selectedContactIds.has(contact.id)}
                hasSelection={hasSelection}
                density={density}
+                selectedContactIds={selectedContactIds}
                onClick={(e) => {
                  if (e.ctrlKey || e.metaKey) {
                    e.preventDefault();
@@ -1,35 +1,95 @@
 "use client";

-import { useMemo } from "react";
+import { useMemo, useState, useCallback, useEffect, useRef, type DragEvent } from "react";
 import { useTranslations } from "next-intl";
-import { BookUser, Users, Plus, UserPlus } 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 } from "@/lib/jmap/types";
+import type { ContactCard, AddressBook } from "@/lib/jmap/types";
 import { getContactDisplayName } from "@/stores/contact-store";

-export type ContactCategory = "all" | { groupId: string };
+export type ContactCategory = "all" | { groupId: string } | { addressBookId: string } | { keyword: string } | "uncategorized";

 interface ContactsSidebarProps {
  groups: ContactCard[];
  individuals: ContactCard[];
+  addressBooks: AddressBook[];
  activeCategory: ContactCategory;
  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,
+  addressBooks,
  activeCategory,
  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) =>
@@ -39,17 +99,131 @@ export function ContactsSidebar({

  const isAllActive = activeCategory === "all";

+  // Group address books: personal vs shared accounts
+  const personalBooks = useMemo(() =>
+    addressBooks.filter(b => !b.isShared),
+  [addressBooks]);
+
+  const sharedBookGroups = useMemo(() => {
+    const map = new Map<string, { accountId: string; accountName: string; books: AddressBook[] }>();
+    for (const book of addressBooks) {
+      if (!book.isShared || !book.accountId) continue;
+      const existing = map.get(book.accountId);
+      if (existing) {
+        existing.books.push(book);
+      } else {
+        map.set(book.accountId, {
+          accountId: book.accountId,
+          accountName: book.accountName || book.accountId,
+          books: [book],
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [addressBooks]);
+
+  // Count contacts per address book
+  const contactCountByBook = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const contact of individuals) {
+      if (!contact.addressBookIds) continue;
+      for (const bookId of Object.keys(contact.addressBookIds)) {
+        if (!contact.addressBookIds[bookId]) continue;
+        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
@@ -69,30 +243,63 @@ export function ContactsSidebar({
          </span>
        </button>

-        {/* Groups section */}
-        {(sortedGroups.length > 0) && (
+        {/* 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>
+            </button>
+            {!collapsed.addressBooks && personalBooks.map((book) => (
+              <AddressBookItem
+                key={book.id}
+                book={book}
+                isActive={typeof activeCategory === "object" && "addressBookId" in activeCategory && activeCategory.addressBookId === book.id}
+                contactCount={contactCountByBook[book.id] || 0}
+                onSelect={() => onSelectCategory({ addressBookId: book.id })}
+                onDropContacts={onDropContacts}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Groups section */}
+        {sortedGroups.length > 0 && (
+          <div className="mt-2">
+            <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) => {
-              const isActive = typeof activeCategory === "object" && activeCategory.groupId === group.id;
-              const memberCount = group.members
-                ? Object.values(group.members).filter(Boolean).length
-                : 0;
+            {!collapsed.groups && sortedGroups.map((group) => {
+              const isActive = typeof activeCategory === "object" && "groupId" in activeCategory && activeCategory.groupId === group.id;
+              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"
@@ -110,25 +317,247 @@ 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"
+        {/* 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">
+            <button
+              onClick={() => toggleSection(`shared-${group.accountId}`)}
+              className="flex items-center gap-1 px-3 py-1 w-full text-left group"
            >
-              <Plus className="w-3 h-3 mr-1.5" />
-              {t("groups.create")}
-            </Button>
+              {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>
+            </button>
+            {!collapsed[`shared-${group.accountId}`] && group.books.map((book) => (
+              <AddressBookItem
+                key={book.id}
+                book={book}
+                isActive={typeof activeCategory === "object" && "addressBookId" in activeCategory && activeCategory.addressBookId === book.id}
+                contactCount={contactCountByBook[book.id] || 0}
+                onSelect={() => onSelectCategory({ addressBookId: book.id })}
+                onDropContacts={onDropContacts}
+              />
+            ))}
          </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,
+  contactCount,
+  onSelect,
+  onDropContacts,
+}: {
+  book: AddressBook;
+  isActive: boolean;
+  contactCount: number;
+  onSelect: () => void;
+  onDropContacts?: (contactIds: string[], addressBook: AddressBook) => 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 = "move";
+    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, book);
+      }
+    } catch {
+      // ignore invalid data
+    }
+  }, [book, 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' }}
+    >
+      <Book className="w-4 h-4 flex-shrink-0" />
+      <span className="truncate">{book.name}</span>
+      <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+        {contactCount}
+      </span>
+    </button>
+  );
+}
@@ -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;
@@ -55,6 +64,7 @@ interface EmailComposerProps {
    fromEmail?: string;
    fromName?: string;
    identityId?: string;
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>;
  }) => void | Promise<void>;
  onClose?: () => void;
  onDiscardDraft?: (draftId: string) => void;
@@ -123,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;
  };
@@ -155,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 }>({});
@@ -198,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);
@@ -357,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(', ') + ', ');
      }
@@ -372,7 +386,7 @@ export function EmailComposer({
        setShowBcc(true);
      }
    } else {
-      setBody((prev) => filledBody + prev);
+      setBody((prev) => htmlBody + prev);
    }

    if (template.identityId) {
@@ -384,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);
@@ -435,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));
@@ -501,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;
    }

@@ -526,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
@@ -541,7 +565,7 @@ export function EmailComposer({
      const savedDraftId = await client.createDraft(
        toAddresses,
        subject || t('no_subject'),
-        body,
+        htmlToPlainText(body),
        ccAddresses,
        bccAddresses,
        currentIdentity?.id,
@@ -605,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 => {
@@ -648,23 +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;
-    }
-
-    // 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)}`;
@@ -675,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
@@ -794,6 +797,11 @@ export function EmailComposer({
        await sendRawEmail(client, payload, currentIdentity.id);
      } else {
        // Standard JMAP send path
+        // Collect uploaded attachment blobIds for the send request
+        const uploadedAttachments = attachments
+          .filter(att => att.blobId && !att.uploading && !att.error)
+          .map(att => ({ blobId: att.blobId!, name: att.file.name, type: att.file.type || 'application/octet-stream', size: att.file.size }));
+
        await onSend?.({
          to: toAddresses,
          cc: ccAddresses,
@@ -805,6 +813,7 @@ export function EmailComposer({
          fromEmail,
          fromName: currentIdentity?.name || undefined,
          identityId: currentIdentity?.id,
+          attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined,
        });
      }

@@ -865,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}
@@ -1085,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>

@@ -28,6 +28,7 @@ import {
  Folder,
  ShieldAlert,
  ShieldCheck,
+  EditIcon,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
@@ -60,6 +61,7 @@ interface EmailContextMenuProps {
  onMoveToMailbox?: (mailboxId: string) => void;
  onMarkAsSpam?: () => void;
  onUndoSpam?: () => void;
+  onEditDraft?: () => void;
  // Batch actions
  onBatchMarkAsRead?: (read: boolean) => void;
  onBatchDelete?: () => void;
@@ -126,12 +128,14 @@ export function EmailContextMenu({
  onBatchMoveToMailbox,
  onBatchMarkAsSpam,
  onBatchUndoSpam,
+  onEditDraft,
 }: EmailContextMenuProps) {
  const t = useTranslations("context_menu");
  const tColor = useTranslations("email_viewer.color_tag");
  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
  const isUnread = !email.keywords?.$seen;
  const isStarred = email.keywords?.$flagged;
+  const isDraft = email.keywords?.['$draft'] === true;
  const currentColor = getCurrentColor(email.keywords);
  const showBatchActions = isMultiSelect && selectedCount > 1;
  const isInJunkFolder = currentMailboxRole === 'junk';
@@ -188,6 +192,18 @@ export function EmailContextMenu({
        </ContextMenuHeader>
      )}

+      {/* Edit Draft - only for single draft emails */}
+      {!showBatchActions && isDraft && onEditDraft && (
+        <>
+          <ContextMenuItem
+            icon={EditIcon}
+            label={t("edit_draft")}
+            onClick={() => handleAction(onEditDraft)}
+          />
+          <ContextMenuSeparator />
+        </>
+      )}
+
      {/* Single email actions - Reply, Reply All, Forward */}
      {!showBatchActions && (
        <>
@@ -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>
+  );
+}
@@ -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>
  );
 }
@@ -37,6 +37,7 @@ interface EmailListProps {
  onMoveToMailbox?: (emailId: string, mailboxId: string) => void;
  onMarkAsSpam?: (email: Email) => void;
  onUndoSpam?: (email: Email) => void;
+  onEditDraft?: (email: Email) => void;
 }

 export function EmailList({
@@ -57,6 +58,7 @@ export function EmailList({
  onMarkAsSpam,
  onUndoSpam,
  onMoveToMailbox,
+  onEditDraft,
 }: EmailListProps) {
  const t = useTranslations('email_list');
  const { client } = useAuthStore();
@@ -356,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">
@@ -420,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>
                );
@@ -467,6 +475,7 @@ export function EmailList({
          onMoveToMailbox={(mailboxId) => onMoveToMailbox?.(contextMenu.data!.id, mailboxId)}
          onMarkAsSpam={() => onMarkAsSpam?.(contextMenu.data!)}
          onUndoSpam={() => onUndoSpam?.(contextMenu.data!)}
+          onEditDraft={() => onEditDraft?.(contextMenu.data!)}
          onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
          onBatchDelete={() => client && batchDelete(client)}
          onBatchMoveToMailbox={(mailboxId) => client && batchMoveToMailbox(client, mailboxId)}
@@ -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);
+  },
+});
@@ -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>
+  );
+}
@@ -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";
@@ -316,7 +317,14 @@ function EmailCard({

      if (email.htmlBody?.[0]?.partId && email.bodyValues[email.htmlBody[0].partId]) {
        htmlContent = email.bodyValues[email.htmlBody[0].partId].value;
-        useHtmlVersion = !!htmlContent;
+        // Prefer textBody when HTML is auto-generated minimal wrapper (no rich formatting).
+        // Server-generated HTML from text/plain emails often lacks <br> tags, collapsing newlines.
+        const hasTextBody = email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId];
+        if (hasTextBody && htmlContent) {
+          useHtmlVersion = hasMeaningfulHtmlBody(htmlContent);
+        } else {
+          useHtmlVersion = !!htmlContent;
+        }
      }

      if (useHtmlVersion && htmlContent) {
@@ -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 && (
@@ -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)}
          />
@@ -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">
@@ -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);
@@ -2,7 +2,7 @@

 import { useEffect, useState, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
-import { X, Mail, Pencil, Trash2, Plus, AlertTriangle } from 'lucide-react';
+import { X, Mail, Pencil, Trash2, Plus, AlertTriangle, Star } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
@@ -19,6 +19,12 @@ import { toast } from '@/stores/toast-store';
 import { useFocusTrap } from '@/hooks/use-focus-trap';
 import { useConfirmDialog } from '@/hooks/use-confirm-dialog';

+function emailMatchesUsername(email: string, username: string): boolean {
+  if (email === username) return true;
+  if (!username.includes('@') && email.split('@')[0] === username) return true;
+  return false;
+}
+
 interface IdentityFormData {
  name: string;
  email: string;
@@ -39,6 +45,8 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr

  const client = useAuthStore((state) => state.client);
  const identities = useIdentityStore((state) => state.identities);
+  const preferredPrimaryId = useIdentityStore((state) => state.preferredPrimaryId);
+  const setPreferredPrimary = useIdentityStore((state) => state.setPreferredPrimary);
  const syncIdentities = useSyncIdentities();

  const [editingId, setEditingId] = useState<string | null>(null);
@@ -52,11 +60,26 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
    try {
      const serverIdentities = await client.getIdentities();
      const username = useAuthStore.getState().username;
+      const preferredPrimaryId = useIdentityStore.getState().preferredPrimaryId;
      const sorted = [...serverIdentities].sort((a, b) => {
-        const aMatch = a.email === username ? -1 : 0;
-        const bMatch = b.email === username ? -1 : 0;
-        return aMatch - bMatch;
+        const aMatch = emailMatchesUsername(a.email, username || '');
+        const bMatch = emailMatchesUsername(b.email, username || '');
+        if (aMatch && !bMatch) return -1;
+        if (!aMatch && bMatch) return 1;
+        if (aMatch && bMatch) {
+          if (!a.mayDelete && b.mayDelete) return -1;
+          if (a.mayDelete && !b.mayDelete) return 1;
+        }
+        return 0;
      });
+      // Move preferred primary to front if set
+      if (preferredPrimaryId) {
+        const idx = sorted.findIndex((id) => id.id === preferredPrimaryId);
+        if (idx > 0) {
+          const [preferred] = sorted.splice(idx, 1);
+          sorted.unshift(preferred);
+        }
+      }
      useIdentityStore.getState().setIdentities(sorted);
      syncIdentities();
    } catch (error) {
@@ -168,6 +191,15 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
    }
  }, [client, refreshIdentities, t, tNotif, confirmDialog]);

+  const handleSetPrimary = useCallback((identity: Identity) => {
+    setPreferredPrimary(identity.id);
+    // Re-sort: move the preferred identity to the front
+    const reordered = [identity, ...identities.filter((id) => id.id !== identity.id)];
+    useIdentityStore.getState().setIdentities(reordered);
+    syncIdentities();
+    toast.success(tNotif('identity_set_primary'));
+  }, [identities, setPreferredPrimary, syncIdentities, tNotif]);
+
  if (!isOpen) return null;

  return (
@@ -281,6 +313,17 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr

                      {/* Actions */}
                      <div className="flex items-center gap-2">
+                        {identities[0]?.id !== identity.id && identities.length > 1 && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleSetPrimary(identity)}
+                            disabled={!!editingId || isCreating}
+                            title={t('set_as_primary')}
+                          >
+                            <Star className="w-4 h-4" />
+                          </Button>
+                        )}
                        <Button
                          variant="ghost"
                          size="sm"
@@ -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'
          )}
@@ -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>
@@ -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
+      )}
+    </>
+  );
+}
@@ -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>
@@ -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>>({});

@@ -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>
@@ -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}</>;
+}
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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) => {
@@ -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')}
@@ -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
@@ -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 && (
@@ -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>
  );
@@ -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
@@ -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")}
@@ -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
+  );
+}
@@ -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>
+  );
+}
@@ -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;
+}
@@ -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"
@@ -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",
    ],
  },
 ];
@@ -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
    }
@@ -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,
        });
@@ -239,9 +239,10 @@ export function useTimeGridInteractions({
      clearTimeout(clickTimerRef.current);
      clickTimerRef.current = null;
    }
-    const key = format(day, "yyyy-MM-dd");
-    setQuickCreate({ dayKey: key, day, hour, top: hour * hourHeight });
-  }, [hourHeight]);
+    const d = new Date(day);
+    d.setHours(hour, 0, 0, 0);
+    onCreateRange(d);
+  }, [onCreateRange]);

  const handleQuickCreateSubmit = useCallback(async (title: string) => {
    if (!quickCreate) return;
@@ -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' });
+  });
+});
@@ -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'],
        ],
      });

@@ -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);
+    });
+  });
+});
@@ -1,3 +1,4 @@
+// @vitest-environment node
 import fs from 'fs';
 import path from 'path';
 import { describe, expect, it } from 'vitest';
@@ -226,7 +226,7 @@ describe("parseVCard", () => {
    expect(result).toHaveLength(1);
    const card = result[0];

-    expect(card.gender).toEqual({ sex: "F", identity: "Female" });
+    expect(card.speakToAs).toEqual({ grammaticalGender: "feminine", pronouns: { p0: { pronouns: "Female" } } });
    expect(card.media?.m0).toEqual({
      kind: "logo",
      uri: "https://example.com/logo.png",
@@ -331,7 +331,7 @@ describe("generateVCard", () => {
        components: [{ kind: "given", value: "Jane" }],
        isOrdered: true,
      },
-      gender: { sex: "F", identity: "Female" },
+      speakToAs: { grammaticalGender: "feminine", pronouns: { p0: { pronouns: "Female" } } },
      media: {
        m0: { kind: "logo", uri: "https://example.com/logo.png", mediaType: "image/png" },
        m1: { kind: "sound", uri: "https://example.com/sound.ogg", mediaType: "audio/ogg" },
@@ -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();
+}
@@ -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;
@@ -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;
+  }
+}
@@ -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}`;
+}
@@ -0,0 +1,7 @@
+export function replaceWindowLocation(url: string): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.location.replace(url);
+}
@@ -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;
+}
@@ -79,6 +79,8 @@ export function buildWeekSegments(events: CalendarEvent[], weekDays: Date[]): Ca
    if (left.event.showWithoutTime !== right.event.showWithoutTime) {
      return left.event.showWithoutTime ? -1 : 1;
    }
+    const timeDiff = new Date(left.event.start).getTime() - new Date(right.event.start).getTime();
+    if (timeDiff !== 0) return timeDiff;
    return (left.event.title || "").localeCompare(right.event.title || "");
  });

@@ -140,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];
+}
@@ -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') } },
+    });
+  }
+}
@@ -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(),
+  });
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Linus Rath	5530cfe7fe	Merge dev into main - version 1.4.7	2026-03-21 20:46:33 +01:00
Linus Rath	31eee4bab9	chore: bump version to 1.4.7	2026-03-21 20:45:57 +01:00
Linus Rath	f04b97d52a	fix: handle updates and deletions for synthetic JMAP IDs in calendar events	2026-03-21 20:45:23 +01:00
Linus Rath	df272e38ef	feat: add resizable image component and rich text editor with image upload support	2026-03-21 20:45:23 +01:00
Linus Rath	a835af2d71	fix: update .env.example to clarify Docker volume mounting for settings data directory	2026-03-21 20:45:22 +01:00
Linus Rath	30284859c7	feat: add task management features to calendar	2026-03-21 20:45:22 +01:00
Linus Rath	64c3d7e384	fix: update getContacts test to use mockFetchOnce	2026-03-21 20:45:20 +01:00
Linus Rath	e6d09546b1	fix: extend CryptoEngine to support legacy algorithms and integrate with LinerEngine for decryption	2026-03-21 20:45:20 +01:00
Linus Rath	83a0a1e235	feat: add non-interactive SSO login flow for embedded/iframe deployments (closes #69 )	2026-03-21 20:45:19 +01:00
Linus Rath	7c3c3b5f7b	fix: handle synthetic ID errors when updating calendar events with fallback to destroy and recreate	2026-03-21 20:45:18 +01:00
Linus Rath	8b1b3ad57b	fix: update iframe sandbox attributes to allow popups to escape sandbox	2026-03-21 20:45:18 +01:00
Linus Rath	afefbb8d46	feat: add expanded visual view for filter rules - 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	2026-03-21 20:45:17 +01:00
Linus Rath	4c2d185be4	fix: refactor logout to use synchronous flow with full page redirect - Rewrite logout() from async to synchronous to prevent React re-renders with stale state - Replace router.push('/login') with redirectToLogin() (window.location.replace) in all page auth guards for reliable navigation in Edge/Safari - Add performFullLogout() helper that clears auth state, feature stores, and localStorage - Fix persist middleware partialize to return {} when not authenticated, preventing state resurrection - Use keepalive fetch for background cookie/token cleanup so redirect fires immediately - Remove unused useRouter imports from page.tsx and contacts/page.tsx - Simplify all page logout handlers to directly call logout() Fixes #63	2026-03-21 20:45:17 +01:00
Linus Rath	c73940e22a	feat: add option to show week numbers in mini-calendar	2026-03-21 20:45:16 +01:00
Linus Rath	09eda86d3f	fix: add missing translation keys across all locales	2026-03-21 20:45:15 +01:00
Linus Rath	0d28d811a8	feat: support uploading folders via drag-and-drop and toolbar button	2026-03-21 20:45:14 +01:00
Linus RathandGitHub	45a485a1fa	Merge pull request #71 from xnilsit/workflow-on-release feat: re-add release workflow	2026-03-21 11:20:58 +01:00
xnilsit	bc202498d5	feat: re-add release workflow	2026-03-21 11:06:14 +01:00
Linus RathandGitHub	721556e777	Update version badge to 1.4.6	2026-03-21 03:29:43 +01:00
Linus RathandGitHub	8c9cf3a66b	Bump app version from 1.4.3 to 1.4.6	2026-03-21 03:29:17 +01:00
Linus Rath	b88026de82	Merge dev into main - version 1.4.6	2026-03-21 03:08:47 +01:00
Linus Rath	6ed8ae5812	chore: bump version to 1.4.6	2026-03-21 03:08:19 +01:00
Linus Rath	089583a9ef	feat(contacts): add no-category filter, drag-drop to category, and category combo box - Add 'No Category' sidebar item to filter uncategorized contacts - Categories section now always visible (not just when keywords exist) - Add drag-and-drop support on category items in sidebar to assign keywords - Fix effectAllowed mismatch (move -> copyMove) for category drop targets - Replace plain text categories input with combo box in contact edit form - Shows existing categories as clickable suggestions - Displays assigned categories as removable badges - Supports adding new categories inline - Add translations for all 8 locales	2026-03-21 03:04:36 +01:00
Linus Rath	2d834213ee	feat: enhance certificate extraction and legacy PBE support in crypto engine	2026-03-21 02:48:12 +01:00
Linus Rath	439a4dbe8a	feat: add hover actions for emails and update settings for quick actions	2026-03-21 02:31:42 +01:00
Linus Rath	8350bad2a6	fix: adjust padding and size of sidebar buttons for improved layout	2026-03-21 02:06:52 +01:00
Linus Rath	2d56cc9be9	feat: implement keyword migration functionality and update related components	2026-03-21 01:58:48 +01:00
Linus Rath	2547c10060	feat: add demo data for emails, files, filters, identities, mailboxes, vacation responses, and JMAP client interface - Created demo emails with various states (inbox, sent, drafts, trash, etc.) in `emails.ts`. - Added demo file nodes representing directories and files in `files.ts`. - Implemented demo Sieve capabilities and scripts in `filters.ts`. - Defined demo identities for users in `identities.ts`. - Established demo mailboxes with permissions and counts in `mailboxes.ts`. - Created a demo vacation response in `vacation.ts`. - Introduced a comprehensive JMAP client interface in `client-interface.ts` to standardize interactions with the JMAP API.	2026-03-21 01:38:42 +01:00
Linus RathandGitHub	01779fa59e	Update SHA tag prefix in docker-publish.yml Fix the tag prefix format for SHA in Docker publish workflow.	2026-03-21 00:15:01 +01:00
Linus RathandGitHub	fc38427ed0	Merge pull request #68 from xnilsit/main feat: add separate docker build for releases	2026-03-21 00:08:49 +01:00
xnilsit	3cbfb70860	feat: also build images for dev branch	2026-03-21 00:08:32 +01:00
xnilsit	c32b740dac	chore: rename release workflow	2026-03-20 23:11:41 +01:00
xnilsit	a02091a7ad	fix: don't tag releases with hash	2026-03-20 22:48:37 +01:00
xnilsit	bc311adf6a	feat: add separate docker build for releases	2026-03-20 22:35:37 +01:00
Linus Rath	8aca1623f4	Merge dev into main - version 1.4.5 (build fix)	2026-03-20 18:17:53 +01:00
Linus Rath	a8be40579e	fix: add missing showTimeInMonthView and showOnMobile type definitions to settings store	2026-03-20 18:17:31 +01:00
Linus Rath	705b942800	Merge dev into main - version 1.4.5	2026-03-20 18:10:08 +01:00
Linus Rath	d68b81e6b8	chore: bump version to 1.4.5	2026-03-20 18:10:00 +01:00
Linus Rath	616e4d018d	fix: expand recurring events in CalendarEvent/query (closes #65 ) Add expandRecurrences: true to CalendarEvent/query when a date range filter is provided, so the JMAP server returns individual occurrences of recurring events instead of only the master event.	2026-03-20 17:53:30 +01:00
Linus Rath	68e141b787	feat: add mobile visibility toggle for sidebar apps and update related components	2026-03-20 17:44:26 +01:00
Linus Rath	1e6f5e2c8c	fix: correct JSX syntax in CalendarToolbar component	2026-03-20 17:25:01 +01:00
Linus Rath	9495b34430	feat: add prev/next navigation buttons and date label to desktop calendar toolbar Closes #59	2026-03-20 17:23:22 +01:00
Linus Rath	65fc489b9c	feat: add pending event preview functionality to calendar views and event modal	2026-03-20 17:21:44 +01:00
Linus Rath	bd686c092c	fix: validate event start field when fetching calendar events	2026-03-20 17:11:36 +01:00
Linus Rath	6cff98ddb8	feat: implement pagination for fetching contacts and add maxObjectsInGet capability	2026-03-20 16:47:27 +01:00
Linus Rath	dcc35335f5	feat: add setting to show event start time in month view	2026-03-20 16:42:07 +01:00
Linus Rath	8a54ae2456	feat: add NotFound component to handle 404 errors and redirect unauthenticated users	2026-03-20 16:31:57 +01:00
Linus Rath	e26654a005	fix: enhance account switching logic and clear stores on account change	2026-03-20 16:29:32 +01:00
Linus Rath	c1c06c68bb	fix: improve draft handling in email composer and enhance session cookie verification logic	2026-03-20 15:45:25 +01:00
Linus Rath	74cf642182	Merge branch 'dev'	2026-03-20 00:16:41 +01:00
Linus Rath	c5b1731a63	feat: add attachment position setting in email settings - Introduced a new setting for attachment position in email settings, allowing users to choose between displaying attachments beside the sender or below the header. - Updated the settings store to include the new attachment position type and default value. - Added translations for the new setting in multiple languages (de, en, es, fr, it, ja, nl, pt).	2026-03-19 21:14:18 +01:00
Linus Rath	40cf164df3	fix: update calendar agenda view to auto-scroll to today's events and ensure today's date is included in the groups	2026-03-19 19:25:34 +01:00
Linus Rath	ff56245db8	fix: improve account restoration logic and handle stale accounts in auth store	2026-03-19 19:21:08 +01:00
Linus Rath	9b4de4d152	fix: remove claude directory from .dockerignore and .gitignore	2026-03-19 19:06:31 +01:00
Linus Rath	0c9e60db8b	fix: update flatted to 3.4.2	2026-03-19 19:01:40 +01:00
Linus Rath	def8ee89fa	Merge branch 'dev'	2026-03-19 18:57:57 +01:00
Linus Rath	e7e07a38d7	fix: use native ARM runners instead of QEMU for Docker builds	2026-03-19 18:57:17 +01:00
Linus Rath	a009e5ae32	fix: enhance health check functionality with detailed memory diagnostics and stable liveness probe	2026-03-19 18:50:59 +01:00
Linus Rath	b141240fa3	Merge dev into main - version 1.4.4	2026-03-19 18:18:23 +01:00
Linus Rath	44896dee3e	chore: bump version to 1.4.4	2026-03-19 18:12:16 +01:00
Linus Rath	a5c5fa6669	fix: improve mailbox role management by ensuring roles are cleared from all mailboxes when reassigning	2026-03-19 18:00:09 +01:00
Linus Rath	95af61c4be	fix: enhance account management by updating existing accounts and improving session handling	2026-03-19 17:47:18 +01:00
Linus Rath	34e495dde3	Fix email signature rendering	2026-03-19 17:20:39 +01:00
Linus Rath	0b721661e9	Fix logout redirects and unauthenticated home rendering	2026-03-19 17:01:27 +01:00
Linus Rath	9fa851a674	feat: implement CalDAV discovery API and enhance calendar ID handling	2026-03-19 16:56:00 +01:00
Linus Rath	41f91244d9	Fix duplicate calendar edits and prevent double-save submissions	2026-03-19 14:40:16 +01:00
Linus Rath	77514bd054	fix: RFC 9553 compliance for contacts (birthday, addresses)	2026-03-19 13:33:53 +01:00
Linus RathandGitHub	4501b3894b	Merge pull request #51 from bulwarkmail/dev v1.4.3 — Multi-Account Support, Contact Improvements, and Settings Encryption	2026-03-19 10:19:21 +01:00
Linus Rath	2edf2fab89	chore: bump version to 1.4.3	2026-03-19 10:16:47 +01:00
Linus Rath	d493bb17dc	feat: implement account switcher component and state management - Add AccountSwitcher component for managing user accounts with UI for switching, adding, and logging out. - Create account state manager to handle snapshots of account-specific states for efficient switching. - Introduce utility functions for account management, including ID generation and avatar color assignment. - Implement Zustand store for account management, supporting addition, removal, and state retrieval of accounts.	2026-03-19 10:08:57 +01:00
Linus Rath	234129397d	feat: improve error logging and enhance settings sync functionality	2026-03-19 08:54:33 +01:00
Linus Rath	9b3a47f9be	feat: enhance contact management with import functionality and keyword filtering	2026-03-19 08:38:59 +01:00
Linus Rath	0fcc932e66	fix: adjust popover alignment to the right	2026-03-19 07:44:11 +01:00
Linus Rath	0fe8e81dc7	Merge branch 'dev'	2026-03-19 01:43:11 +01:00
Linus Rath	267f7257cf	chore: remove scripts directory (moved to local-data)	2026-03-19 01:43:11 +01:00
Linus Rath	fb8c9db716	chore: bump version to 1.4.2	2026-03-19 01:38:23 +01:00
Linus Rath	2793d4b4af	feat: add calendar task list view and shared calendar grouping - Add TaskListView component for displaying calendar tasks - Group shared calendars by account in sidebar panel - Add task view toggle to calendar toolbar - Extend calendar store with task-related state	2026-03-19 01:21:43 +01:00
Linus Rath	96c2ee9e13	chore: remove scripts already moved to local-data	2026-03-19 01:21:36 +01:00
Linus Rath	af115e3245	feat: add address book directories with drag-and-drop and editor picker - Show address books in sidebar organized by personal directories and shared accounts, replacing the flat shared accounts list - Make contact list items draggable with multi-select support using native HTML5 drag-and-drop (application/x-contact-ids MIME type) - Add drop targets on sidebar address book items with visual feedback - Add moveContactToAddressBook store method supporting same-account updates and cross-account create+delete moves - Add address book picker dropdown in contact create/edit form - Update ContactCategory type from sharedAccountId to addressBookId - Add address_books translations to all 8 locales - Fix contact-list-item tests for new selectedContactIds prop	2026-03-19 01:13:34 +01:00
Linus Rath	fc79bf4f9b	fix: resolve default sender to canonical identity on local-part login When authenticating with a local-part username (e.g. 'user' instead of 'user@domain.tld') on Stalwart 0.15.x, the default sender could resolve to an alias identity instead of the canonical mailbox address. - Add emailMatchesUsername() helper that matches local-part usernames against full email addresses (e.g. 'user' matches 'user@domain.tld') - Prefer canonical identities (mayDelete=false) over aliases as tiebreaker - Add preferredPrimaryId to identity store (persisted to localStorage) so users can explicitly set their default sender - Add 'Set as Primary' star button in identity manager modal - Fix sendEmail() fallback identity resolution for local-part usernames - Add i18n strings for all 8 supported locales Fixes #43	2026-03-18 20:05:35 +01:00
Linus Rath	b844b88733	fix: enhance calendar event handling with IMIP invitation and cancellation support	2026-03-18 19:59:47 +01:00
Linus Rath	bcdde9f454	fix: add support for email attachments in sendEmail functionality and update related components	2026-03-18 18:51:20 +01:00
Linus Rath	bb72ac92ae	fix: implement draft editing functionality across email components and add localization keys	2026-03-18 18:39:46 +01:00
Linus Rath	6457b27125	fix: enhance calendar event creation with double-click support and modal date handling	2026-03-18 18:13:33 +01:00
Linus Rath	ef562bcaad	fix: add email export/import localization keys for multiple languages	2026-03-18 18:00:51 +01:00
Linus Rath	9fdbb62205	fix: update gender handling to use speakToAs structure and adjust localization keys	2026-03-18 17:55:29 +01:00
Linus Rath	2edbf379e2	fix: implement unwrapping of embedded message/rfc822 attachments and enhance HTML body validation	2026-03-18 17:32:25 +01:00
Linus Rath	cdc521b693	fix: add time-based sorting for events in buildWeekSegments function	2026-03-18 17:02:37 +01:00
Linus Rath	e7249f8bd3	Merge dev into main	2026-03-18 16:58:00 +01:00
Linus Rath	a57492d7c0	fix: refactor overflow handling in EmailViewer component to use hidden priorities and layout effects	2026-03-18 16:56:24 +01:00
Linus Rath	2b4ff2f3de	fix: remove debugMode usage from EmailViewer component	2026-03-18 16:33:55 +01:00
Linus Rath	5a3f9faafe	fix: update dompurify to version 3.3.3 and elliptic to version 6.6.1, add undici override	2026-03-18 16:10:47 +01:00
Linus Rath	a74cd32364	Merge dev into main - version 1.4.1	2026-03-18 15:51:22 +01:00
Linus Rath	38c04099e2	Bump version to 1.4.1	2026-03-18 15:42:37 +01:00
Linus Rath	ae14e09f66	fix: enforce image and table styling	2026-03-18 15:40:08 +01:00
Linus Rath	ada356e440	fix: menu overvlow fixed with submenu support for move and tag actions	2026-03-18 15:35:17 +01:00
Linus Rath	a886edda6f	fix: deduplicate toolbar and fix overflow detection Extract shared renderToolbarItems() function to eliminate ~850 lines of duplicated toolbar code between 'top' and 'below-subject' positions. Add overflow support to Reply, Reply All, and Forward buttons with data-overflow-item attributes and corresponding More menu entries. Fix overflow detection algorithm: temporarily disable flex-shrink on child groups during measurement so scrollWidth reflects natural widths instead of flex-compressed values. Add overflow-hidden to toolbar container to prevent visual overflow during recalculation.	2026-03-18 15:29:16 +01:00
Linus Rath	ff97d8bc4c	feat: enhance TNEF parsing with detailed debug logging for better traceability	2026-03-18 15:00:53 +01:00
Linus Rath	b1db100c3a	feat: enhance email body handling by prioritizing textBody for minimal HTML and expanding JMAPClient properties	2026-03-18 14:53:08 +01:00
Linus Rath	19584cfef6	feat: add email import/export functionality with .eml support	2026-03-18 14:44:12 +01:00
Linus Rath	8a2ef5a6c5	feat: integrate webcrypto-liner for legacy algorithm support in S/MIME handling	2026-03-18 14:29:29 +01:00
@@ -1 +1 @@
 .4.0
 .4.7