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]>

apps/api/src/account-routes.ts

@@ -0,0 +1,157 @@
+import { isAuthenticatedPrincipal } from "@ekklesia/contracts";
+import {
+  type AccountPreferences,
+  type AccountStore,
+  AccountStoreError,
+  parseAccountPreferencesUpdate,
+} from "@ekklesia/core/account";
+import { CORE_ACCOUNT_SELF_MANAGE } from "@ekklesia/core/authorization";
+import { type Context, Hono } from "hono";
+import {
+  type AuthorizationMiddlewareOptions,
+  getAuthorizedPrincipal,
+  requirePermission,
+  requireTrustedOrigin,
+} from "./authorization-middleware.js";
+import { CORE_MUTATION_MAX_BODY_BYTES, platformBodyLimit } from "./body-limits.js";
+
+export const ACCOUNT_PATH = "/api/v1/account";
+export const ACCOUNT_PREFERENCES_PATH = `${ACCOUNT_PATH}/preferences`;
+
+/** `GET /api/v1/account`: the signed-in person's own account, as the account area shows it. */
+export interface AccountResponse {
+  readonly name: string;
+  readonly email: string;
+  readonly preferences: AccountPreferences;
+}
+
+export interface CreateAccountRoutesOptions extends AuthorizationMiddlewareOptions {
+  readonly store: AccountStore;
+  readonly trustedOrigins: ReadonlySet<string>;
+}
+
+function sanitizedFailure(c: Context, status: 400 | 403 | 404 | 503, code: string): Response {
+  c.header("Cache-Control", "no-store");
+  return c.json({ code }, status);
+}
+
+/** Maps the store's own sanitized codes onto HTTP without inventing a second vocabulary. */
+function storeFailure(
+  c: Context,
+  error: unknown,
+  fallback: "ACCOUNT_READ_FAILED" | "ACCOUNT_WRITE_FAILED",
+): Response {
+  if (error instanceof AccountStoreError) {
+    if (error.code === "ACCOUNT_NOT_FOUND") {
+      return sanitizedFailure(c, 404, error.code);
+    }
+    if (error.code === "ACCOUNT_PREFERENCES_INVALID") {
+      return sanitizedFailure(c, 400, "INVALID_REQUEST");
+    }
+    return sanitizedFailure(c, 503, error.code);
+  }
+  return sanitizedFailure(c, 503, fallback);
+}
+
+async function readJsonBody(c: Context): Promise<unknown> {
+  try {
+    return (await c.req.json()) as unknown;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * A signed-in person's own account (ADR 0062): who they are signed in as, and their own
+ * preferences.
+ *
+ * ## Self-only by construction
+ *
+ * Neither route accepts a user id — not in the path, not in the query, not in the body. The account
+ * is always the one the **session** names, so there is no request that could read or change anyone
+ * else's, whatever permission the caller holds. A body that names any key besides a known
+ * preference is refused whole.
+ *
+ * ## Authorization
+ *
+ * Both routes require `core.account.self.manage`, whose baseline is `authenticated`: every
+ * signed-in person may manage their own account, and needs no church-management permission to do
+ * so. An anonymous caller and a paired device are refused (`403`). Changing a preference is a
+ * mutation like any other Core mutation: an exact trusted `Origin` and a bounded body are checked
+ * before authorization work begins.
+ *
+ * ## What the browser learns
+ *
+ * Name, email, and preferences — exactly what the account area shows, and nothing else. Not the
+ * account's image URL, verification state, timestamps, or any credential. Responses are per-person
+ * and never cached.
+ */
+export function createAccountRoutes(options: CreateAccountRoutesOptions): Hono {
+  const routes = new Hono();
+  const requireSelf = requirePermission(options, CORE_ACCOUNT_SELF_MANAGE);
+  const requireOrigin = requireTrustedOrigin(options.trustedOrigins);
+  const mutationBodyLimit = platformBodyLimit(CORE_MUTATION_MAX_BODY_BYTES);
+
+  routes.get(ACCOUNT_PATH, requireSelf, async (c) => {
+    c.header("Cache-Control", "no-store");
+    c.header("Vary", "Origin, Cookie");
+    const principal = getAuthorizedPrincipal(c);
+    // Unreachable through the `authenticated` baseline, which only a person satisfies; checked
+    // again so the account read can never be keyed by anything but a person's own session.
+    if (!isAuthenticatedPrincipal(principal)) {
+      return sanitizedFailure(c, 403, "AUTHORIZATION_DENIED");
+    }
+    try {
+      const account = await options.store.readAccount(principal.userId);
+      if (!account) {
+        return sanitizedFailure(c, 404, "ACCOUNT_NOT_FOUND");
+      }
+      return c.json(
+        {
+          email: account.email,
+          name: account.name,
+          preferences: {
+            appearance: account.preferences.appearance,
+            motion: account.preferences.motion,
+          },
+        } satisfies AccountResponse,
+        200,
+      );
+    } catch (error) {
+      return storeFailure(c, error, "ACCOUNT_READ_FAILED");
+    }
+  });
+
+  routes.patch(
+    ACCOUNT_PREFERENCES_PATH,
+    requireOrigin,
+    mutationBodyLimit,
+    requireSelf,
+    async (c) => {
+      c.header("Cache-Control", "no-store");
+      c.header("Vary", "Origin, Cookie");
+      const principal = getAuthorizedPrincipal(c);
+      if (!isAuthenticatedPrincipal(principal)) {
+        return sanitizedFailure(c, 403, "AUTHORIZATION_DENIED");
+      }
+      const update = parseAccountPreferencesUpdate(await readJsonBody(c));
+      if (!update) {
+        return sanitizedFailure(c, 400, "INVALID_REQUEST");
+      }
+      try {
+        const preferences = await options.store.updatePreferences(principal.userId, update);
+        return c.json(
+          {
+            appearance: preferences.appearance,
+            motion: preferences.motion,
+          } satisfies AccountPreferences,
+          200,
+        );
+      } catch (error) {
+        return storeFailure(c, error, "ACCOUNT_WRITE_FAILED");
+      }
+    },
+  );
+
+  return routes;
+}

apps/api/src/app.ts

@@ -8,6 +8,7 @@ import type {
   AuthorizationStore,
   PermissionRegistry,
 } from "@ekklesia/core/authorization";
+import type { AccountStore } from "@ekklesia/core/account";
 import type { DashboardStore } from "@ekklesia/core/dashboard";
 import type { DeviceStore } from "@ekklesia/core/devices";
 import { type EkklesiaIdentityRuntime, IdentityRuntimeError } from "@ekklesia/core/identity";
@@ -28,6 +29,7 @@ import type { Context, MiddlewareHandler } from "hono";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { AUTH_REQUEST_MAX_BODY_BYTES, platformBodyLimit } from "./body-limits.js";
+import { createAccountRoutes } from "./account-routes.js";
 import type { DashboardHostAssets } from "./dashboard-host-assets.js";
 import { createDashboardHostRoutes } from "./dashboard-host-routes.js";
 import { createDashboardRoutes } from "./dashboard-routes.js";
@@ -141,6 +143,10 @@ export interface CreateApiAppOptions {
    * presentation only — nothing reachable through this store influences discovery, dependency
    * ordering, module startup, or any authorization decision. */
   readonly dashboard: DashboardStore;
+  /** Core's persistence for a signed-in person's own account summary and preferences (ADR 0062).
+   * Required like `dashboard`: every installation has accounts. Reachable only through routes that
+   * take the account from the session, never from the request. */
+  readonly account: AccountStore;
   /**
    * The built Dashboard's two files, read once by production startup (ADR 0044). Required rather
    * than optional, unlike `displayHostAssets`: every installation has a Dashboard, and a missing
@@ -469,6 +475,20 @@ export function createApiApp(options: CreateApiAppOptions): Hono {
     }),
   );
 
+  // The signed-in person's own account and preferences (ADR 0062). Self-only by construction: the
+  // account is always the session's, and no request value can name another. See
+  // `./account-routes.js`.
+  app.route(
+    "/",
+    createAccountRoutes({
+      evaluator: options.authorization.evaluator,
+      registry: options.authorization.registry,
+      runtime,
+      store: options.account,
+      trustedOrigins: allowedOrigins,
+    }),
+  );
+
   // Mounted before module routes and, critically, under its own sibling prefix: `/api/v1/modules/`
   // belongs entirely to installed modules, so the platform's own lifecycle resource lives beside it
   // rather than inside it. See `./module-lifecycle-routes.js`.

apps/api/src/dashboard-host-assets.ts

@@ -3,7 +3,9 @@ import { readFile } from "node:fs/promises";
 import { dashboardHostAssetUrls } from "@ekklesia/shell/dashboard-assets";
 
 /**
- * The two immutable, platform-owned files that make up the built Ekklesia Dashboard (ADR 0044).
+ * The three immutable, platform-owned files that make up the built Ekklesia Dashboard (ADR 0044):
+ * the page, its application script, and the small pre-paint appearance script the page loads in
+ * `<head>` (ADR 0062).
  *
  * Exactly the model `./display-host-assets.js` uses: read once, before the HTTP listener is bound,
  * from the exact URLs the surface package exports. Request input is never involved in this read, the
@@ -16,6 +18,8 @@ export interface DashboardHostAssets {
   readonly htmlEtag: string;
   readonly script: string;
   readonly scriptEtag: string;
+  readonly appearanceScript: string;
+  readonly appearanceScriptEtag: string;
 }
 
 /** A startup failure with a fixed, non-secret shape. The originating filesystem exception, package
@@ -42,11 +46,21 @@ function strongEtag(text: string): string {
  * can never be paired with an ETag from another. Empty output is a failed shell build rather than a
  * valid page that can never render anything.
  */
-export function createDashboardHostAssets(html: string, script: string): DashboardHostAssets {
-  if (html.trim().length === 0 || script.trim().length === 0) {
+export function createDashboardHostAssets(
+  html: string,
+  script: string,
+  appearanceScript: string,
+): DashboardHostAssets {
+  if (
+    html.trim().length === 0 ||
+    script.trim().length === 0 ||
+    appearanceScript.trim().length === 0
+  ) {
     throw new DashboardHostAssetError();
   }
   return Object.freeze({
+    appearanceScript,
+    appearanceScriptEtag: strongEtag(appearanceScript),
     html,
     htmlEtag: strongEtag(html),
     script,
@@ -92,7 +106,7 @@ export function renderDashboardPage(html: string, apiOrigin: string): string {
   return parts.join(`<meta content="${escaped}" name="ekklesia-api-origin" />`);
 }
 
-/** Loads only the two surface-declared files, and renders the API origin into the page. A missing,
+/** Loads only the three surface-declared files, and renders the API origin into the page. A missing,
  * unreadable, or incompatible build fails startup rather than leaving an API whose own origin answers
  * `/` with a 404 or a page that cannot find its API. */
 export async function loadDashboardHostAssets(apiOrigin: string): Promise<DashboardHostAssets> {
@@ -101,7 +115,12 @@ export async function loadDashboardHostAssets(apiOrigin: string): Promise<Dashbo
     // rejected sibling read is left running after this function has already failed.
     const html = await readFile(new URL(dashboardHostAssetUrls.html), "utf8");
     const script = await readFile(new URL(dashboardHostAssetUrls.script), "utf8");
-    return createDashboardHostAssets(renderDashboardPage(html, apiOrigin), script);
+    const appearanceScript = await readFile(new URL(dashboardHostAssetUrls.appearance), "utf8");
+    return createDashboardHostAssets(
+      renderDashboardPage(html, apiOrigin),
+      script,
+      appearanceScript,
+    );
   } catch {
     throw new DashboardHostAssetError();
   }

apps/api/src/dashboard-host-routes.ts

@@ -17,6 +17,8 @@ import { createDashboardHostAssets, type DashboardHostAssets } from "./dashboard
  */
 export const DASHBOARD_HOST_PAGE_PATH = "/";
 export const DASHBOARD_HOST_SCRIPT_PATH = "/assets/ekklesia-dashboard/app.js";
+/** The pre-paint appearance script (ADR 0062), beside the application script. */
+export const DASHBOARD_HOST_APPEARANCE_SCRIPT_PATH = "/assets/ekklesia-dashboard/appearance.js";
 
 /**
  * Revalidate-always with a strong `ETag`, exactly the module UI and display-host script policy. The
@@ -56,8 +58,12 @@ export class DashboardHostConfigurationError extends Error {
  * a composition can never pair bytes with a validator computed from different bytes. */
 function snapshotAssets(input: DashboardHostAssets): DashboardHostAssets {
   try {
-    const snapshot = createDashboardHostAssets(input.html, input.script);
-    if (snapshot.htmlEtag !== input.htmlEtag || snapshot.scriptEtag !== input.scriptEtag) {
+    const snapshot = createDashboardHostAssets(input.html, input.script, input.appearanceScript);
+    if (
+      snapshot.htmlEtag !== input.htmlEtag ||
+      snapshot.scriptEtag !== input.scriptEtag ||
+      snapshot.appearanceScriptEtag !== input.appearanceScriptEtag
+    ) {
       throw new DashboardHostConfigurationError();
     }
     return snapshot;
@@ -169,5 +175,17 @@ export function createDashboardHostRoutes(
     ),
   );
 
+  // Same-origin, revalidated like the application script, and carrying nothing but code: the
+  // person's cached choice lives in their browser and is read by this script, never served by it.
+  routes.get(DASHBOARD_HOST_APPEARANCE_SCRIPT_PATH, (c) =>
+    fixedAsset(
+      c.req.header("if-none-match"),
+      snapshot.appearanceScript,
+      snapshot.appearanceScriptEtag,
+      "text/javascript; charset=utf-8",
+      {},
+    ),
+  );
+
   return routes;
 }

apps/api/src/database.ts

@@ -1,4 +1,5 @@
 import type { ModuleDatabaseExecutor, ModuleId } from "@ekklesia/contracts";
+import { type AccountDrizzleDatabase, createAccountDrizzleView } from "@ekklesia/core/account";
 import {
   type AuthorizationDrizzleDatabase,
   createAuthorizationDrizzleView,
@@ -21,6 +22,7 @@ import {
 } from "@ekklesia/core/modules";
 
 export interface ApiDatabaseHandle {
+  readonly account: AccountDrizzleDatabase;
   readonly authorization: AuthorizationDrizzleDatabase;
   readonly devices: DeviceDrizzleDatabase;
   readonly dashboard: DashboardDrizzleDatabase;
@@ -74,6 +76,7 @@ export function createApiDatabase(
   const { close, pool } = createValidatedPostgresPool(databaseUrl, options);
 
   return Object.freeze({
+    account: createAccountDrizzleView(pool),
     authorization: createAuthorizationDrizzleView(pool),
     close,
     devices: createDeviceDrizzleView(pool),

apps/api/src/server.ts

@@ -6,6 +6,7 @@ import {
   createAuthorizationEvaluator,
   createAuthorizationStore,
 } from "@ekklesia/core/authorization";
+import { createAccountStore } from "@ekklesia/core/account";
 import { createDashboardStore } from "@ekklesia/core/dashboard";
 import { createDeviceStore } from "@ekklesia/core/devices";
 import { type HostEnvironment, loadHostConfiguration } from "@ekklesia/core/host";
@@ -639,6 +640,8 @@ export async function startApi(
       },
       // A typed view over the same single pool as identity, authorization, and the module facade.
       dashboard: createDashboardStore(databaseHandle.dashboard),
+      // The same pool again: a person's own account summary and preferences (ADR 0062).
+      account: createAccountStore(databaseHandle.account),
       dashboardHostAssets,
       // The app is only composed after `startDiscoveredModuleRuntime` resolved, so module startup
       // has completed whenever it can answer; it stops counting as complete once shutdown begins.