M3 plugin platform: frontend host, reference plugins, UI kit + docs

Completes M3 (SPEC §11 + §12 acceptance) on top of the backend platform (4e077f1).

Frontend host (§11.3):
- src/plugins/: manifest loader, runtime ESM bundle loader (framework-agnostic
  mount contract), PluginSlot, PluginPage (app.page at /p/*), plugin context
  (scoped api/events/i18n), capabilities hook. Wired slots into ThreadView
  (message.actions/message.banner), MailLayout sidebar (sidebar.section + page nav)
  and Settings→Accounts (settings.page); ws.ts fans out core + plugin.* events.
- plugin-ui.css: theme-aware .wm-* classes so bundles don't re-derive inline styles.

SDK additions:
- CurrentUserId + require_csrf (plugin-router auth), messages.envelope/header,
  actions.set_flags/trash, sdk.enqueue.

Reference plugins (plugins/, installed via webmail.plugins entry points):
- hello: skeleton page-plugin (app.page + plg_hello_note w/ RLS + cron job) —
  install→run→uninstall --drop-data leaves zero residue.
- labels: message.actions + sidebar.section slots, KV only, zero core diffs.
- filters: message.new hook -> match (subject/from/to) -> Mark read / Pin / Delete
  (delete = move thread to Trash via the core path).

docs/plugins.md: full authoring guide + a complete "Unsubscribe button" worked
example (the §12 "writable from docs alone" bar).

Also: conftest resets the arq pool between tests (loop-bound global, like engine/redis).

Gates: backend ruff + mypy --strict (107) + full suite 337; frontend tsc + eslint
+ vitest (11) + vite build.

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

frontend/src/routes/MailLayout.tsx

@@ -16,6 +16,8 @@ import type { MessageKey } from "../i18n/en";
 import { api } from "../lib/api";
 import type { QuotaOut, SavedSearch, ThreadSummary } from "../lib/types";
 import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";
+import { usePluginPages } from "../plugins/manifest";
+import { PluginSlot } from "../plugins/PluginSlot";
 
 function quotaLabel(q: QuotaOut): string {
   const pct = q.quota_bytes > 0 ? (q.used_bytes / q.quota_bytes) * 100 : 0;
@@ -43,6 +45,7 @@ const FOLDERS: { view: string; icon: string; label: MessageKey }[] = [
 
 export function MailLayout() {
   const t = useT();
+  const pluginPages = usePluginPages();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const match = useMatch("/mail/t/:threadId");
@@ -536,6 +539,23 @@ export function MailLayout() {
               )}
             </>
           )}
+          {/* Plugin pages (app.page) get a nav entry; clicking opens /p{route}. */}
+          {pluginPages.map((p) => (
+            <SidebarItem
+              key={`${p.plugin}${p.route}`}
+              active={false}
+              collapsed={collapsed}
+              title={collapsed ? p.nav.label : undefined}
+              onClick={() => navigate(`/p${p.route}`)}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="shrink-0" aria-hidden>
+                <path d="M10 3.5a1.5 1.5 0 0 1 3 0V5h3.5A1.5 1.5 0 0 1 18 6.5V10h1.5a1.5 1.5 0 0 1 0 3H18v3.5a1.5 1.5 0 0 1-1.5 1.5H13v-1.5a1.5 1.5 0 0 0-3 0V18H6.5A1.5 1.5 0 0 1 5 16.5V13H6.5a1.5 1.5 0 0 0 0-3H5V6.5A1.5 1.5 0 0 1 6.5 5H10V3.5z" />
+              </svg>
+              {!collapsed && <span className="flex-1 truncate">{p.nav.label}</span>}
+            </SidebarItem>
+          ))}
+          {/* Plugin-contributed sidebar sections (SPEC §11.3 sidebar.section). */}
+          {!collapsed && <PluginSlot name="sidebar.section" />}
         </nav>
         <div className="border-t border-app-border p-2 text-[15px]">
           <Link

frontend/src/routes/settings/Settings.tsx

@@ -8,6 +8,7 @@ import { useT } from "../../i18n";
 import { api, ApiError } from "../../lib/api";
 import { useMe } from "../../lib/auth";
 import { useTheme } from "../../lib/theme";
+import { PluginSlot } from "../../plugins/PluginSlot";
 
 const SECTIONS = ["profile", "security", "accounts", "appearance"] as const;
 type Section = (typeof SECTIONS)[number];
@@ -44,6 +45,13 @@ export function Settings() {
           {section === "security" && <SecuritySection />}
           {section === "accounts" && <AccountsSection />}
           {section === "appearance" && <AppearanceSection />}
+          {/* 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" && (
+            <div className="mt-8 max-w-5xl">
+              <PluginSlot name="settings.page" />
+            </div>
+          )}
         </main>
       </div>
     </div>