Gmail label sync + no-dup backfill, live label/UI updates, account-delete cleanup, Sync-SPAM toggle, sidebar logo

Gmail sync (SPEC: Gmail sync):
- Provider fetches X-GM-LABELS when X-GM-EXT-1 is advertised; parses custom labels
  (system labels dropped, mUTF-7 decoded) onto RemoteMessage.
- Engine syncs only system folders + All Mail for Gmail, skips every label folder,
  and dedupes the All Mail pass by Message-ID — kills the INBOX/All-Mail duplication.
- Custom labels ride the message.new event; the labels plugin subscribes and maps
  them to chips as "<name> [Gmail]" (per-message + thread aggregate + known set),
  so labels fill in gradually with the sync window. Non-ASCII labels decode right.

Labels self-healing (message-driven reconcile):
- Per-message keys are the source of truth; t: aggregates and _labels are derived.
  Reconcile drops labels of deleted messages, regroups survivors by their current
  thread (fixing JWZ thread merges), rewrites changed t: keys, and rebuilds _labels
  from live messages — keeping user labels, dropping orphaned Gmail ones.
- New SDK reads: sdk.threads.existing / sdk.messages.threads_of. Sidebar refreshes
  live via a plugin.labels.changed WS event on new labels.

Account deletion: prune threads left empty after the cascade (they were user-scoped,
so only messages cascaded) + de-list the account from surviving cross-account threads.

Sync SPAM: opt-in per-account sync_spam (migration 0015, default off) — the engine
skips the Junk folder in backfill and poll unless enabled; wizard checkbox added.

Robustness / UX:
- WebSocket auto-reconnects with backoff and resyncs on (re)connect, and account
  add/delete invalidates threads/labels — no more hard refresh for live updates.
- Backfill banner + sidebar ring also require done < total, so a completed account
  can't leave a stuck "X of X".
- Scrub lone UTF-16 surrogates from parsed headers/bodies so bad messages no longer
  crash the backfill on Postgres text/JSONB.
- Ultimo signet logo in the Mail/Calendar/Contacts sidebar header (and at the top of
  the collapsed rail), via the shared plugin-ui.css + MailLayout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA

frontend/src/routes/settings/Settings.tsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { QRCodeSVG } from "qrcode.react";
 import { useEffect, useState } from "react";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 import { RichTextEditor } from "../../components/compose/RichTextEditor";
 import { useT } from "../../i18n";
@@ -11,6 +11,7 @@ import { useMe } from "../../lib/auth";
 import { useTheme } from "../../lib/theme";
 import { setTimeFormat } from "../../lib/timeFormat";
 import { PluginSlot } from "../../plugins/PluginSlot";
+import { AccountWizard } from "../wizard/AccountWizard";
 
 const SECTIONS = ["profile", "security", "accounts", "calendars", "appearance", "integrations"] as const;
 type Section = (typeof SECTIONS)[number];
@@ -21,10 +22,20 @@ export function Settings() {
   const [searchParams] = useSearchParams();
   // Where the back button returns to — set by whoever opened Settings (Mail or a
   // plugin like Calendar via ?from=). Only accept internal paths; default to Mail.
+  const navigate = useNavigate();
   const rawFrom = searchParams.get("from") ?? "";
   const from = rawFrom.startsWith("/") ? rawFrom : "/mail";
   const fromQuery = `?from=${encodeURIComponent(from)}`;
-  const section = (SECTIONS.includes(params.section as Section) ? params.section : "profile") as Section;
+  // The add-account wizard renders inside this layout (route /settings/accounts/new),
+  // with the Accounts nav item highlighted.
+  const addingAccount = useLocation().pathname.endsWith("/accounts/new");
+  const section = (
+    addingAccount
+      ? "accounts"
+      : SECTIONS.includes(params.section as Section)
+        ? params.section
+        : "profile"
+  ) as Section;
 
   return (
     <div className="flex h-screen flex-col">
@@ -49,15 +60,16 @@ export function Settings() {
           ))}
         </nav>
         <main className="flex-1 overflow-y-auto p-6">
-          {section === "profile" && <ProfileSection />}
-          {section === "security" && <SecuritySection />}
-          {section === "accounts" && <AccountsSection />}
+          {addingAccount && <AccountWizard embedded onDone={() => navigate("/settings/accounts")} />}
+          {!addingAccount && section === "profile" && <ProfileSection />}
+          {!addingAccount && section === "security" && <SecuritySection />}
+          {!addingAccount && section === "accounts" && <AccountsSection />}
           {section === "calendars" && <CalendarsSection />}
           {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" && (
+          {!addingAccount && section === "accounts" && (
             <div className="mt-8 max-w-5xl">
               <PluginSlot name="settings.page" />
             </div>