feat: mount discovered module UI in a minimal Ekklesia browser host
CI / verify (pull_request) Successful in 34s
CI / infrastructure-smoke (pull_request) Successful in 21s
CI / migration-smoke (pull_request) Successful in 43s

Phase 6C pass 2. Every link in the module UI chain existed except the one
that closes it: a module could be authored, built, validated, published at a
browser URL, and loaded by a generic loader — and nothing in Ekklesia did any
of it. There was no browser application at all.

Two pieces were missing. A browser could not discover what to mount, and it
must not work that out for itself.

GET /api/v1/module-ui is the inventory: per publishable module, its id and
version, the server-produced artifact URL, the server-produced root of the
module's own API, and the subset of that module's declared permissions the
caller holds. Five fields, each because building a ModuleUiHostContext needs
it — no filesystem paths, and no name/icon/folder/order, because navigation
metadata is a design that does not exist yet. Its module set is the ADR 0025
publication registry rather than a rescan, so the inventory and the artifact
route cannot disagree. It requires a new Core permission, core.modules.ui.read
(baseline authenticated), because it is precisely the enumeration the anonymous
artifact route deliberately withholds.

Both URLs are server-produced. moduleUiArtifactUrl already existed;
moduleApiBaseUrl is now exported and moduleRoutePath builds on it, so each URL
shape has exactly one author. Without it the shell would hardcode
/api/v1/modules/<id> — the prefix ADR 0022 forbids a module UI from spelling,
reappearing in the host instead.

surfaces/shell (@ekklesia/shell) is the repository's first surface: a small
React application built to static files by its own esbuild script. It resolves
the principal, fetches the inventory, builds the host context entirely from
server-derived data, and hands the artifact URL to @ekklesia/module-ui-host.
One frame per selection — keyed by module identity — defeats the stale-load
race; the host owns the container, the loading state, and every failure, so a
broken module costs its own panel rather than the shell.

The shell statically imports no module, and both levels are checked: no source
import may name a module, and the emitted bundle must contain exactly one
dynamic import (the loader's) with no module id, no /api/v1/modules, no eval,
and no blob URL. Permission hints come from Core's own evaluator and stay
presentation-only — the end-to-end test has a UI holding no grant call its API
anyway and still receive 403.

Surfaces may now depend only on browser-safe shared roles; @ekklesia/contracts
is deliberately excluded, since its barrel pulls Drizzle's types and Node's
globals into the browser — the hole ADR 0024 closed one layer down.

Not the Dashboard: no navigation, grouping, icons, ordering, design system, or
routing. The selector is a list of module ids.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
ekklesia
2026-08-22 08:55:44 -05:00
co-authored by Claude Opus 5
parent 7a76ff6f26
commit 616c1d4834
46 changed files with 3629 additions and 36 deletions
+75
View File
@@ -0,0 +1,75 @@
import { copyFile, mkdir, rm } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import esbuild from "esbuild";
/**
* Builds the Ekklesia shell into a static browser application.
*
* This is **not** the module UI build pipeline, and the two must not be conflated. ADR 0023's
* `@ekklesia/module-ui-build` compiles a *module's* `src/ui/index.tsx` into the artifact its
* manifest declares, is owned by the platform so module authors write no bundler configuration, and
* runs when a module is packaged. This script builds *this application*, is owned by this package
* alone, and knows nothing about manifests. They happen to share a bundler; they share no
* configuration, no contract, and no output.
*
* Installed module UIs are deliberately **not** bundled in. The shell has no import of any module,
* so there is nothing for esbuild to reach: every module artifact is fetched at run time from the
* URL the inventory returned. That is the property that makes modules independently installable, and
* bundling one would silently destroy it.
*/
const packageDirectory = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
const outputDirectory = path.join(packageDirectory, "dist", "browser");
const serve = process.argv.includes("--serve");
/**
* Empty means "the API is on this page's own origin" — the expected production shape. Set it to an
* absolute origin for split-origin development (`EKKLESIA_API_BASE_URL=http://127.0.0.1:3000`), and
* add this page's own origin to `EKKLESIA_IDENTITY_TRUSTED_ORIGINS` so the API reflects it for CORS
* and the session cookie travels.
*/
const apiBaseUrl = process.env.EKKLESIA_API_BASE_URL ?? "";
/** @type {import("esbuild").BuildOptions} */
const buildOptions = {
absWorkingDir: packageDirectory,
// Everything the shell needs is bundled; a browser resolves nothing at run time except the module
// artifacts it is told about, which are real URLs rather than bare specifiers.
bundle: true,
define: {
__EKKLESIA_API_BASE_URL__: JSON.stringify(apiBaseUrl),
// React reads this at module scope and a browser has no `process`.
"process.env.NODE_ENV": JSON.stringify(serve ? "development" : "production"),
},
entryPoints: [path.join(packageDirectory, "src", "browser", "main.tsx")],
format: "esm",
jsx: "automatic",
logLevel: "info",
// Unminified, matching the module UI build: an operator is expected to be able to read what their
// installation actually serves, and nothing else in this repository minifies.
minify: false,
outfile: path.join(outputDirectory, "app.js"),
platform: "browser",
sourcemap: true,
// Matches `browser.json`'s `target`, so what TypeScript typechecks and what esbuild emits agree.
target: "es2022",
};
await rm(outputDirectory, { force: true, recursive: true });
await mkdir(outputDirectory, { recursive: true });
await copyFile(path.join(packageDirectory, "index.html"), path.join(outputDirectory, "index.html"));
if (serve) {
const context = await esbuild.context(buildOptions);
await context.watch();
const { host, port } = await context.serve({ servedir: outputDirectory });
console.log(`Ekklesia shell (development) on http://${host}:${port}`);
console.log(
apiBaseUrl === ""
? "API origin: this page's own origin. Set EKKLESIA_API_BASE_URL for a split-origin API."
: `API origin: ${apiBaseUrl}`,
);
} else {
await esbuild.build(buildOptions);
console.log(`Built the Ekklesia shell into ${path.relative(packageDirectory, outputDirectory)}`);
}