Add the account area and account-synced Appearance preferences

Stage 1 PR 6 (ADR 0062). /account shows who is signed in; /account/appearance
chooses System, Light, or Dark and reduced motion (System, Reduce, Allow).

- Core: ekklesia_core_user_preference, one typed, CHECK-constrained,
  nullable column per preference (null = never chosen), migration
  0008_user_preferences (additive), @ekklesia/core/account store, and the
  authenticated-baseline permission core.account.self.manage.
- API: GET /api/v1/account (name, email, preferences) and partial
  PATCH /api/v1/account/preferences, self-only by construction: no user id
  is accepted anywhere; trusted Origin and body limit on the mutation.
- Shell: the account control shows name, email, and initials (never the
  unvetted image URL) and offers Account, Appearance, Sign out; native
  radio groups apply a choice at once through the ADR 0060 controller and
  save it; the server's answer wins and a failed save reverts.
- First paint: a classic, same-origin, render-blocking appearance.js in
  <head> applies a two-word localStorage cache before paint (no inline
  script, CSP unchanged). The account replaces the cache on every load,
  sign-out clears it, and other tabs follow via the storage event.
- Deploy smoke: real-Chromium checks for light/dark, OS emulation,
  overrides, reload persistence, pre-paint, Shadow DOM modules, reduced
  motion, the display staying light, and phone width; the browser
  container gets a 512 MiB /dev/shm so a long session no longer fails
  requests with ERR_INSUFFICIENT_RESOURCES.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

surfaces/shell/src/host-protocol.ts

@@ -1,5 +1,11 @@
-import { SETTINGS_SECTIONS, type SettingsSection } from "./dashboard-routes.js";
+import {
+  EKKLESIA_APPEARANCES,
+  EKKLESIA_MOTION_PREFERENCES,
+  type EkklesiaAppearance,
+  type EkklesiaMotionPreference,
+} from "@ekklesia/design-tokens";
 import type { ModuleUiPrincipal } from "@ekklesia/module-ui-sdk";
+import { SETTINGS_SECTIONS, type SettingsSection } from "./dashboard-routes.js";
 
 /**
  * How this shell reaches the Ekklesia API.
@@ -39,6 +45,8 @@ const PRINCIPAL_PATH = "/api/v1/principal";
 const DASHBOARD_NAVIGATION_PATH = "/api/v1/dashboard/navigation";
 const DASHBOARD_SETTINGS_PATH = "/api/v1/dashboard/settings";
 const MODULE_DISPLAYS_PATH = "/api/v1/module-displays";
+const ACCOUNT_PATH = "/api/v1/account";
+const ACCOUNT_PREFERENCES_PATH = "/api/v1/account/preferences";
 
 const MODULE_ID_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u;
 const MODULE_ID_MAX_LENGTH = 64;
@@ -404,6 +412,7 @@ async function requestPlatformMutation(
   rootRelativePath: string,
   body: unknown,
   signal?: AbortSignal,
+  method: "PATCH" | "POST" = "POST",
 ): Promise<unknown> {
   const performRequest = config.fetch ?? fetch;
   let response: Response;
@@ -413,7 +422,7 @@ async function requestPlatformMutation(
       cache: "no-store",
       credentials: "include",
       headers: { accept: "application/json", "content-type": "application/json" },
-      method: "POST",
+      method,
       redirect: "error",
       ...(signal ? { signal } : {}),
     });
@@ -935,6 +944,79 @@ export async function loadDashboardSettings(
   );
 }
 
+/**
+ * A signed-in person's own appearance and motion preferences, as their account stores them
+ * (ADR 0062). The value sets are the design tokens' own, so what the account stores is exactly what
+ * the theme controller applies.
+ */
+export interface HostAccountPreferences {
+  readonly appearance: EkklesiaAppearance;
+  readonly motion: EkklesiaMotionPreference;
+}
+
+/** Who is signed in, as the account area shows them: their name and email, and their preferences.
+ * Nothing else about the account reaches the browser. */
+export interface HostAccount {
+  readonly name: string;
+  readonly email: string;
+  readonly preferences: HostAccountPreferences;
+}
+
+/** Strict: exactly the two preferences, each one of its known values. */
+export function parseHostAccountPreferences(value: unknown): HostAccountPreferences {
+  if (
+    !hasExactKeys(value, ["appearance", "motion"]) ||
+    !EKKLESIA_APPEARANCES.includes(value.appearance as EkklesiaAppearance) ||
+    !EKKLESIA_MOTION_PREFERENCES.includes(value.motion as EkklesiaMotionPreference)
+  ) {
+    throw new HostProtocolError("HOST_RESPONSE_INVALID");
+  }
+  return Object.freeze({
+    appearance: value.appearance as EkklesiaAppearance,
+    motion: value.motion as EkklesiaMotionPreference,
+  });
+}
+
+/** Strict: exactly name, email, and preferences. A name or email is rendered as text, never as
+ * markup or a URL, so the only requirement is that each is a string with something in it. */
+export function parseHostAccount(value: unknown): HostAccount {
+  if (
+    !hasExactKeys(value, ["email", "name", "preferences"]) ||
+    typeof value.name !== "string" ||
+    typeof value.email !== "string" ||
+    value.email.trim().length === 0
+  ) {
+    throw new HostProtocolError("HOST_RESPONSE_INVALID");
+  }
+  return Object.freeze({
+    email: value.email,
+    name: value.name,
+    preferences: parseHostAccountPreferences(value.preferences),
+  });
+}
+
+/** The signed-in person's own account. There is no way to ask for anyone else's. */
+export async function loadHostAccount(
+  config: EkklesiaHostConfig,
+  signal?: AbortSignal,
+): Promise<HostAccount> {
+  return parseHostAccount(
+    await requestPlatformJson(config, ACCOUNT_PATH, signal, { forbidden: "HOST_ACCESS_DENIED" }),
+  );
+}
+
+/** Changes some of the signed-in person's own preferences and returns everything now in effect —
+ * the server's answer, which the shell applies, rather than what it asked for. */
+export async function saveHostAccountPreferences(
+  config: EkklesiaHostConfig,
+  update: Partial<HostAccountPreferences>,
+  signal?: AbortSignal,
+): Promise<HostAccountPreferences> {
+  return parseHostAccountPreferences(
+    await requestPlatformMutation(config, ACCOUNT_PREFERENCES_PATH, update, signal, "PATCH"),
+  );
+}
+
 export interface HostBootstrap {
   readonly principal: ModuleUiPrincipal;
   readonly navigation: DashboardNavigation;
@@ -944,6 +1026,13 @@ export interface HostBootstrap {
    * is withheld and its pages say they could not be loaded.
    */
   readonly settings: DashboardSettings | "unavailable";
+  /**
+   * The signed-in person's own account, or `"unavailable"` when it could not be loaded (and for an
+   * anonymous viewer, who has none). Like Settings, an account that cannot be loaded never stops the
+   * Dashboard: the account control shows no name, the theme stays as this browser last knew it, and
+   * the account pages say they could not be loaded.
+   */
+  readonly account: HostAccount | "unavailable";
 }
 
 const EMPTY_SETTINGS: DashboardSettings = Object.freeze({
@@ -968,9 +1057,14 @@ export async function bootstrapHost(
 ): Promise<HostBootstrap> {
   const principal = await loadHostPrincipal(config, signal);
   if (principal.kind === "anonymous") {
-    return { navigation: EMPTY_NAVIGATION, principal, settings: EMPTY_SETTINGS };
+    return {
+      account: "unavailable",
+      navigation: EMPTY_NAVIGATION,
+      principal,
+      settings: EMPTY_SETTINGS,
+    };
   }
-  const [navigation, settings] = await Promise.all([
+  const [navigation, settings, account] = await Promise.all([
     loadDashboardNavigation(config, signal),
     loadDashboardSettings(config, signal).catch((error: unknown) => {
       if (signal?.aborted) {
@@ -979,6 +1073,13 @@ export async function bootstrapHost(
       console.error("[ekklesia] settings navigation unavailable", error);
       return "unavailable" as const;
     }),
+    loadHostAccount(config, signal).catch((error: unknown) => {
+      if (signal?.aborted) {
+        throw error;
+      }
+      console.error("[ekklesia] account unavailable", error);
+      return "unavailable" as const;
+    }),
   ]);
-  return { navigation, principal, settings };
+  return { account, navigation, principal, settings };
 }