M4: Calendar plugin (builtin) + mail HTML/attachment fixes

Calendar plugin (webmail_plugin_calendar, non-removable core plugin):
- Local calendars/events CRUD with RLS isolation; recurrence expanded at
  query time (DST-correct), EXDATE + detached-override merge.
- Calendar app bundle: month/week/day/3-day views, mini-month, event form
  (color, show-as, timezone combobox, repeat, reminders, guests w/ recipient
  autocomplete, Jitsi video call), event popover with RSVP badges, resizable/
  collapsible left panel + theme toggle, overlap layout.
- iMIP invites: sdk.mail sends REQUEST from the organizer's mailbox (HTML +
  text/calendar + invite.ics); public /rsvp endpoint (vault-sealed token)
  records accepted/declined/tentative per attendee.
- "This and following" edit + scoped delete (this / this-and-following), with
  a delete confirmation dialog for recurring events.

Core:
- Settings: time_format (12/24h, default 24h) + jitsi_server; new Integrations
  section; date order follows time format (en-GB vs en-US) across Mail.
- Plugin SDK: mail (send from a user's account), vault (envelope encrypt),
  multi-method SSRF-guarded http; AppSwitcher product switcher; full-bleed
  PluginPage.

Mail HTML rendering:
- Sanitizer allows <style> blocks + class (CSS sanitized: drop script-like,
  strip @import/url() when remote images blocked); SANITIZER_VERSION 3 so
  already-indexed mail re-sanitizes on view.
- Attachments: a Content-Disposition: attachment part is a real attachment
  even when it also carries a Content-ID (fixes hidden invite.ics).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/MailLayout.tsx

@@ -2,6 +2,7 @@ import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tansta
 import { useEffect, useRef, useState } from "react";
 import { Link, useMatch, useNavigate } from "react-router-dom";
 
+import { AppSwitcher } from "../components/AppSwitcher";
 import { Composer, type ComposerInit, draftToInit } from "../components/compose/Composer";
 import { DraftsList } from "../components/list/DraftsList";
 import { Icon } from "../components/Icon";
@@ -14,6 +15,7 @@ import { ThreadView } from "../components/thread/ThreadView";
 import { useT } from "../i18n";
 import type { MessageKey } from "../i18n/en";
 import { api } from "../lib/api";
+import { setTimeFormat } from "../lib/timeFormat";
 import type { QuotaOut, SavedSearch, ThreadSummary } from "../lib/types";
 import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";
 import { usePluginPages } from "../plugins/manifest";
@@ -137,6 +139,10 @@ export function MailLayout() {
   const savedSearchesQuery = useQuery({ queryKey: ["saved-searches"], queryFn: api.savedSearches });
   const settingsQuery = useQuery({ queryKey: ["settings"], queryFn: api.settings });
   const threadOrder: "asc" | "desc" = settingsQuery.data?.thread_order ?? "asc";
+  const timeFormat = settingsQuery.data?.time_format;
+  useEffect(() => {
+    if (timeFormat) setTimeFormat(timeFormat);
+  }, [timeFormat]);
   const quotaQuery = useQuery({ queryKey: ["quota"], queryFn: api.quota });
   const countsQuery = useQuery({ queryKey: ["folder-counts"], queryFn: api.folderCounts });
 
@@ -430,11 +436,7 @@ export function MailLayout() {
             collapsed ? "flex-col items-center gap-1 px-2" : "items-center justify-between px-3"
           }`}
         >
-          {!collapsed && (
-            <span className="text-[13px] font-semibold uppercase tracking-wide text-app-faint">
-              {t("common.appName")}
-            </span>
-          )}
+          {!collapsed && <AppSwitcher />}
           <div className={`flex items-center gap-1 ${collapsed ? "flex-col" : ""}`}>
             <button
               onClick={() => setCollapsed((v) => !v)}

frontend/src/routes/settings/Settings.tsx

@@ -8,9 +8,10 @@ import { useT } from "../../i18n";
 import { api, ApiError } from "../../lib/api";
 import { useMe } from "../../lib/auth";
 import { useTheme } from "../../lib/theme";
+import { setTimeFormat } from "../../lib/timeFormat";
 import { PluginSlot } from "../../plugins/PluginSlot";
 
-const SECTIONS = ["profile", "security", "accounts", "appearance"] as const;
+const SECTIONS = ["profile", "security", "accounts", "appearance", "integrations"] as const;
 type Section = (typeof SECTIONS)[number];
 
 export function Settings() {
@@ -45,6 +46,7 @@ export function Settings() {
           {section === "security" && <SecuritySection />}
           {section === "accounts" && <AccountsSection />}
           {section === "appearance" && <AppearanceSection />}
+          {section === "integrations" && <IntegrationsSection />}
           {/* Plugin-contributed settings UI (SPEC §11.3 settings.page), under Accounts.
               Matches the accounts section width (max-w-5xl) with a gap above it. */}
           {section === "accounts" && (
@@ -595,7 +597,54 @@ function AppearanceSection() {
           <option value="desc">{t("mail.orderNewest")}</option>
         </select>
       </label>
+      <label className="flex items-center justify-between border-b border-app-border py-2 text-sm">
+        <span className="text-app-muted">{t("settings.timeFormat")}</span>
+        <select
+          className="rounded border border-app-border bg-app-surface px-2 py-1"
+          value={settings.data?.time_format ?? "24"}
+          onChange={(e) => {
+            const fmt = e.target.value as "12" | "24";
+            setTimeFormat(fmt);
+            patch.mutate({ time_format: fmt });
+          }}
+        >
+          <option value="24">{t("settings.timeFormat24")}</option>
+          <option value="12">{t("settings.timeFormat12")}</option>
+        </select>
+      </label>
       <Row label={t("settings.timezone")} value={settings.data?.tz ?? "UTC"} />
     </section>
   );
 }
+
+const DEFAULT_JITSI = "https://meet.jit.si/";
+
+function IntegrationsSection() {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const settings = useQuery({ queryKey: ["settings"], queryFn: api.settings });
+  const patch = useMutation({
+    mutationFn: api.patchSettings,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["settings"] }),
+  });
+  const [jitsi, setJitsi] = useState<string | null>(null);
+  const value = jitsi ?? settings.data?.jitsi_server ?? "";
+
+  return (
+    <section className="max-w-4xl space-y-6">
+      <h2 className="text-lg font-semibold">{t("settings.integrations")}</h2>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">{t("settings.jitsi")}</h3>
+        <p className="text-sm text-app-muted">{t("settings.jitsiHint")}</p>
+        <input
+          type="url"
+          className="w-full rounded border border-app-border bg-app-surface px-3 py-2 text-sm"
+          placeholder={DEFAULT_JITSI}
+          value={value}
+          onChange={(e) => setJitsi(e.target.value)}
+          onBlur={(e) => patch.mutate({ jitsi_server: e.target.value.trim() })}
+        />
+      </div>
+    </section>
+  );
+}