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/browser/HostApp.tsx

@@ -25,10 +25,17 @@ import {
   bootstrapHost,
   type DashboardNavigationEntry,
   type EkklesiaHostConfig,
+  type HostAccountPreferences,
   type HostBootstrap,
   HostProtocolError,
   loadHostPrincipal,
 } from "../host-protocol.js";
+import { AccountHomePage, AccountLoadFailedPage, AppearancePage } from "./AccountPages.js";
+import { createMemoryAppearanceCache } from "./appearance-cache.js";
+import {
+  type AppearancePreference,
+  createDetachedAppearancePreference,
+} from "./appearance-preference.js";
 import { ForgotPasswordForm } from "./ForgotPasswordForm.js";
 import type { HostHistory } from "./host-history.js";
 import { createBrowserHostViewport, type HostViewport } from "./host-viewport.js";
@@ -142,6 +149,13 @@ export interface HostAppProps {
    * passes this browser's storage; left unset, the mode lasts only as long as this component.
    */
   readonly sidebarPreference?: SidebarPreference;
+  /**
+   * The signed-in person's appearance and motion as this page applies them (ADR 0062). The entry
+   * point passes one over the document's theme controller and this browser's pre-paint cache; left
+   * unset, choices apply to nothing and last only as long as this component. Must be a stable
+   * reference.
+   */
+  readonly appearance?: AppearancePreference;
   /** Test-only seam, forwarded to {@link ModuleUiFrame}. Production composition leaves it unset. */
   readonly importModule?: ModuleUiImporter;
 }
@@ -278,8 +292,12 @@ export function HostApp(props: HostAppProps): ReactElement {
   // Fallbacks for a composition that supplies neither; created once, so they stay stable.
   const [fallbackViewport] = useState(() => createBrowserHostViewport(undefined));
   const [fallbackPreference] = useState(() => createMemorySidebarPreference());
+  const [fallbackAppearance] = useState(() =>
+    createDetachedAppearancePreference(createMemoryAppearanceCache()),
+  );
   const viewport = props.viewport ?? fallbackViewport;
   const sidebarPreference = props.sidebarPreference ?? fallbackPreference;
+  const appearance = props.appearance ?? fallbackAppearance;
   const subscribe = useCallback((listener: () => void) => history.subscribe(listener), [history]);
   const readPathname = useCallback(() => history.pathname(), [history]);
   const pathname = useSyncExternalStore(subscribe, readPathname, readPathname);
@@ -308,8 +326,38 @@ export function HostApp(props: HostAppProps): ReactElement {
     [],
   );
 
-  const commitResolvedState = useCallback((resolved: ResolvedBootstrapState): void => {
-    setState(resolved);
+  /**
+   * Every resolved bootstrap reconciles the page's appearance with the account (ADR 0062): the
+   * account's preferences replace whatever this browser cached, so a choice made on another device
+   * is in effect here from this load on. A signed-out page follows the system and keeps no cached
+   * choice, so the next person to use this browser does not inherit one. An account that could not
+   * be loaded leaves the cached choice alone rather than guessing.
+   */
+  const commitResolvedState = useCallback(
+    (resolved: ResolvedBootstrapState): void => {
+      if (resolved.status === "ready" && resolved.bootstrap.account !== "unavailable") {
+        appearance.apply(resolved.bootstrap.account.preferences);
+      } else if (resolved.status === "anonymous") {
+        appearance.forget();
+      }
+      setState(resolved);
+    },
+    [appearance],
+  );
+
+  /** A saved preference, as the account answered, kept in the bootstrap's copy of the account. */
+  const recordSavedPreferences = useCallback((preferences: HostAccountPreferences): void => {
+    setState((current) =>
+      current.status === "ready" && current.bootstrap.account !== "unavailable"
+        ? {
+            ...current,
+            bootstrap: {
+              ...current.bootstrap,
+              account: { ...current.bootstrap.account, preferences },
+            },
+          }
+        : current,
+    );
   }, []);
 
   // A non-canonical spelling of a real page (`/example/`) is corrected in place, adding no
@@ -397,9 +445,12 @@ export function HostApp(props: HostAppProps): ReactElement {
       // out while a verification or reset screen was the last anonymous view would show that screen
       // again, describing an emailed link the person has long since finished with.
       setAuthView({ kind: "sign-in" });
-      setState(
-        principal.kind === "anonymous" ? { status: "anonymous" } : { status: "sign-out-failed" },
-      );
+      if (principal.kind === "anonymous") {
+        appearance.forget();
+        setState({ status: "anonymous" });
+      } else {
+        setState({ status: "sign-out-failed" });
+      }
     } catch {
       if (isCurrent(controller, generation)) {
         console.error("[ekklesia] sign out failed");
@@ -410,7 +461,7 @@ export function HostApp(props: HostAppProps): ReactElement {
         activeTransitionRef.current = undefined;
       }
     }
-  }, [beginTransition, config, isCurrent]);
+  }, [appearance, beginTransition, config, isCurrent]);
 
   const onAuthorizationResponse = useCallback(
     (status: 401 | 403): void => {
@@ -440,6 +491,7 @@ export function HostApp(props: HostAppProps): ReactElement {
             transition.controller.abort();
             activeTransitionRef.current = undefined;
             setAuthView({ kind: "sign-in" });
+            appearance.forget();
             setState({ status: "anonymous" });
           }
         })
@@ -463,7 +515,7 @@ export function HostApp(props: HostAppProps): ReactElement {
           }
         });
     },
-    [beginTransition, config],
+    [appearance, beginTransition, config],
   );
 
   const openEntry =
@@ -491,7 +543,11 @@ export function HostApp(props: HostAppProps): ReactElement {
           ? "Overview"
           : route.kind === "module"
             ? (openEntry?.name ?? "This page isn’t available")
-            : "Page not found";
+            : route.kind === "account"
+              ? "Account"
+              : route.kind === "account-section"
+                ? "Appearance"
+                : "Page not found";
   const documentTitle = state.status === "anonymous" ? "Sign in" : pageTitle;
 
   useEffect(() => {
@@ -609,6 +665,7 @@ export function HostApp(props: HostAppProps): ReactElement {
       config={config}
       history={history}
       mainRef={mainRef}
+      account={bootstrap.account}
       navigation={bootstrap.navigation}
       onSignOut={() => void signOut()}
       pageTitle={pageTitle}
@@ -619,6 +676,25 @@ export function HostApp(props: HostAppProps): ReactElement {
     >
       {settingsPage !== undefined ? (
         <SettingsPageView history={history} onRetry={retryBootstrap} page={settingsPage} />
+      ) : route.kind === "account" || route.kind === "account-section" ? (
+        bootstrap.account === "unavailable" ? (
+          <AccountLoadFailedPage onRetry={retryBootstrap} />
+        ) : route.kind === "account" ? (
+          <AccountHomePage
+            account={bootstrap.account}
+            history={history}
+            onSignOut={() => void signOut()}
+          />
+        ) : (
+          <AppearancePage
+            account={bootstrap.account}
+            appearance={appearance}
+            config={config}
+            history={history}
+            onSaved={recordSavedPreferences}
+            onSessionCheck={() => onAuthorizationResponse(403)}
+          />
+        )
       ) : route.kind === "overview" ? (
         <OverviewPage />
       ) : route.kind === "module" ? (