Files
Ekklesia/surfaces/shell/src/browser/main.tsx
T
ekklesiaandClaude Opus 5.5 f63f80f2f0
CI / verify (pull_request) Successful in 49s
CI / infrastructure-smoke (pull_request) Successful in 13s
CI / migration-smoke (pull_request) Successful in 1m47s
CI / image-build (pull_request) Successful in 19s
CI / deploy-smoke (same-origin) (pull_request) Successful in 49s
CI / deploy-smoke (split) (pull_request) Successful in 1m4s
feat: support split Dashboard and API origins (ADR 0045)
An installation can now serve the Dashboard and the API on sibling
hostnames (dash./api.) beside the default same-origin topology, from one
image and with configuration alone.

- The Dashboard learns its API origin at run time: the built page carries
  one empty <meta name="ekklesia-api-origin">, which the API fills with its
  identity base URL's origin at startup, before computing the page's ETag.
  The shell accepts only a canonical http(s) origin and otherwise fails
  closed without making a request. The build-time EKKLESIA_API_BASE_URL is
  gone from the bundle; the development server injects the same element.
- The display host stays on the API's origin, so its device cookies,
  requests, and offline cache are unchanged.
- The API trusts its own origin (trusted origins plus the identity base
  URL), as Better Auth already does, so the display page's mutations pass
  the origin check without operators listing it.
- Doctor validates EKKLESIA_DASHBOARD_ORIGIN exactly as the API's startup
  does (it previously skipped it), reports the topology without printing
  hostnames, and warns when split hostnames are not siblings.
- The module UI contract states the CORS header limit (safelisted headers
  plus Content-Type, safelisted response headers only).
- Reference deployment: Caddyfile.split.example (Dashboard hostname serves
  / and its script; API hostname serves /api/*, /display/*, and the
  display script; each refuses the other's paths) and
  EKKLESIA_DASHBOARD_HOSTNAME in the proxy overlay and env examples.
- The deploy smoke test runs either topology (CI runs both). The split run
  installs the module template as a test-only module, checks per-hostname
  routing and exact CORS, then drives a digest-pinned headless Chromium
  over the DevTools protocol, with no added dependency: sign-in on the
  Dashboard hostname, the session cookie host-only on the API hostname,
  the module UI imported cross-origin and its credentialed request
  succeeding, the display and its service worker on the API hostname, and
  sign-out.

ADR 0045 is marked Accepted.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-03 14:47:36 -05:00

68 lines
2.7 KiB
TypeScript

import { installEkklesiaDesignTokens } from "@ekklesia/design-tokens";
import { EkklesiaUiStyles } from "@ekklesia/ui";
import { createRoot } from "react-dom/client";
import { consumeAuthLanding } from "../auth-protocol.js";
import { type EkklesiaHostConfig, resolveApiOrigin } from "../host-protocol.js";
import { HostApp } from "./HostApp.js";
/**
* The one place the shell touches a browser global.
*
* The API that served this page wrote its own origin into `<meta name="ekklesia-api-origin">`
* (ADR 0045): empty in the same-origin topology, the API's hostname when the Dashboard and the API
* live on separate origins. Read at run time, so one built shell serves either topology. Everything
* downstream receives the resolved origin as a plain argument, so no other file in this package
* reads `window`.
*/
const apiBaseUrl = resolveApiOrigin(
document.querySelector<HTMLMetaElement>('meta[name="ekklesia-api-origin"]')?.content,
window.location.origin,
);
/** Read once, before anything renders, and stripped from the address bar in the same step. See
* `consumeAuthLanding` for why the token must not stay in the URL. */
const authLanding = consumeAuthLanding(window.location, window.history);
const container = document.getElementById("ekklesia-host");
if (!container) {
throw new Error("The Ekklesia shell requires a #ekklesia-host element.");
}
/**
* The host root installs the platform's default theme once, at the document (ADR 0039).
*
* This is what makes the tokens available to *everything* on the page, including each module UI
* artifact mounted inside its own isolated root: CSS custom properties inherit through a shadow
* boundary, so a module reads `var(--ekklesia-…)` without the host reaching into the artifact or the
* artifact importing the host. Only the values live here — the platform ships no theme editor, and
* an installation that wants different values overrides these declarations at its own root.
*/
installEkklesiaDesignTokens(document);
/**
* A page whose API origin is not a canonical origin fails closed: it makes no request at all, because
* every request it would make carries credentials to an address it cannot vouch for. The message is
* fixed and names no address.
*/
function renderHost(config: EkklesiaHostConfig | undefined) {
if (!config) {
return (
<main data-testid="host-configuration-invalid" role="alert">
This page cannot start: the server address it was given is not valid.
</main>
);
}
return authLanding ? (
<HostApp authLanding={authLanding} config={config} />
) : (
<HostApp config={config} />
);
}
createRoot(container).render(
<>
<EkklesiaUiStyles />
{renderHost(apiBaseUrl === undefined ? undefined : { apiBaseUrl })}
</>,
);