Merge dev into main - version 1.4.5

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.

.dockerignore

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

.github/workflows/docker-publish.yml

@@ -20,9 +20,20 @@ on:
     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 +42,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 +56,75 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: |
-            ghcr.io/${{ github.repository }}
+          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,enable={{is_default_branch}}
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=sha,prefix=
 
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.gitignore

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

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 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

VERSION

@@ -1 +1 @@
-1.4.4
+1.4.5

app/[locale]/calendar/page.tsx

@@ -7,7 +7,7 @@ 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";
@@ -25,7 +25,7 @@ import { CalendarDayView } from "@/components/calendar/calendar-day-view";
 import { CalendarAgendaView } from "@/components/calendar/calendar-agenda-view";
 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";
@@ -82,6 +82,7 @@ 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 hasFetched = useRef(false);
 
   // Sidebar resize state
@@ -156,11 +157,15 @@ 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"),
         };
+      }
     }
   }, [selectedDate, normalizedViewMode, firstDayOfWeek]);
 
@@ -264,12 +269,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(() => {
@@ -611,7 +617,7 @@ export default function CalendarPage() {
 
   const visibleEvents = useMemo(() =>
     events.filter((e) => {
-      if (!e.calendarIds) return false;
+      if (!e.start || !e.calendarIds) return false;
       const calIds = Object.keys(e.calendarIds);
       return calIds.some((id) => selectedCalendarIds.includes(id));
     }),
@@ -644,6 +650,7 @@ export default function CalendarPage() {
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
             />
           );
         case "week":
@@ -660,6 +667,7 @@ export default function CalendarPage() {
               firstDayOfWeek={firstDayOfWeek}
               timeFormat={timeFormat}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
             />
           );
         case "day":
@@ -674,6 +682,7 @@ export default function CalendarPage() {
               onCreateAtTime={openCreateModal}
               timeFormat={timeFormat}
               isMobile={isMobile}
+              pendingPreview={pendingPreview}
             />
           );
         case "agenda":
@@ -704,7 +713,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)' }}>
@@ -767,7 +776,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}
@@ -804,7 +813,8 @@ 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}
               />
@@ -827,13 +837,15 @@ export default function CalendarPage() {
 
       {/* Mobile Bottom Navigation */}
       {isMobile && (
-        <NavigationRail
-          orientation="horizontal"
-          onManageApps={handleManageApps}
-          onInlineApp={handleInlineApp}
-          onCloseInlineApp={closeInlineApp}
-          activeAppId={inlineApp?.id ?? null}
-        />
+        <div className="shrink-0">
+          <NavigationRail
+            orientation="horizontal"
+            onManageApps={handleManageApps}
+            onInlineApp={handleInlineApp}
+            onCloseInlineApp={closeInlineApp}
+            activeAppId={inlineApp?.id ?? null}
+          />
+        </div>
       )}
 
       {detailEvent && detailAnchorRect && (

app/[locale]/contacts/page.tsx

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

app/[locale]/page.tsx

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

app/api/health/route.ts

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

app/api/settings/route.ts

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

app/globals.css

@@ -20,6 +20,8 @@
   --color-accent-foreground: #1e40af;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #ffffff;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
 
   /* Settings variables */
   --font-size-base: 16px;
@@ -50,6 +52,8 @@
   --color-accent-foreground: #dbeafe;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #fafafa;
+  --color-popover: #1c1c1c;
+  --color-popover-foreground: #fafafa;
 }
 
 @theme inline {
@@ -68,6 +72,8 @@
   --color-accent-foreground: var(--color-accent-foreground);
   --color-destructive: var(--color-destructive);
   --color-destructive-foreground: var(--color-destructive-foreground);
+  --color-popover: var(--color-popover);
+  --color-popover-foreground: var(--color-popover-foreground);
 }
 
 * {

app/not-found.tsx

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

components/calendar/calendar-agenda-view.tsx

@@ -1,8 +1,8 @@
 "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";
@@ -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,6 +134,11 @@ 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 = getPrimaryCalendarId(ev);
@@ -176,6 +204,7 @@ export function CalendarAgendaView({
               );
             })}
           </div>
+          )}
         </div>
       ))}
     </div>

components/calendar/calendar-day-view.tsx

@@ -2,13 +2,14 @@
 
 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 { EventCard, parseDuration } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
 import { formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
+import type { PendingEventPreview } from "./event-modal";
 
 interface CalendarDayViewProps {
   selectedDate: Date;
@@ -20,6 +21,7 @@ interface CalendarDayViewProps {
   onCreateAtTime: (date: Date, endDate?: Date) => void;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }
 
 const HOUR_HEIGHT = 64;
@@ -35,6 +37,7 @@ export function CalendarDayView({
   onCreateAtTime,
   timeFormat = "24h",
   isMobile,
+  pendingPreview,
 }: CalendarDayViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -274,6 +277,34 @@ export function CalendarDayView({
                 </div>
               </div>
             )}
+
+            {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, selectedDate) && (
+              (() => {
+                const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
+                const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                const durationMin = Math.max(15, endMin - startMin);
+                const cal = calendars.find(c => c.id === pendingPreview.calendarId);
+                const color = cal?.color || "hsl(var(--primary))";
+                return (
+                  <div
+                    className="absolute left-2 right-2 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                    style={{
+                      top: (startMin / 60) * HOUR_HEIGHT,
+                      height: Math.max(24, (durationMin / 60) * HOUR_HEIGHT),
+                      borderColor: color,
+                      backgroundColor: `${color}10`,
+                    }}
+                  >
+                    <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                      {pendingPreview.title}
+                    </div>
+                    <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                      {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                    </div>
+                  </div>
+                );
+              })()
+            )}
           </div>
         </div>
       </div>

components/calendar/calendar-month-view.tsx

@@ -12,6 +12,7 @@ import { buildWeekSegments, getEventDayBounds, getPrimaryCalendarId } from "@/li
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useCalendarStore } from "@/stores/calendar-store";
+import type { PendingEventPreview } from "./event-modal";
 import { toast } from "@/stores/toast-store";
 
 interface CalendarMonthViewProps {
@@ -25,6 +26,7 @@ interface CalendarMonthViewProps {
   onCreateAtTime?: (date: Date) => void;
   firstDayOfWeek?: number;
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }
 
 export function CalendarMonthView({
@@ -38,6 +40,7 @@ export function CalendarMonthView({
   onCreateAtTime,
   firstDayOfWeek = 1,
   isMobile,
+  pendingPreview,
 }: CalendarMonthViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -194,31 +197,63 @@ 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 = 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" />
-                        )}
-                      </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) => {

components/calendar/calendar-toolbar.tsx

@@ -136,6 +136,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

components/calendar/calendar-week-view.tsx

@@ -11,6 +11,7 @@ import { QuickEventInput } from "./quick-event-input";
 import { buildWeekSegments, formatSnapTime, getEventDayBounds, getPrimaryCalendarId, layoutOverlappingEvents } from "@/lib/calendar-utils";
 import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
 import { useTimeGridInteractions } from "@/hooks/use-time-grid-interactions";
+import type { PendingEventPreview } from "./event-modal";
 
 interface CalendarWeekViewProps {
   selectedDate: Date;
@@ -24,6 +25,7 @@ interface CalendarWeekViewProps {
   firstDayOfWeek?: number;
   timeFormat?: "12h" | "24h";
   isMobile?: boolean;
+  pendingPreview?: PendingEventPreview | null;
 }
 
 const HOUR_HEIGHT = 60;
@@ -41,6 +43,7 @@ export function CalendarWeekView({
   firstDayOfWeek = 1,
   timeFormat = "24h",
   isMobile,
+  pendingPreview,
 }: CalendarWeekViewProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -366,6 +369,34 @@ export function CalendarWeekView({
                       </div>
                     </div>
                   )}
+
+                  {pendingPreview && !pendingPreview.allDay && isSameDay(pendingPreview.start, day) && (
+                    (() => {
+                      const startMin = pendingPreview.start.getHours() * 60 + pendingPreview.start.getMinutes();
+                      const endMin = pendingPreview.end.getHours() * 60 + pendingPreview.end.getMinutes();
+                      const durationMin = Math.max(15, endMin - startMin);
+                      const cal = calendars.find(c => c.id === pendingPreview.calendarId);
+                      const color = cal?.color || "hsl(var(--primary))";
+                      return (
+                        <div
+                          className="absolute left-1 right-1 z-10 rounded-md pointer-events-none border-2 border-dashed overflow-hidden"
+                          style={{
+                            top: (startMin / 60) * HOUR_HEIGHT,
+                            height: Math.max(20, (durationMin / 60) * HOUR_HEIGHT),
+                            borderColor: color,
+                            backgroundColor: `${color}10`,
+                          }}
+                        >
+                          <div className="text-[10px] font-medium px-1.5 py-0.5 truncate" style={{ color }}>
+                            {pendingPreview.title}
+                          </div>
+                          <div className="text-[9px] px-1.5 opacity-70" style={{ color }}>
+                            {formatSnapTime(startMin, timeFormat)} – {formatSnapTime(startMin + durationMin, timeFormat)}
+                          </div>
+                        </div>
+                      );
+                    })()
+                  )}
                 </div>
               );
             })}

components/calendar/event-card.tsx

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

components/calendar/event-modal.tsx

@@ -20,6 +20,14 @@ 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[];
@@ -30,6 +38,7 @@ interface EventModalProps {
   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) {
@@ -219,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);

components/email/email-viewer.tsx

@@ -105,7 +105,7 @@ interface EmailViewerProps {
   onToggleStar?: () => void;
   onMarkAsRead?: (emailId: string, read: boolean) => void;
   onSetColorTag?: (emailId: string, color: string | null) => void;
-  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string, forceDownload?: boolean) => void;
   onQuickReply?: (body: string) => Promise<void>;
   onMarkAsSpam?: () => void;
   onUndoSpam?: () => void;
@@ -149,6 +149,42 @@ const getFileIcon = (name?: string, type?: string) => {
   return File;
 };
 
+const MIME_TYPE_LABELS: Record<string, string> = {
+  'application/pdf': 'Document.pdf',
+  'application/zip': 'Archive.zip',
+  'application/x-zip-compressed': 'Archive.zip',
+  'application/gzip': 'Archive.gz',
+  'application/x-rar-compressed': 'Archive.rar',
+  'application/x-7z-compressed': 'Archive.7z',
+  'application/msword': 'Document.doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Document.docx',
+  'application/vnd.ms-excel': 'Spreadsheet.xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Spreadsheet.xlsx',
+  'application/vnd.ms-powerpoint': 'Presentation.ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'Presentation.pptx',
+  'text/plain': 'Text.txt',
+  'text/html': 'Document.html',
+  'text/csv': 'Data.csv',
+  'application/json': 'Data.json',
+  'application/xml': 'Data.xml',
+  'application/octet-stream': 'Attachment',
+  'message/rfc822': 'Email.eml',
+};
+
+const getAttachmentDisplayName = (name: string | null | undefined, mimeType?: string): string => {
+  if (name) return name;
+  if (mimeType) {
+    const label = MIME_TYPE_LABELS[mimeType.toLowerCase()];
+    if (label) return label;
+    const sub = mimeType.split('/')[1];
+    if (sub) {
+      const clean = sub.replace(/^x-/, '').replace(/^vnd\./, '');
+      return `Attachment.${clean}`;
+    }
+  }
+  return 'Attachment';
+};
+
 const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
   if (!keywords) return null;
   for (const key of Object.keys(keywords)) {
@@ -837,6 +873,7 @@ export function EmailViewer({
   const tFiles = useTranslations('files');
   const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
   const mailAttachmentAction = useSettingsStore((state) => state.mailAttachmentAction);
+  const attachmentPosition = useSettingsStore((state) => state.attachmentPosition);
   const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
   const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
   const emailKeywords = useSettingsStore((state) => state.emailKeywords);
@@ -864,6 +901,8 @@ export function EmailViewer({
   const { identities, client } = useAuthStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const [showFullHeaders, setShowFullHeaders] = useState(false);
+  const [showAllBesideAttachments, setShowAllBesideAttachments] = useState(false);
+  const [showAllMobileAttachments, setShowAllMobileAttachments] = useState(false);
   const [allowExternalContent, setAllowExternalContent] = useState(false);
   const [hasBlockedContent, setHasBlockedContent] = useState(false);
   const [cidBlobUrls, setCidBlobUrls] = useState<Record<string, string>>({});
@@ -2394,6 +2433,44 @@ export function EmailViewer({
     setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
   }, [mailAttachmentAction, onDownloadAttachment]);
 
+  const handleEffectiveAttachmentDownload = useCallback((attachment: EffectiveAttachment) => {
+    if (attachment.blobId && onDownloadAttachment) {
+      onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type, true);
+      return;
+    }
+
+    if (attachment.tnefData) {
+      const buffer = attachment.tnefData.buffer.slice(
+        attachment.tnefData.byteOffset,
+        attachment.tnefData.byteOffset + attachment.tnefData.byteLength,
+      ) as ArrayBuffer;
+      const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+      const objectUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.href = objectUrl;
+      anchor.download = attachment.name || 'download';
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);
+      return;
+    }
+
+    if (!attachment.decryptedAttachment) return;
+    const bytes = getAttachmentContentBytes(attachment.decryptedAttachment);
+    if (!bytes || bytes.byteLength === 0) return;
+    const buffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+    const blob = new Blob([buffer], { type: attachment.type || 'application/octet-stream' });
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = objectUrl;
+    anchor.download = attachment.name || 'download';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+  }, [onDownloadAttachment]);
+
   // Iframe for rendering HTML emails true-to-life
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -2913,6 +2990,21 @@ export function EmailViewer({
           <Code className="w-4 h-4" />
         </Button>
 
+        {/* Dark/light mode toggle for HTML emails */}
+        {effectiveEmailContent.isHtml && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+            data-overflow-item
+            data-overflow-priority="11"
+            className="hidden sm:inline-flex h-8 gap-1.5"
+            title={isDark ? 'View in light mode' : 'View in dark mode'}
+          >
+            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          </Button>
+        )}
+
         {/* More menu — click-based */}
         <div ref={moreMenuRef} className="relative">
           <Button
@@ -3095,6 +3187,16 @@ export function EmailViewer({
                 <Code className="w-4 h-4" />
                 {t('view_source')}
               </button>
+              {/* Overflow: dark/light mode toggle */}
+              {effectiveEmailContent.isHtml && (
+                <button
+                  onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); setMoreMenuSub(null); }}
+                  className={cn("w-full px-3 py-1.5 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2", hiddenPriorities.has(11) ? "" : "sm:hidden")}
+                >
+                  {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+                  {isDark ? 'View in light mode' : 'View in dark mode'}
+                </button>
+              )}
               <div className="h-px bg-border my-1" />
               {/* Export email */}
               <button
@@ -3268,6 +3370,15 @@ export function EmailViewer({
             <Code className="w-5 h-5" />
             {t('view_source')}
           </button>
+          {effectiveEmailContent.isHtml && (
+            <button
+              onClick={() => { setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev); setMoreMenuOpen(false); }}
+              className="w-full px-4 py-3 min-h-[44px] text-sm text-left hover:bg-muted text-foreground flex items-center gap-3"
+            >
+              {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+              {isDark ? 'View in light mode' : 'View in dark mode'}
+            </button>
+          )}
           <div className="h-px bg-border my-1" />
           <button
             onClick={() => { handleExportEmail(); setMoreMenuOpen(false); }}
@@ -3341,7 +3452,7 @@ export function EmailViewer({
             )}
             <div className="flex-1 min-w-0">
               <div className="flex items-start gap-2">
-                <h1 className="text-lg lg:text-2xl font-bold text-foreground tracking-tight break-words min-w-0">
+                <h1 className="text-lg lg:text-xl font-bold text-foreground tracking-tight break-words min-w-0">
                   {email.subject || t('no_subject')}
                 </h1>
                 {/* Star inline with subject (top toolbar mode) */}
@@ -3365,19 +3476,24 @@ export function EmailViewer({
                     <span className={cn("w-2.5 h-2.5 rounded-full flex-shrink-0", dotClass)} title={kw!.label} />
                   ) : null;
                 })()}
-              </div>
-              <div className="flex items-center gap-2 lg:gap-3 mt-1 lg:mt-1.5 text-xs lg:text-sm text-muted-foreground">
-                <span className="flex items-center gap-1 lg:gap-1.5 whitespace-nowrap">
-                  <Clock className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                  {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                </span>
                 {isImportant && (
-                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap">
+                  <span className="px-1.5 lg:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0 self-center">
                     {t('important')}
                   </span>
                 )}
               </div>
             </div>
+            {/* Date/time on the right of subject row */}
+            <div className="flex-shrink-0 text-right">
+              <span className="text-xs lg:text-sm text-muted-foreground whitespace-nowrap">
+                {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
+              </span>
+              {email.size > 0 && (
+                <div className="text-xs text-muted-foreground/60">
+                  {formatFileSize(email.size)}
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -3408,13 +3524,14 @@ export function EmailViewer({
                 name={sender?.name}
                 email={sender?.email}
                 size="lg"
-                className="shadow-sm w-12 h-12 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
+                className="shadow-sm w-10 h-10 group-hover:ring-2 group-hover:ring-primary/30 transition-all"
               />
             </button>
 
-            <div className="flex-1 min-w-0">
-              {/* Sender line with email and badges */}
-              <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0 flex gap-4">
+              <div className="flex-1 min-w-0">
+              {/* Row 1: Sender name + badges */}
+              <div>
                 <div className="min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
                     <button
@@ -3425,103 +3542,80 @@ export function EmailViewer({
                       {sender?.name || sender?.email || t('unknown_sender')}
                     </button>
                     <EmailIdentityBadge email={email} identities={identities} />
+                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                      <UnsubscribeBanner
+                        listUnsubscribe={listHeaders.listUnsubscribe}
+                        senderEmail={email?.from?.[0]?.email || ''}
+                        onDismiss={() => {
+                          const messageId = email?.messageId || '';
+                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
+                          setDismissedUnsubBanners(newSet);
+                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
+                        }}
+                      />
+                    )}
                   </div>
-                  {sender?.email && (
-                    <div className="text-sm text-muted-foreground mt-0.5 flex items-center min-w-0">
-                      <span className="truncate">{sender.email}</span>
-                      {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                        <UnsubscribeBanner
-                          listUnsubscribe={listHeaders.listUnsubscribe}
-                          senderEmail={email?.from?.[0]?.email || ''}
-                          onDismiss={() => {
-                            const messageId = email?.messageId || '';
-                            const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                            setDismissedUnsubBanners(newSet);
-                            localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                          }}
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
-                {/* Date and size on the right */}
-                <div className="text-right flex-shrink-0">
-                  <div className="text-sm text-muted-foreground whitespace-nowrap">
-                    {formatDateTime(email.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' })}
-                  </div>
-                  {email.size > 0 && (
-                    <div className="text-xs text-muted-foreground/70 mt-0.5">
-                      {formatFileSize(email.size)}
-                    </div>
-                  )}
-                  {effectiveEmailContent.isHtml && (
-                    <button
-                      onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-                      className="inline-flex items-center rounded-full p-1 mt-1 text-muted-foreground/70 hover:text-foreground transition-colors hover:bg-muted"
-                      title={isDark ? 'View in light mode' : 'View in dark mode'}
-                    >
-                      {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-                    </button>
+                  {/* Email address under name */}
+                  {sender?.email && sender?.name && (
+                    <div className="text-sm text-muted-foreground mt-0.5 truncate">{sender.email}</div>
                   )}
                 </div>
               </div>
 
-              {/* Recipient section - separate line */}
-              <div className="mt-2 space-y-1">
+              {/* Row 2: Recipients + Show details */}
+              <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">{t('recipient_to_prefix')}</span>
+                  <>
+                    <span>{t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                     {email.to.length > 2 && (
                       <button
                         onClick={() => setShowFullHeaders(!showFullHeaders)}
-                        className="ml-1 text-blue-600 dark:text-blue-400 hover:underline text-sm"
+                        className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
                       >
                         {t('more_count', { count: email.to.length - 2 })}
                       </button>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.cc && email.cc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">CC:</span>
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
                     {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.cc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.cc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.cc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
-
                 {email.bcc && email.bcc.length > 0 && (
-                  <div className="flex flex-wrap items-center gap-1 text-sm">
-                    <span className="text-muted-foreground">{t('bcc')}:</span>
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>{t('bcc')}:</span>
                     {renderClickableRecipients(email.bcc, currentUserEmail, t, handleViewContactSidebar)}
                     {email.bcc.length > 2 && (
-                      <span className="text-muted-foreground text-sm">+{email.bcc.length - 2}</span>
+                      <span className="text-muted-foreground">+{email.bcc.length - 2}</span>
                     )}
-                  </div>
+                  </>
                 )}
+                <button
+                  onClick={() => setShowFullHeaders(!showFullHeaders)}
+                  className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors ml-1"
+                >
+                  {showFullHeaders ? (
+                    <>
+                      <ChevronUp className="w-3 h-3" />
+                      {t('hide_details')}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="w-3 h-3" />
+                      {t('show_details')}
+                    </>
+                  )}
+                </button>
               </div>
 
-              {/* Details toggle - stays in place when expanded */}
-              <button
-                onClick={() => setShowFullHeaders(!showFullHeaders)}
-                className="mt-3 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
-              >
-                {showFullHeaders ? (
-                  <>
-                    <ChevronUp className="w-3 h-3" />
-                    {t('hide_details')}
-                  </>
-                ) : (
-                  <>
-                    <ChevronDown className="w-3 h-3" />
-                    {t('show_details')}
-                  </>
-                )}
-              </button>
-
               {/* Expandable Details */}
               {showFullHeaders && (
                 <div className="mt-3 space-y-3">
@@ -3893,46 +3987,248 @@ export function EmailViewer({
                 </div>
               )}
 
+              </div>
+              {/* Attachments on the right (beside-sender mode) */}
+              {attachmentPosition === 'beside-sender' && effectiveAttachments.length > 0 && (
+                <div className="relative flex flex-col items-end justify-start gap-1 flex-shrink-0 max-w-[50%]">
+                  {effectiveAttachments.slice(0, 2).map((attachment) => {
+                    const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                    const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                    const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                    return (
+                      <div
+                        key={attachment.id}
+                        className="inline-flex items-center gap-1.5 px-2 py-1 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                      >
+                        <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                        <span className="text-xs text-foreground truncate max-w-[140px]">
+                          {getAttachmentDisplayName(attachment.name, attachment.type)}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {formatFileSize(attachment.size)}
+                        </span>
+                        <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                          <button
+                            className="p-1 hover:bg-accent rounded transition-colors"
+                            title={t('download')}
+                            onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                          >
+                            <Download className="w-3.5 h-3.5 text-foreground" />
+                          </button>
+                          {opensPreview && (
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={tFiles('preview')}
+                              onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                            >
+                              <Eye className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {effectiveAttachments.length > 2 && (
+                    <button
+                      onClick={() => setShowAllBesideAttachments(!showAllBesideAttachments)}
+                      className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                    >
+                      +{effectiveAttachments.length - 2} {t('more')}
+                    </button>
+                  )}
+                  {/* Floating popup for remaining attachments */}
+                  {showAllBesideAttachments && effectiveAttachments.length > 2 && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setShowAllBesideAttachments(false)} />
+                      <div className="absolute top-full right-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                        {effectiveAttachments.slice(2).map((attachment) => {
+                          const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                          const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                          const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                          return (
+                            <div
+                              key={attachment.id}
+                              className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                            >
+                              <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                              <span className="text-xs text-foreground truncate max-w-[180px]">
+                                {getAttachmentDisplayName(attachment.name, attachment.type)}
+                              </span>
+                              <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                                {formatFileSize(attachment.size)}
+                              </span>
+                              <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                                <button
+                                  className="p-1 hover:bg-accent rounded transition-colors"
+                                  title={t('download')}
+                                  onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllBesideAttachments(false); }}
+                                >
+                                  <Download className="w-3.5 h-3.5 text-foreground" />
+                                </button>
+                                {opensPreview && (
+                                  <button
+                                    className="p-1 hover:bg-accent rounded transition-colors"
+                                    title={tFiles('preview')}
+                                    onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllBesideAttachments(false); }}
+                                  >
+                                    <Eye className="w-3.5 h-3.5 text-foreground" />
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           </div>
       </div>
 
-      {/* === ATTACHMENTS (integrated into header) === */}
-      {effectiveAttachments.length > 0 && (
-        <div className="bg-background border-b border-border px-4 lg:px-6 py-3">
-          <div className="flex items-start gap-2 flex-wrap">
+      {/* === ATTACHMENTS below header (below-header mode, desktop only) === */}
+      {attachmentPosition === 'below-header' && effectiveAttachments.length > 0 && (
+        <div className="hidden lg:block bg-background border-b border-border px-4 lg:px-6 py-2">
+          <div className="flex items-center gap-2 flex-wrap">
             {effectiveAttachments.map((attachment) => {
               const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
               const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
               const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
               return (
-                <button
+                <div
                   key={attachment.id}
-                  className="inline-flex items-center gap-2 px-3 py-2 bg-muted/60 hover:bg-accent rounded-lg transition-colors group border border-border/50"
-                  title={`${opensPreview ? tFiles('preview') : t('download')} ${attachment.name || 'Unnamed'} (${formatFileSize(attachment.size)})`}
-                  onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
                 >
                   <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                  <div className="flex flex-col items-start min-w-0">
-                    <span className="text-sm text-foreground truncate max-w-[200px]">
-                      {attachment.name || "Unnamed"}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {formatFileSize(attachment.size)}
-                    </span>
+                  <span className="text-sm text-foreground truncate max-w-[200px]">
+                    {getAttachmentDisplayName(attachment.name, attachment.type)}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {formatFileSize(attachment.size)}
+                  </span>
+                  <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                    <button
+                      className="p-1 hover:bg-accent rounded transition-colors"
+                      title={t('download')}
+                      onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                    >
+                      <Download className="w-4 h-4 text-foreground" />
+                    </button>
+                    {opensPreview && (
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={tFiles('preview')}
+                        onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                      >
+                        <Eye className="w-4 h-4 text-foreground" />
+                      </button>
+                    )}
                   </div>
-                  {opensPreview ? (
-                    <Eye className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  ) : (
-                    <Download className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
-                  )}
-                </button>
+                </div>
               );
             })}
           </div>
         </div>
       )}
 
+        {/* Mobile/Tablet Attachments */}
+        {effectiveAttachments.length > 0 && (
+          <div className="lg:hidden bg-background border-b border-border px-4 py-2">
+            <div className="relative flex items-center gap-1.5 flex-wrap">
+              {effectiveAttachments.slice(0, 2).map((attachment) => {
+                const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                return (
+                  <div
+                    key={attachment.id}
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-muted/60 rounded-md border border-border/50 group relative cursor-default"
+                  >
+                    <FileIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    <span className="text-sm text-foreground truncate max-w-[200px]">
+                      {getAttachmentDisplayName(attachment.name, attachment.type)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatFileSize(attachment.size)}
+                    </span>
+                    <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                      <button
+                        className="p-1 hover:bg-accent rounded transition-colors"
+                        title={t('download')}
+                        onClick={() => handleEffectiveAttachmentDownload(attachment)}
+                      >
+                        <Download className="w-4 h-4 text-foreground" />
+                      </button>
+                      {opensPreview && (
+                        <button
+                          className="p-1 hover:bg-accent rounded transition-colors"
+                          title={tFiles('preview')}
+                          onClick={() => handleEffectiveAttachmentOpen(attachment)}
+                        >
+                          <Eye className="w-4 h-4 text-foreground" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+              {effectiveAttachments.length > 2 && (
+                <button
+                  onClick={() => setShowAllMobileAttachments(!showAllMobileAttachments)}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-0.5"
+                >
+                  +{effectiveAttachments.length - 2} {t('more')}
+                </button>
+              )}
+              {showAllMobileAttachments && effectiveAttachments.length > 2 && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setShowAllMobileAttachments(false)} />
+                  <div className="absolute top-full left-0 mt-1 z-50 bg-background border border-border rounded-lg shadow-lg p-2 flex flex-col gap-1 min-w-[220px]">
+                    {effectiveAttachments.slice(2).map((attachment) => {
+                      const FileIcon = getFileIcon(attachment.name || undefined, attachment.type);
+                      const isPreviewable = isFilePreviewable(attachment.name || undefined, attachment.type);
+                      const opensPreview = isPreviewable && mailAttachmentAction === 'preview';
+                      return (
+                        <div
+                          key={attachment.id}
+                          className="flex items-center gap-1.5 px-2 py-1 rounded-md group relative cursor-default w-full"
+                        >
+                          <FileIcon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
+                          <span className="text-xs text-foreground truncate max-w-[180px]">
+                            {getAttachmentDisplayName(attachment.name, attachment.type)}
+                          </span>
+                          <span className="text-[10px] text-muted-foreground ml-auto flex-shrink-0">
+                            {formatFileSize(attachment.size)}
+                          </span>
+                          <div className="absolute inset-y-0 right-0 rounded-r-md bg-background/95 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 px-1.5">
+                            <button
+                              className="p-1 hover:bg-accent rounded transition-colors"
+                              title={t('download')}
+                              onClick={() => { handleEffectiveAttachmentDownload(attachment); setShowAllMobileAttachments(false); }}
+                            >
+                              <Download className="w-3.5 h-3.5 text-foreground" />
+                            </button>
+                            {opensPreview && (
+                              <button
+                                className="p-1 hover:bg-accent rounded transition-colors"
+                                title={tFiles('preview')}
+                                onClick={() => { handleEffectiveAttachmentOpen(attachment); setShowAllMobileAttachments(false); }}
+                              >
+                                <Eye className="w-3.5 h-3.5 text-foreground" />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
         {/* Mobile/Tablet Sender Info - scrolls with content */}
         <div className="lg:hidden bg-background border-b border-border px-4" style={{ paddingBlock: 'var(--density-header-py)' }}>
           <div className="flex items-start" style={{ gap: 'var(--density-item-gap)' }}>
@@ -3949,8 +4245,8 @@ export function EmailViewer({
               />
             </button>
             <div className="flex-1 min-w-0">
-              {/* Mobile 2-line layout */}
-              <div className="flex items-center gap-2 flex-wrap">
+              {/* Row 1: Sender name + badges */}
+              <div className="flex items-center gap-1.5 flex-wrap">
                 <button
                   onClick={() => sender?.email && handleViewContactSidebar(null, sender.email)}
                   className="text-sm font-semibold text-foreground hover:text-primary hover:underline transition-colors cursor-pointer text-left"
@@ -3958,43 +4254,42 @@ export function EmailViewer({
                   {sender?.name || sender?.email || t('unknown_sender')}
                 </button>
                 <EmailIdentityBadge email={email} identities={identities} />
-              </div>
-              <div className="mt-1 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
-                {sender?.email && sender?.name && (
-                  <>
-                    <span className="truncate">{sender.email}</span>
-                    {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
-                      <UnsubscribeBanner
-                        listUnsubscribe={listHeaders.listUnsubscribe}
-                        senderEmail={email?.from?.[0]?.email || ''}
-                        onDismiss={() => {
-                          const messageId = email?.messageId || '';
-                          const newSet = new Set(dismissedUnsubBanners).add(messageId);
-                          setDismissedUnsubBanners(newSet);
-                          localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
-                        }}
-                      />
-                    )}
-                    <span>·</span>
-                  </>
+                {shouldShowUnsubBanner && listHeaders?.listUnsubscribe && (
+                  <UnsubscribeBanner
+                    listUnsubscribe={listHeaders.listUnsubscribe}
+                    senderEmail={email?.from?.[0]?.email || ''}
+                    onDismiss={() => {
+                      const messageId = email?.messageId || '';
+                      const newSet = new Set(dismissedUnsubBanners).add(messageId);
+                      setDismissedUnsubBanners(newSet);
+                      localStorage.setItem('dismissed-unsub-banners', JSON.stringify([...newSet]));
+                    }}
+                  />
                 )}
+              </div>
+              {/* Email address under name */}
+              {sender?.email && sender?.name && (
+                <div className="text-xs text-muted-foreground mt-0.5 truncate">{sender.email}</div>
+              )}
+              {/* Row 2: Recipients */}
+              <div className="mt-0.5 flex items-center gap-1 text-sm text-muted-foreground flex-wrap">
                 {email.to && email.to.length > 0 && (
                   <>
                     <span>→ {t('recipient_to_prefix')}</span>
                     {renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar)}
                   </>
                 )}
+                {email.cc && email.cc.length > 0 && (
+                  <>
+                    <span className="text-muted-foreground/50">|</span>
+                    <span>CC:</span>
+                    {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
+                    {email.cc.length > 2 && (
+                      <span>+{email.cc.length - 2}</span>
+                    )}
+                  </>
+                )}
               </div>
-              {/* CC line (mobile - only if present) */}
-              {email.cc && email.cc.length > 0 && (
-                <div className="mt-1 flex items-center gap-1 text-sm">
-                  <span className="text-muted-foreground">CC:</span>
-                  {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)}
-                  {email.cc.length > 2 && (
-                    <span className="text-muted-foreground">+{email.cc.length - 2}</span>
-                  )}
-                </div>
-              )}
             </div>
           </div>
         </div>

components/layout/navigation-rail.tsx

@@ -217,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 (
@@ -252,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>
     );
   }

components/settings/calendar-settings.tsx

@@ -14,6 +14,7 @@ export function CalendarSettings() {
   const {
     timeFormat,
     firstDayOfWeek,
+    showTimeInMonthView,
     calendarNotificationsEnabled,
     calendarNotificationSound,
     calendarInvitationParsingEnabled,
@@ -57,6 +58,16 @@ 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('notifications_enabled')}
         description={t('notifications_enabled_desc')}

components/settings/email-settings.tsx

@@ -24,6 +24,7 @@ export function EmailSettings() {
     emailsPerPage,
     externalContentPolicy,
     mailAttachmentAction,
+    attachmentPosition,
     emailAlwaysLightMode,
     archiveMode,
     trustedSenders,
@@ -195,6 +196,17 @@ export function EmailSettings() {
         />
       </SettingItem>
 
+      <SettingItem label={t('attachment_position.label')} description={t('attachment_position.description')}>
+        <Select
+          value={attachmentPosition}
+          onChange={(value) => updateSetting('attachmentPosition', value as 'beside-sender' | 'below-header')}
+          options={[
+            { value: 'beside-sender', label: t('attachment_position.beside-sender') },
+            { value: 'below-header', label: t('attachment_position.below-header') },
+          ]}
+        />
+      </SettingItem>
+
       {/* Emails Per Page */}
       <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
         <Select

components/settings/sidebar-apps-settings.tsx

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

eslint.config.mjs

@@ -28,15 +28,18 @@ export default [
     },
     plugins: {
       "@typescript-eslint": tseslint,
-      "react": reactPlugin,
+      react: reactPlugin,
       "react-hooks": reactHooksPlugin,
     },
     rules: {
       ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/no-unused-vars": ["warn", {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+        },
+      ],
       "@typescript-eslint/no-explicit-any": "warn",
       "@typescript-eslint/no-empty-object-type": "off",
       "react-hooks/rules-of-hooks": "error",

lib/__tests__/health-route.test.ts

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

lib/account-state-manager.ts

@@ -8,6 +8,7 @@ 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';
 
@@ -97,6 +98,19 @@ export function clearAllStores(): void {
     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();

lib/jmap/client.ts

@@ -2066,6 +2066,11 @@ export class JMAPClient {
     return coreCapability?.maxCallsInRequest || 50;
   }
 
+  getMaxObjectsInGet(): number {
+    const coreCapability = this.capabilities["urn:ietf:params:jmap:core"] as { maxObjectsInGet?: number } | undefined;
+    return coreCapability?.maxObjectsInGet || 500;
+  }
+
   getEventSourceUrl(): string | null {
     if (!this.session) return null;
 
@@ -2428,26 +2433,62 @@ export class JMAPClient {
     }
   }
 
-  async getContacts(addressBookId?: string): Promise<ContactCard[]> {
-    try {
-      const accountId = this.getContactsAccountId();
-      const queryArgs: Record<string, unknown> = { accountId, limit: 1000 };
-      if (addressBookId) {
-        queryArgs.filter = { inAddressBook: addressBookId };
+  private async fetchPaginatedContacts(
+    accountId: string,
+    filter?: Record<string, unknown>,
+  ): Promise<ContactCard[]> {
+    const batchSize = this.getMaxObjectsInGet();
+    const allIds: string[] = [];
+    let position = 0;
+
+    // Paginate ContactCard/query to collect all IDs
+    for (;;) {
+      const queryArgs: Record<string, unknown> = { accountId, position, limit: batchSize };
+      if (filter) {
+        queryArgs.filter = filter;
       }
 
       const response = await this.request([
-        ["ContactCard/query", queryArgs, "0"],
-        ["ContactCard/get", {
-          accountId,
-          "#ids": { resultOf: "0", name: "ContactCard/query", path: "/ids" },
-        }, "1"],
+        ["ContactCard/query", queryArgs, "q"],
       ], this.contactUsing());
 
-      if (response.methodResponses?.[1]?.[0] === "ContactCard/get") {
-        return (response.methodResponses[1][1].list || []) as ContactCard[];
+      const queryResult = response.methodResponses?.[0];
+      if (queryResult?.[0] !== "ContactCard/query") break;
+
+      const ids: string[] = queryResult[1].ids || [];
+      allIds.push(...ids);
+
+      const total: number = queryResult[1].total ?? -1;
+      if (ids.length < batchSize || (total > 0 && allIds.length >= total)) {
+        break;
       }
-      return [];
+      position += ids.length;
+    }
+
+    if (allIds.length === 0) return [];
+
+    // Batch ContactCard/get to respect maxObjectsInGet
+    const allContacts: ContactCard[] = [];
+    for (let i = 0; i < allIds.length; i += batchSize) {
+      const chunk = allIds.slice(i, i + batchSize);
+      const response = await this.request([
+        ["ContactCard/get", { accountId, ids: chunk }, "g"],
+      ], this.contactUsing());
+
+      if (response.methodResponses?.[0]?.[0] === "ContactCard/get") {
+        const list = (response.methodResponses[0][1].list || []) as ContactCard[];
+        allContacts.push(...list);
+      }
+    }
+
+    return allContacts;
+  }
+
+  async getContacts(addressBookId?: string): Promise<ContactCard[]> {
+    try {
+      const accountId = this.getContactsAccountId();
+      const filter = addressBookId ? { inAddressBook: addressBookId } : undefined;
+      return await this.fetchPaginatedContacts(accountId, filter);
     } catch (error) {
       console.error('Failed to get contacts:', error);
       return [];
@@ -2465,29 +2506,19 @@ export class JMAPClient {
         const account = this.accounts[accountId];
 
         try {
-          const response = await this.request([
-            ["ContactCard/query", { accountId, limit: 1000 }, "0"],
-            ["ContactCard/get", {
-              accountId,
-              "#ids": { resultOf: "0", name: "ContactCard/query", path: "/ids" },
-            }, "1"],
-          ], this.contactUsing());
-
-          if (response.methodResponses?.[1]?.[0] === "ContactCard/get") {
-            const rawContacts = (response.methodResponses[1][1].list || []) as ContactCard[];
-            const contacts = rawContacts.map((contact) => ({
-              ...contact,
-              id: isPrimary ? contact.id : `${accountId}:${contact.id}`,
-              originalId: contact.id,
-              addressBookIds: isPrimary ? contact.addressBookIds : (contact.addressBookIds ? Object.fromEntries(
-                Object.entries(contact.addressBookIds).map(([bookId, v]) => [`${accountId}:${bookId}`, v])
-              ) : contact.addressBookIds),
-              accountId,
-              accountName: account?.name || (isPrimary ? this.username : accountId),
-              isShared: !isPrimary,
-            }));
-            allContacts.push(...contacts);
-          }
+          const rawContacts = await this.fetchPaginatedContacts(accountId);
+          const contacts = rawContacts.map((contact) => ({
+            ...contact,
+            id: isPrimary ? contact.id : `${accountId}:${contact.id}`,
+            originalId: contact.id,
+            addressBookIds: isPrimary ? contact.addressBookIds : (contact.addressBookIds ? Object.fromEntries(
+              Object.entries(contact.addressBookIds).map(([bookId, v]) => [`${accountId}:${bookId}`, v])
+            ) : contact.addressBookIds),
+            accountId,
+            accountName: account?.name || (isPrimary ? this.username : accountId),
+            isShared: !isPrimary,
+          }));
+          allContacts.push(...contacts);
         } catch (error) {
           console.error(`Failed to fetch contacts for account ${accountId}:`, error);
         }
@@ -2888,6 +2919,10 @@ export class JMAPClient {
         filter,
         limit: limit || 1000,
       };
+      // Expand recurring events into individual occurrences when a date range is provided
+      if (filter.after || filter.before) {
+        queryArgs.expandRecurrences = true;
+      }
       if (sort) {
         queryArgs.sort = sort;
       }

locales/de/common.json

@@ -210,6 +210,7 @@
     "attachments": "Anhänge",
     "important": "Wichtig",
     "download": "Herunterladen",
+    "download_all": "Alle herunterladen",
     "from": "Von",
     "to": "An",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Zurück",
     "next": "Weiter",
-    "send": "Senden"
+    "send": "Senden",
+    "more": "mehr"
   },
   "email_composer": {
     "new_message": "Neue Nachricht",
@@ -753,6 +755,12 @@
         "preview": "Wenn möglich in Vorschau öffnen",
         "download": "Sofort herunterladen"
       },
+      "attachment_position": {
+        "label": "Anhangsposition",
+        "description": "Wo Anhänge im E-Mail-Header angezeigt werden",
+        "beside-sender": "Neben dem Absender",
+        "below-header": "Unter dem Header"
+      },
       "emails_per_page": {
         "25": "25 E-Mails",
         "50": "50 E-Mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement entfernt",
       "delete_error": "Abonnement konnte nicht entfernt werden",
       "last_refreshed": "Zuletzt aktualisiert: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Keine Aufgaben",
+      "no_title": "(Kein Titel)",
+      "mark_complete": "Als erledigt markieren",
+      "mark_incomplete": "Als unerledigt markieren"
     }
   },
   "advanced_search": {

locales/en/common.json

@@ -210,6 +210,7 @@
     "attachments": "Attachments",
     "important": "Important",
     "download": "Download",
+    "download_all": "Download all",
     "from": "From",
     "to": "To",
     "cc": "CC",
@@ -401,7 +402,8 @@
       "event_status_tentative": "Tentative",
       "event_status_cancelled": "Cancelled"
     },
-    "send": "Send"
+    "send": "Send",
+    "more": "more"
   },
   "email_composer": {
     "new_message": "New Message",
@@ -753,6 +755,12 @@
         "preview": "Preview when possible",
         "download": "Download immediately"
       },
+      "attachment_position": {
+        "label": "Attachment Position",
+        "description": "Where to display attachments in the email header",
+        "beside-sender": "Next to sender",
+        "below-header": "Below header"
+      },
       "emails_per_page": {
         "25": "25 emails",
         "50": "50 emails",
@@ -1947,6 +1955,12 @@
       "deleted": "Subscription removed",
       "delete_error": "Failed to remove subscription",
       "last_refreshed": "Last updated: {time}"
+    },
+    "tasks": {
+      "no_tasks": "No tasks",
+      "no_title": "(No title)",
+      "mark_complete": "Mark as complete",
+      "mark_incomplete": "Mark as incomplete"
     }
   },
   "advanced_search": {

locales/es/common.json

@@ -210,6 +210,7 @@
     "attachments": "Archivos adjuntos",
     "important": "Importante",
     "download": "Descargar",
+    "download_all": "Descargar todo",
     "from": "De",
     "to": "Para",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Anterior",
     "next": "Siguiente",
-    "send": "Enviar"
+    "send": "Enviar",
+    "more": "más"
   },
   "email_composer": {
     "new_message": "Nuevo Mensaje",
@@ -753,6 +755,12 @@
         "preview": "Mostrar vista previa cuando sea posible",
         "download": "Descargar inmediatamente"
       },
+      "attachment_position": {
+        "label": "Posición del adjunto",
+        "description": "Dónde mostrar los adjuntos en el encabezado del correo",
+        "beside-sender": "Junto al remitente",
+        "below-header": "Debajo del encabezado"
+      },
       "emails_per_page": {
         "25": "25 correos",
         "50": "50 correos",
@@ -1947,6 +1955,12 @@
       "deleted": "Suscripción eliminada",
       "delete_error": "No se pudo eliminar la suscripción",
       "last_refreshed": "Última actualización: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Sin tareas",
+      "no_title": "(Sin título)",
+      "mark_complete": "Marcar como completada",
+      "mark_incomplete": "Marcar como incompleta"
     }
   },
   "advanced_search": {

locales/fr/common.json

@@ -210,6 +210,7 @@
     "attachments": "Pièces jointes",
     "important": "Important",
     "download": "Télécharger",
+    "download_all": "Tout télécharger",
     "from": "De",
     "to": "À",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Précédent",
     "next": "Suivant",
-    "send": "Envoyer"
+    "send": "Envoyer",
+    "more": "plus"
   },
   "email_composer": {
     "new_message": "Nouveau message",
@@ -753,6 +755,12 @@
         "preview": "Aperçu si possible",
         "download": "Télécharger immédiatement"
       },
+      "attachment_position": {
+        "label": "Position des pièces jointes",
+        "description": "Où afficher les pièces jointes dans l'en-tête de l'email",
+        "beside-sender": "À côté de l'expéditeur",
+        "below-header": "Sous l'en-tête"
+      },
       "emails_per_page": {
         "25": "25 emails",
         "50": "50 emails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement supprimé",
       "delete_error": "Impossible de supprimer l'abonnement",
       "last_refreshed": "Dernière mise à jour : {time}"
+    },
+    "tasks": {
+      "no_tasks": "Aucune tâche",
+      "no_title": "(Sans titre)",
+      "mark_complete": "Marquer comme terminée",
+      "mark_incomplete": "Marquer comme non terminée"
     }
   },
   "advanced_search": {

locales/it/common.json

@@ -210,6 +210,7 @@
     "attachments": "Allegati",
     "important": "Importante",
     "download": "Scarica",
+    "download_all": "Scarica tutto",
     "from": "Da",
     "to": "A",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Precedente",
     "next": "Successivo",
-    "send": "Invia"
+    "send": "Invia",
+    "more": "altri"
   },
   "email_composer": {
     "new_message": "Nuovo messaggio",
@@ -753,6 +755,12 @@
         "preview": "Anteprima quando possibile",
         "download": "Scarica immediatamente"
       },
+      "attachment_position": {
+        "label": "Posizione degli allegati",
+        "description": "Dove visualizzare gli allegati nell'intestazione dell'email",
+        "beside-sender": "Accanto al mittente",
+        "below-header": "Sotto l'intestazione"
+      },
       "emails_per_page": {
         "25": "25 messaggi",
         "50": "50 messaggi",
@@ -1947,6 +1955,12 @@
       "deleted": "Abbonamento rimosso",
       "delete_error": "Impossibile rimuovere l'abbonamento",
       "last_refreshed": "Ultimo aggiornamento: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Nessuna attività",
+      "no_title": "(Senza titolo)",
+      "mark_complete": "Segna come completata",
+      "mark_incomplete": "Segna come non completata"
     }
   },
   "advanced_search": {

locales/ja/common.json

@@ -210,6 +210,7 @@
     "attachments": "添付ファイル",
     "important": "重要",
     "download": "ダウンロード",
+    "download_all": "すべてダウンロード",
     "from": "送信者",
     "to": "宛先",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "前へ",
     "next": "次へ",
-    "send": "送信"
+    "send": "送信",
+    "more": "他"
   },
   "email_composer": {
     "new_message": "新規メッセージ",
@@ -753,6 +755,12 @@
         "preview": "可能ならプレビューを開く",
         "download": "すぐにダウンロード"
       },
+      "attachment_position": {
+        "label": "添付ファイルの位置",
+        "description": "メールヘッダー内での添付ファイルの表示位置",
+        "beside-sender": "送信者の横",
+        "below-header": "ヘッダーの下"
+      },
       "emails_per_page": {
         "25": "25件",
         "50": "50件",
@@ -1947,6 +1955,12 @@
       "deleted": "購読を解除しました",
       "delete_error": "購読の解除に失敗しました",
       "last_refreshed": "最終更新: {time}"
+    },
+    "tasks": {
+      "no_tasks": "タスクなし",
+      "no_title": "(タイトルなし)",
+      "mark_complete": "完了にする",
+      "mark_incomplete": "未完了にする"
     }
   },
   "advanced_search": {

locales/nl/common.json

@@ -210,6 +210,7 @@
     "attachments": "Bijlagen",
     "important": "Belangrijk",
     "download": "Downloaden",
+    "download_all": "Alles downloaden",
     "from": "Van",
     "to": "Aan",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Vorige",
     "next": "Volgende",
-    "send": "Verzenden"
+    "send": "Verzenden",
+    "more": "meer"
   },
   "email_composer": {
     "new_message": "Nieuw bericht",
@@ -753,6 +755,12 @@
         "preview": "Voorbeeld tonen indien mogelijk",
         "download": "Direct downloaden"
       },
+      "attachment_position": {
+        "label": "Positie van bijlagen",
+        "description": "Waar bijlagen in de e-mailkop worden weergegeven",
+        "beside-sender": "Naast de afzender",
+        "below-header": "Onder de kop"
+      },
       "emails_per_page": {
         "25": "25 e-mails",
         "50": "50 e-mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Abonnement verwijderd",
       "delete_error": "Kan abonnement niet verwijderen",
       "last_refreshed": "Laatst bijgewerkt: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Geen taken",
+      "no_title": "(Geen titel)",
+      "mark_complete": "Markeren als voltooid",
+      "mark_incomplete": "Markeren als onvoltooid"
     }
   },
   "advanced_search": {

locales/pt/common.json

@@ -210,6 +210,7 @@
     "attachments": "Anexos",
     "important": "Importante",
     "download": "Baixar",
+    "download_all": "Baixar tudo",
     "from": "De",
     "to": "Para",
     "cc": "CC",
@@ -401,7 +402,8 @@
     },
     "previous": "Anterior",
     "next": "Próximo",
-    "send": "Enviar"
+    "send": "Enviar",
+    "more": "mais"
   },
   "email_composer": {
     "new_message": "Nova Mensagem",
@@ -753,6 +755,12 @@
         "preview": "Visualizar quando possível",
         "download": "Baixar imediatamente"
       },
+      "attachment_position": {
+        "label": "Posição dos anexos",
+        "description": "Onde exibir os anexos no cabeçalho do e-mail",
+        "beside-sender": "Ao lado do remetente",
+        "below-header": "Abaixo do cabeçalho"
+      },
       "emails_per_page": {
         "25": "25 e-mails",
         "50": "50 e-mails",
@@ -1947,6 +1955,12 @@
       "deleted": "Assinatura removida",
       "delete_error": "Falha ao remover assinatura",
       "last_refreshed": "Última atualização: {time}"
+    },
+    "tasks": {
+      "no_tasks": "Sem tarefas",
+      "no_title": "(Sem título)",
+      "mark_complete": "Marcar como concluída",
+      "mark_incomplete": "Marcar como não concluída"
     }
   },
   "advanced_search": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bulwark-webmail",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bulwark-webmail",
-      "version": "1.4.3",
+      "version": "1.4.4",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@tanstack/react-virtual": "^3.13.18",
@@ -5480,9 +5480,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulwark-webmail",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "Bulwark Webmail — a modern webmail client built for Stalwart Mail Server",
   "author": "Bulwark Webmail <bulwark@rbm.systems>",
   "license": "AGPL-3.0-only",
@@ -77,6 +77,7 @@
   },
   "overrides": {
     "elliptic": "^6.6.1",
+    "flatted": "^3.4.2",
     "undici": "^7.24.0"
   }
 }

stores/auth-store.ts

@@ -34,7 +34,7 @@ interface AuthState {
   login: (serverUrl: string, username: string, password: string, totp?: string, rememberMe?: boolean) => Promise<boolean>;
   loginWithOAuth: (serverUrl: string, code: string, codeVerifier: string, redirectUri: string) => Promise<boolean>;
   refreshAccessToken: () => Promise<string | null>;
-  logout: () => void;
+  logout: () => Promise<void>;
   logoutAll: () => void;
   switchAccount: (accountId: string) => Promise<void>;
   checkAuth: () => Promise<void>;
@@ -264,10 +264,12 @@ export const useAuthStore = create<AuthState>()(
             ? (accountStore.getAccountById(accountId)?.cookieSlot ?? accountStore.getNextCookieSlot())
             : accountStore.getNextCookieSlot();
 
-          // Snapshot current account if switching away
+          // Snapshot current account if switching away and clear stores so
+          // the new account starts with a clean email/contact/calendar state.
           const prevAccountId = get().activeAccountId;
           if (prevAccountId && prevAccountId !== accountId) {
             snapshotAccount(prevAccountId);
+            clearAllStores();
           }
 
           // Store client in multi-account map
@@ -390,10 +392,12 @@ export const useAuthStore = create<AuthState>()(
           // Register in account store
           const accountId = generateAccountId(username, serverUrl);
 
-          // Snapshot current account if switching away
+          // Snapshot current account if switching away and clear stores so
+          // the new account starts with a clean email/contact/calendar state.
           const prevAccountId = get().activeAccountId;
           if (prevAccountId && prevAccountId !== accountId) {
             snapshotAccount(prevAccountId);
+            clearAllStores();
           }
 
           clients.set(accountId, client);
@@ -506,7 +510,7 @@ export const useAuthStore = create<AuthState>()(
         return promise;
       },
 
-      logout: () => {
+      logout: async () => {
         const state = get();
         const wasOAuth = state.authMode === 'oauth';
         const accountId = state.activeAccountId;
@@ -515,6 +519,11 @@ export const useAuthStore = create<AuthState>()(
         const slot = account?.cookieSlot ?? 0;
 
         clearRefreshTimer(accountId ?? undefined);
+
+        // Null out the client BEFORE disconnecting so the page doesn't fire
+        // data-loading effects with the stale disconnected client while
+        // stores are being cleared.
+        set({ client: null });
         state.client?.disconnect();
 
         // Remove client from multi-account map
@@ -536,11 +545,56 @@ export const useAuthStore = create<AuthState>()(
           clearAllStores();
 
           // Restore next account
-          const nextClient = clients.get(nextAccount.id);
+          let nextClient = clients.get(nextAccount.id);
+
+          // If the client isn't in memory, try to restore it from the session
+          if (!nextClient) {
+            try {
+              if (nextAccount.authMode === 'oauth') {
+                const res = await fetch(`/api/auth/token?slot=${nextAccount.cookieSlot}`, { method: 'PUT' });
+                if (res.ok) {
+                  const { access_token, expires_in } = await res.json();
+                  const refreshFn = get().refreshAccessToken;
+                  nextClient = JMAPClient.withBearer(nextAccount.serverUrl, access_token, nextAccount.username, () => refreshFn());
+                  nextClient.onConnectionChange((connected) => {
+                    if (get().activeAccountId === nextAccount.id) {
+                      set({ connectionLost: !connected });
+                    }
+                    accountStore.updateAccount(nextAccount.id, { isConnected: connected });
+                  });
+                  await nextClient.connect();
+                  clients.set(nextAccount.id, nextClient);
+                  scheduleRefresh(expires_in, get().refreshAccessToken, nextAccount.id);
+                }
+              } else if (nextAccount.authMode === 'basic' && nextAccount.rememberMe) {
+                const res = await fetch(`/api/auth/session?slot=${nextAccount.cookieSlot}`);
+                if (res.ok) {
+                  const { serverUrl: sUrl, username: uName, password: pwd } = await res.json();
+                  nextClient = new JMAPClient(sUrl, uName, pwd);
+                  nextClient.onConnectionChange((connected) => {
+                    if (get().activeAccountId === nextAccount.id) {
+                      set({ connectionLost: !connected });
+                    }
+                    accountStore.updateAccount(nextAccount.id, { isConnected: connected });
+                  });
+                  await nextClient.connect();
+                  clients.set(nextAccount.id, nextClient);
+                }
+              }
+            } catch (err) {
+              debug.error(`Failed to restore next account ${nextAccount.id} during logout:`, err);
+              nextClient = undefined;
+            }
+          }
+
           if (nextClient) {
             const restored = restoreAccount(nextAccount.id);
             accountStore.setActiveAccount(nextAccount.id);
 
+            // Build identity state up front so the name updates atomically
+            const restoredIdentities = restored ? useIdentityStore.getState().identities : [];
+            const restoredPrimary = restoredIdentities[0] ?? null;
+
             set({
               isAuthenticated: true,
               isLoading: false,
@@ -552,6 +606,8 @@ export const useAuthStore = create<AuthState>()(
               connectionLost: false,
               error: null,
               activeAccountId: nextAccount.id,
+              identities: restoredIdentities,
+              primaryIdentity: restoredPrimary,
             });
 
             if (!restored) {
@@ -560,13 +616,32 @@ export const useAuthStore = create<AuthState>()(
                 const { identities, primaryIdentity } = loadIdentities(rawIds, nextAccount.username);
                 set({ identities, primaryIdentity });
               }).catch((err) => debug.error('Failed to load identities after switch:', err));
-            } else {
-              const identityState = useIdentityStore.getState();
-              set({
-                identities: identityState.identities,
-                primaryIdentity: identityState.identities[0] ?? null,
-              });
             }
+          } else {
+            // Could not restore the next account — remove it and do a full logout
+            debug.error(`Cannot restore next account ${nextAccount.id}, performing full logout`);
+            evictAccount(nextAccount.id);
+            accountStore.removeAccount(nextAccount.id);
+
+            set({
+              isAuthenticated: false,
+              serverUrl: null,
+              username: null,
+              client: null,
+              identities: [],
+              primaryIdentity: null,
+              authMode: 'basic',
+              rememberMe: false,
+              accessToken: null,
+              tokenExpiresAt: null,
+              connectionLost: false,
+              error: null,
+              activeAccountId: null,
+            });
+
+            localStorage.removeItem('auth-storage');
+            clearAllStores();
+            redirectToLogin();
           }
         } else {
           // No accounts remaining — full logout
@@ -691,7 +766,9 @@ export const useAuthStore = create<AuthState>()(
         const targetAccount = accountStore.getAccountById(accountId);
         if (!targetAccount) return;
 
-        set({ isLoading: true });
+        // Null out the client immediately so the page doesn't fire data-loading
+        // effects with the old client while stores are being cleared.
+        set({ isLoading: true, client: null });
 
         // Snapshot current account
         if (state.activeAccountId) {
@@ -741,23 +818,39 @@ export const useAuthStore = create<AuthState>()(
             }
           } catch (err) {
             debug.error(`Failed to restore client for ${accountId}:`, err);
-            accountStore.updateAccount(accountId, {
-              isConnected: false,
-              hasError: true,
-              errorMessage: err instanceof Error ? err.message : 'Connection failed',
-            });
-            set({ isLoading: false });
-            return;
           }
         }
 
         if (!targetClient) {
-          accountStore.updateAccount(accountId, {
-            isConnected: false,
-            hasError: true,
-            errorMessage: 'Unable to restore session',
-          });
+          // Cannot restore — remove the stale account and redirect to login
+          evictAccount(accountId);
+          accountStore.removeAccount(accountId);
+          fetch(`/api/auth/session?slot=${targetAccount.cookieSlot}`, { method: 'DELETE' }).catch(() => {});
+
+          // Restore the previous account if still available
+          if (state.activeAccountId && state.activeAccountId !== accountId) {
+            const prevClient = clients.get(state.activeAccountId);
+            const prevAccount = accountStore.getAccountById(state.activeAccountId);
+            if (prevClient && prevAccount) {
+              restoreAccount(state.activeAccountId);
+              accountStore.setActiveAccount(state.activeAccountId);
+              set({
+                isLoading: false,
+                serverUrl: prevAccount.serverUrl,
+                username: prevAccount.username,
+                client: prevClient,
+                authMode: prevAccount.authMode,
+                rememberMe: prevAccount.rememberMe,
+                connectionLost: false,
+                activeAccountId: state.activeAccountId,
+              });
+              return;
+            }
+          }
+
           set({ isLoading: false });
+          // Redirect to login so the user can re-authenticate
+          replaceWindowLocation(getLocaleLoginPath());
           return;
         }
 
@@ -766,6 +859,10 @@ export const useAuthStore = create<AuthState>()(
         accountStore.setActiveAccount(accountId);
         accountStore.updateAccount(accountId, { isConnected: true, hasError: false, errorMessage: undefined });
 
+        // Build identity state up front so the name updates atomically
+        const restoredIdentities = restored ? useIdentityStore.getState().identities : [];
+        const restoredPrimary = restoredIdentities[0] ?? null;
+
         set({
           isAuthenticated: true,
           isLoading: false,
@@ -777,6 +874,8 @@ export const useAuthStore = create<AuthState>()(
           connectionLost: false,
           error: null,
           activeAccountId: accountId,
+          identities: restoredIdentities,
+          primaryIdentity: restoredPrimary,
         });
 
         if (!restored) {
@@ -788,12 +887,6 @@ export const useAuthStore = create<AuthState>()(
           } catch (err) {
             debug.error(`Failed to load data for ${accountId}:`, err);
           }
-        } else {
-          const identityState = useIdentityStore.getState();
-          set({
-            identities: identityState.identities,
-            primaryIdentity: identityState.identities[0] ?? null,
-          });
         }
 
         // Sync settings
@@ -811,7 +904,9 @@ export const useAuthStore = create<AuthState>()(
 
         // Multi-account restoration: restore all registered accounts
         if (accounts.length > 0) {
-          set({ isLoading: true });
+          // Null out client so the page doesn't fire data-loading effects
+          // with a stale client reference while we're restoring accounts.
+          set({ isLoading: true, client: null });
 
           // Determine which account to activate first
           const defaultAccount = accountStore.getDefaultAccount();
@@ -865,11 +960,11 @@ export const useAuthStore = create<AuthState>()(
               }
             } catch (err) {
               debug.error(`Failed to restore account ${account.id}:`, err);
-              accountStore.updateAccount(account.id, {
-                isConnected: false,
-                hasError: true,
-                errorMessage: err instanceof Error ? err.message : 'Restore failed',
-              });
+              // Remove unrestorable accounts so the user is prompted to log in
+              // again rather than seeing a stale error entry forever.
+              evictAccount(account.id);
+              accountStore.removeAccount(account.id);
+              fetch(`/api/auth/session?slot=${account.cookieSlot}`, { method: 'DELETE' }).catch(() => {});
             }
           }
 

stores/calendar-store.ts

@@ -110,10 +110,12 @@ export const useCalendarStore = create<CalendarStore>()(
       fetchEvents: async (client, start, end) => {
         set({ isLoadingEvents: true, error: null });
         try {
-          const events = await client.queryAllCalendarEvents({
+          const rawEvents = await client.queryAllCalendarEvents({
             after: start,
             before: end,
           });
+          // Filter out malformed events missing required 'start' field
+          const events = rawEvents.filter(e => typeof e.start === 'string' && e.start);
           set({ events, isLoadingEvents: false, dateRange: { start, end } });
         } catch (error) {
           debug.error('Failed to fetch events:', error);
@@ -655,6 +657,7 @@ export const useCalendarStore = create<CalendarStore>()(
 
         return {
           ...mergedState,
+          selectedDate: new Date(),
           viewMode: getSafeCalendarViewMode(mergedState.viewMode),
         };
       },

stores/email-store.ts

@@ -239,15 +239,17 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
     try {
       const mailboxes = await client.getAllMailboxes();
 
-      // Auto-select inbox if no mailbox is currently selected
+      // Auto-select inbox if no mailbox is selected or the current selection
+      // doesn't exist in the fetched list (e.g. after an account switch)
       const currentSelectedMailbox = get().selectedMailbox;
-      if (!currentSelectedMailbox) {
+      const selectionValid = currentSelectedMailbox && mailboxes.some(m => m.id === currentSelectedMailbox);
+      if (!selectionValid) {
         // Find inbox from PRIMARY account (not shared accounts)
         const inboxMailbox = mailboxes.find(m => m.role === 'inbox' && !m.isShared);
         if (inboxMailbox) {
           set({ mailboxes, selectedMailbox: inboxMailbox.id, isLoading: false });
         } else {
-          set({ mailboxes, isLoading: false });
+          set({ mailboxes, selectedMailbox: '', isLoading: false });
         }
       } else {
         set({ mailboxes, isLoading: false });

stores/settings-store.ts

@@ -29,6 +29,7 @@ export type TimeFormat = '12h' | '24h';
 export type FirstDayOfWeek = 0 | 1; // 0 = Sunday, 1 = Monday
 export type ExternalContentPolicy = 'ask' | 'block' | 'allow';
 export type MailAttachmentAction = 'preview' | 'download';
+export type AttachmentPosition = 'beside-sender' | 'below-header';
 export type ToolbarPosition = 'top' | 'below-subject';
 export type ArchiveMode = 'single' | 'year' | 'month';
 
@@ -92,6 +93,7 @@ interface SettingsState {
   emailsPerPage: number;
   externalContentPolicy: ExternalContentPolicy;
   mailAttachmentAction: MailAttachmentAction;
+  attachmentPosition: AttachmentPosition;
   emailAlwaysLightMode: boolean; // Always render email content in light mode
   archiveMode: ArchiveMode; // How to organize archived emails: single folder, by year, or by year+month
 
@@ -186,6 +188,7 @@ const DEFAULT_SETTINGS = {
   emailsPerPage: 50,
   externalContentPolicy: 'ask' as ExternalContentPolicy,
   mailAttachmentAction: 'preview' as MailAttachmentAction,
+  attachmentPosition: 'beside-sender' as AttachmentPosition,
   emailAlwaysLightMode: false,
   archiveMode: 'single' as ArchiveMode,
 
@@ -271,6 +274,7 @@ export const useSettingsStore = create<SettingsState>()(
           emailsPerPage: state.emailsPerPage,
           externalContentPolicy: state.externalContentPolicy,
           mailAttachmentAction: state.mailAttachmentAction,
+          attachmentPosition: state.attachmentPosition,
           archiveMode: state.archiveMode,
           trustedSenders: state.trustedSenders,
           autoSaveDraftInterval: state.autoSaveDraftInterval,