@magland/mochi 0.3.1 → 0.4.1

package/dist/forms.js

@@ -2,31 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.flashBanner = flashBanner;
 exports.loginPage = loginPage;
+exports.loginLinkPage = loginLinkPage;
+exports.loginLinkConfirmPage = loginLinkConfirmPage;
+exports.accountPage = accountPage;
+exports.accountLinkPage = accountLinkPage;
 exports.newRepoPage = newRepoPage;
 exports.forkPage = forkPage;
 exports.importPage = importPage;
+exports.syncPage = syncPage;
 exports.newCollectionPage = newCollectionPage;
 exports.collectionSettingsPage = collectionSettingsPage;
 exports.editFilePage = editFilePage;
+exports.editAgeFilePage = editAgeFilePage;
 exports.newFilePage = newFilePage;
 exports.uploadPage = uploadPage;
 exports.deleteFilePage = deleteFilePage;
 exports.conflictPage = conflictPage;
+exports.isSettingsSection = isSettingsSection;
 exports.settingsPage = settingsPage;
+exports.profileSettingsPage = profileSettingsPage;
 exports.adminUsersPage = adminUsersPage;
 exports.adminUserPage = adminUserPage;
 exports.adminShell = adminShell;
 exports.adminIndexPage = adminIndexPage;
 exports.egressPage = egressPage;
 exports.appearancePage = appearancePage;
+exports.isVaultSettingsSection = isVaultSettingsSection;
+exports.vaultSettingsPage = vaultSettingsPage;
+exports.adminGithubPage = adminGithubPage;
 exports.tokenPage = tokenPage;
 exports.opErrorPage = opErrorPage;
 const avatar_1 = require("./avatar");
 const html_1 = require("./html");
 const icons_1 = require("./icons");
+const markdown_1 = require("./markdown");
+const mdedit_1 = require("./mdedit");
 const logo_1 = require("./logo");
 const render_1 = require("./render");
 const perms_1 = require("./perms");
+const siteshost_1 = require("./siteshost");
 const vault_1 = require("./vault");
 const views_1 = require("./views");
 // Form pages for the UI operations. Every mutating form embeds the session's
@@ -38,9 +52,12 @@ function errorBanner(error) {
 function flashBanner(msg) {
     return msg ? (0, html_1.html) `<div class="flash">${msg}</div>` : '';
 }
-function loginPage(next, error) {
+function loginPage(next, error, github = false) {
     // A narrow card under the mark, centred on the page: signing in is the one
-    // thing this page is for, so nothing else is on it.
+    // thing this page is for, so nothing else is on it. The passkey button is
+    // hidden until the page script finds WebAuthn support, so a browser without
+    // it sees the form it can use and nothing it cannot; the GitHub button is
+    // decided by the server, since whether it can work is the vault's own state.
     const content = (0, html_1.html) `<div class="signin">
 <div class="signin-mark">${(0, html_1.raw)(logo_1.MARK)}</div>
 <h1>Sign in to Mochi Forge</h1>
@@ -52,11 +69,158 @@ ${errorBanner(error)}
 <div class="field"><label for="token">Token</label><input type="password" id="token" name="token" autocomplete="current-password" required></div>
 <button type="submit" class="btn btn-primary">Sign in</button>
 </form>
+<div class="signin-alt" data-passkey-login hidden>
+<button type="button" class="btn" data-passkey-login-btn data-next="${next}">${(0, icons_1.icon)('lock')}<span>Sign in with a passkey</span></button>
+<div class="form-error" data-passkey-error hidden></div>
 </div>
-<p class="muted small signin-note">A token is what git uses for pushing. Tokens are minted by an administrator; there are no passwords.</p>
+${github
+        ? (0, html_1.html) `<div class="signin-alt"><a class="btn" href="/login/github?next=${encodeURIComponent(next)}">${(0, icons_1.icon)('person')}<span>Sign in with GitHub</span></a></div>`
+        : ''}
+</div>
+<p class="muted small signin-note">A token is what git uses for pushing. Tokens are minted by an administrator; there are no passwords.
+Passkeys are added from your account page, once you are signed in.</p>
+<p class="muted small signin-note">Already signed in on another device? <a href="/login/link?next=${encodeURIComponent(next)}">Enter a code from it</a>.</p>
 </div>`;
     return (0, views_1.layout)('Sign in', content, { path: '/login' });
 }
+/** The page a handoff code is typed into: the other half of accountLinkPage. */
+function loginLinkPage(next, error) {
+    const content = (0, html_1.html) `<div class="signin">
+<div class="signin-mark">${(0, html_1.raw)(logo_1.MARK)}</div>
+<h1>Sign in with a code</h1>
+${errorBanner(error)}
+<div class="form-box">
+<form method="post" action="/login/link">
+<input type="hidden" name="next" value="${next}">
+<div class="field"><label for="code">Code</label><input type="text" id="code" name="code" class="mono" autocomplete="off" spellcheck="false" placeholder="ABCD-EFGH" autofocus required></div>
+<button type="submit" class="btn btn-primary">Sign in</button>
+</form>
+</div>
+<p class="muted small signin-note">On a device where you are already signed in, open your account page and choose
+&ldquo;Sign in on another device&rdquo;. The code it shows works once and expires after a few minutes.</p>
+</div>`;
+    return (0, views_1.layout)('Sign in with a code', content, { path: '/login' });
+}
+/**
+ * The page a `mochi web` link lands on. It names the account and asks for a
+ * click rather than signing the browser in on arrival: a GET must not change
+ * who the browser is, or a link someone was tricked into opening would sign
+ * them in as somebody else without a word.
+ */
+function loginLinkConfirmPage(username, code, next) {
+    const content = (0, html_1.html) `<div class="signin">
+<div class="signin-mark">${(0, html_1.raw)(logo_1.MARK)}</div>
+<h1>Sign in to Mochi Forge</h1>
+<div class="form-box">
+<p>This link signs this browser in as <b>${username}</b>.</p>
+<form method="post" action="/login/code">
+<input type="hidden" name="code" value="${code}">
+<input type="hidden" name="next" value="${next}">
+<button type="submit" class="btn btn-primary">Continue as ${username}</button>
+</form>
+</div>
+<p class="muted small signin-note">Not you, or not something you asked for? Close this page; the link works once and expires by itself.</p>
+</div>`;
+    return (0, views_1.layout)('Sign in', content, { path: '/login' });
+}
+/**
+ * The signed-in user's own page: their passkeys and the way to another
+ * device. Tokens are deliberately not here; they are minted and revoked on
+ * the admin pages, and this page holds only what a user manages for
+ * themselves.
+ */
+function accountPage(viewer, opts = { restricted: false }) {
+    const name = viewer.auth.username;
+    const user = viewer.auth.user;
+    const passkeys = user.passkeys ?? [];
+    const rows = passkeys.map((p) => {
+        const current = viewer.auth.token.hash === (0, vault_1.passkeyBinding)(p.id);
+        return (0, html_1.html) `<tr><td>${p.name ?? 'Passkey'}${current ? (0, html_1.raw)(' <span class="counter">this session</span>') : ''}</td><td class="muted small">${p.created ? (0, render_1.timeTag)(p.created, '') : ''}</td><td class="mono small muted">${p.id.slice(0, 8)}&hellip;</td><td class="right">
+<form method="post" action="/account/passkeys/${encodeURIComponent(p.id)}/delete" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn btn-danger-outline">Remove</button>
+</form></td></tr>`;
+    });
+    const list = passkeys.length
+        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>Passkey</th><th>Added</th><th>Id</th><th class="right"></th></tr>${rows}</tbody></table>
+<p class="muted small">Removing a passkey is immediate: a session signed in with it is signed out on its next page load.</p>`
+        : (0, html_1.html) `<p class="muted">No passkeys yet.</p>`;
+    const add = opts.restricted
+        ? (0, html_1.html) `<p class="muted small">This session was signed in with a restricted token, which may not add passkeys:
+a passkey signs in with your full account, so adding one takes a session that already has it.</p>`
+        : (0, html_1.html) `<div class="inline-form" data-passkey-form>
+${(0, views_1.csrfField)(viewer)}
+<label for="pk-name">Name</label><input type="text" id="pk-name" name="name" placeholder="e.g. laptop" autocomplete="off">
+<button type="button" class="btn" data-passkey-add>${(0, icons_1.icon)('plus')}<span>Add a passkey</span></button>
+</div>
+<div class="form-error" data-passkey-error hidden></div>
+<p class="muted small" data-passkey-unsupported hidden>This browser does not offer passkeys here. Passkeys need a browser
+with WebAuthn, over https (or on localhost).</p>
+<p class="muted small">A passkey signs you in to this vault's web pages with your screen lock or security key, instead of
+the token. It is kept by your browser or device; the vault stores only its public half. git keeps using tokens.</p>`;
+    const passkeyBox = (0, html_1.html) `<div class="form-box">
+<h2>Passkeys</h2>
+${list}
+${add}
+</div>`;
+    const gh = opts.github;
+    // Shown when the vault offers GitHub sign-in, and also when it no longer
+    // does but a link remains: a stored credential should never be invisible to
+    // the person it belongs to.
+    const githubBox = !gh || (!gh.enabled && !gh.account)
+        ? ''
+        : (0, html_1.html) `<div class="form-box">
+<h2>GitHub</h2>
+${gh.account
+            ? (0, html_1.html) `<p>Linked to <a href="https://github.com/${gh.account.login}"><b>${gh.account.login}</b></a> <span class="mono small muted">id ${String(gh.account.id)}</span>${gh.account.linked ? (0, html_1.html) `, since ${(0, render_1.timeTag)(gh.account.linked, '')}` : ''}.</p>
+<p class="muted small">&ldquo;Sign in with GitHub&rdquo; on the sign-in page signs in as <b>${name}</b>. Unlinking is
+immediate: a session signed in with GitHub is signed out on its next page load. git keeps using tokens either way.</p>
+<form method="post" action="/account/github/unlink" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn btn-danger-outline">Unlink</button>
+</form>`
+            : opts.restricted
+                ? (0, html_1.html) `<p class="muted small">This session was signed in with a restricted token, which may not link a GitHub
+account: signing in with GitHub carries your full standing, so linking takes a session that already has it.</p>`
+                : (0, html_1.html) `<form method="post" action="/account/github" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn">${(0, icons_1.icon)('link')}<span>Link a GitHub account</span></button>
+</form>
+<p class="muted small">Linking sends you to GitHub to authorize once; nothing of GitHub's is stored here beyond the
+account's id and name. Afterwards &ldquo;Sign in with GitHub&rdquo; on the sign-in page signs you in as <b>${name}</b>.
+git keeps using tokens.</p>`}
+</div>`;
+    const handoff = (0, html_1.html) `<div class="form-box">
+<h2>Sign in on another device</h2>
+<form method="post" action="/account/link">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn">${(0, icons_1.icon)('link')}<span>Show a sign-in code</span></button>
+</form>
+<p class="muted small">Shows a short code. On the other device, open the sign-in page, choose &ldquo;Enter a code&rdquo;,
+and type it. The code works once, expires after five minutes, and signs that device in as you.</p>
+</div>`;
+    const content = (0, html_1.html) `<div class="page-head"><div class="with-avatar">${(0, avatar_1.avatar)(name, 32)}<h1>${name}</h1></div></div>
+${flashBanner(opts.msg)}
+${errorBanner(opts.error)}
+<p class="muted">${user.siteAdmin ? 'Site admin' : (0, html_1.html) `Owns the collection <span class="mono">${name}</span> by name`}</p>
+${passkeyBox}
+${githubBox}
+${handoff}`;
+    return (0, views_1.layout)('Your account', content, { viewer, path: '/account' });
+}
+/** The code accountPage's handoff form minted, shown once. */
+function accountLinkPage(viewer, code, minutes) {
+    const content = (0, html_1.html) `<div class="form-box">
+<h1>Sign in on another device</h1>
+<p>On the other device, open this vault's sign-in page, choose <b>Enter a code from a signed-in device</b>, and type:</p>
+<div class="handoff-code mono">${code}</div>
+<p class="muted small">The code signs that device in as <b>${viewer.auth.username}</b>. It works once and expires in
+${minutes} minutes; showing it again mints a fresh one. The new session is tied to the same credential as this one, so
+revoking that credential signs out both.</p>
+<p><a href="/account">&larr; Your account</a></p>
+</div>`;
+    return (0, views_1.layout)('Sign in on another device', content, { viewer, path: '/account' });
+}
 function newRepoPage(viewer, collectionNames, preset, error) {
     const datalist = collectionNames.map((o) => (0, html_1.html) `<option value="${o}">`);
     const content = (0, html_1.html) `<div class="form-box wide">
@@ -111,13 +275,15 @@ ${(0, views_1.csrfField)(viewer)}
     return (0, views_1.layout)(`Fork ${ctx.collection}/${ctx.repo}`, content, (0, views_1.repoOpts)(ctx, `${base}/fork`));
 }
 /**
- * The import page. Importing has always run on the reader's machine rather than
- * on the server, and what this page does is hand them the command
- * that does it. Earlier it asked for the source in a form and wrote a shell
+ * The import-or-fork page. Both operations run on the reader's machine rather
+ * than on the server, and what this page does is hand them the command that
+ * does it. Earlier it asked for the source in a form and wrote a shell
  * one-liner from the answers, which put a form in front of an operation the
- * page cannot perform; now `mochi import` performs it, so the page only has
- * to say what to run, with the collection and the vault's own URL filled in.
- * The git commands remain below for a machine with no Node on it.
+ * page cannot perform; now `mochi fork` and `mochi import` perform it, so the
+ * page only has to say what to run, with the collection and the vault's own
+ * URL filled in. The two commands do the same copy; the difference is that a
+ * fork records where it came from, so the page is organized around that one
+ * question. The git commands remain below for a machine with no Node on it.
  */
 function importPage(viewer, opts) {
     const collection = opts.collection ?? 'mycollection';
@@ -127,23 +293,57 @@ function importPage(viewer, opts) {
     const fallback = opts.gitCommand
         ? (0, html_1.html) `<hr class="rule">
 <h2>Without the CLI</h2>
-<p class="muted small">The same two steps by hand. Replace the source URL, and the name after the collection if you want one other than the source's.</p>
+<p class="muted small">The same two steps by hand. Replace the source URL, and the name after the collection if you want one other than the source's. This makes an import; to turn it into a fork, record the upstream in the repository's settings afterwards.</p>
 ${(0, views_1.copyRow)(opts.gitCommand)}`
         : '';
     const content = (0, html_1.html) `<div class="form-box wide">
-<h1>Import a repository</h1>
-<p class="muted">Importing runs on your machine, not on this server: git reads the source with the credentials you already have there and pushes it here, which creates the repository. The <span class="mono">mochi</span> command does both.</p>
+<h1>Import or fork a repository</h1>
+<p class="muted">Both copy a repository from outside this vault into it, and both run on your machine, not on this server: git reads the source with the credentials you already have there and pushes it here, which creates the repository. The <span class="mono">mochi</span> command does both. The difference is memory: a fork records where it came from, an import does not.</p>
 <hr class="rule">
 <h2>Once per machine</h2>
 ${(0, views_1.copyRow)('npm install -g @magland/mochi')}
 ${(0, views_1.copyRow)(`mochi login ${opts.vaultUrl}`)}
-<h2>Then, for each repository</h2>
+<h2>Fork: a copy that remembers its source</h2>
+${(0, views_1.copyRow)(`mochi fork https://github.com/owner/repo ${collection}`)}
+<p class="muted small">The source URL is recorded as the repository's upstream: the header shows &ldquo;forked from&rdquo;, <span class="mono">mochi sync</span> fast-forwards a branch from it, and <span class="mono">mochi pr export</span> sends a pull request back to it. When the source keeps living where it is, this is usually what you want.</p>
+<h2>Import: a copy that stands on its own</h2>
 ${(0, views_1.copyRow)(`mochi import https://github.com/owner/repo ${collection}`)}
-<p class="muted small">The source may be an https or ssh git URL, or <span class="mono">owner/repo</span> for GitHub. The repository takes its name from the source; write <span class="mono">${collection}/another-name</span> to choose another. Add <span class="mono">--lfs</span> to carry Git LFS objects too. A collection that does not exist yet is created by the push. A public GitHub source also has its description read from GitHub and set here.</p>
+<p class="muted small">Nothing is recorded about the source. For a repository whose home this vault becomes, or for a local directory (<span class="mono">mochi import ~/work/repo ${collection}</span>), which has no URL to record.</p>
+<hr class="rule">
+<p class="muted small">For either command, the source may be an https or ssh git URL, or <span class="mono">owner/repo</span> for GitHub. The repository takes its name from the source; write <span class="mono">${collection}/another-name</span> to choose another. Add <span class="mono">--lfs</span> to carry Git LFS objects too. A collection that does not exist yet is created by the push. A public GitHub source also has its description read from GitHub and set here.</p>
+<p class="muted small">An import becomes a fork after the fact: set the upstream URL in the repository's settings, or run <span class="mono">mochi repo edit ${collection}/name --upstream &lt;url&gt;</span>. And a repository already in this vault is forked with the Fork button on its own page, which copies it without leaving the server.</p>
 ${fallback}
 ${back}
 </div>`;
-    return (0, views_1.layout)('Import a repository', content, { viewer, path: '/import' });
+    return (0, views_1.layout)('Import or fork a repository', content, { viewer, path: '/import' });
+}
+/**
+ * The sync page, reached from the "forked from" line in the repository
+ * header. Like importing, syncing runs on the reader's machine rather than on
+ * the server, which holds no credential for the upstream and never fetches
+ * from another host; so, like the import page, this one hands them the
+ * command that does it, filled in with this repository's address.
+ */
+function syncPage(ctx, vaultUrl) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const up = ctx.upstream;
+    const branch = ctx.defaultBranch
+        ? (0, html_1.html) `That fast-forwards <span class="mono">${ctx.defaultBranch}</span>; <span class="mono">--branch</span> names another.`
+        : (0, html_1.html) `This repository is empty, so name the branch to sync with <span class="mono">--branch</span>.`;
+    const content = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<div class="form-box wide">
+<h1>Sync from the upstream</h1>
+<p class="muted">This repository was forked from ${up.web ? (0, html_1.html) `<a href="${up.web}" rel="noopener">${up.label}</a>` : (0, html_1.html) `<span class="mono">${up.label}</span>`}. Syncing runs on your machine, not on this server: git fetches the upstream with the credentials you already have there and pushes the result here, so the vault never needs a credential for the upstream. The <span class="mono">mochi</span> command does both.</p>
+<hr class="rule">
+<h2>Once per machine</h2>
+${(0, views_1.copyRow)('npm install -g @magland/mochi')}
+${(0, views_1.copyRow)(`mochi login ${vaultUrl}`)}
+<h2>Then, whenever the upstream has moved</h2>
+${(0, views_1.copyRow)(`mochi sync ${ctx.collection}/${ctx.repo}`)}
+<p class="muted small">${branch} Only a fast-forward is ever pushed: a branch that has grown commits of its own is reported as diverged and left alone, since reconciling it is a merge or a rebase in a clone of your own. The upstream URL is the one recorded in <a href="${base}/settings">settings</a>.</p>
+<p><a class="btn" href="${base}">Back to ${ctx.repo}</a></p>
+</div>`;
+    return (0, views_1.layout)(`Sync ${ctx.collection}/${ctx.repo}`, content, (0, views_1.repoOpts)(ctx, `${base}/sync`));
 }
 /**
  * Creating a collection on its own. A push creates the collection it lands in,
@@ -166,18 +366,45 @@ ${(0, views_1.csrfField)(viewer)}
     return (0, views_1.layout)('New collection', content, { viewer, path: '/new/collection' });
 }
 /**
- * A collection's own settings, which today is one operation: its name.
+ * A collection's own settings: its owners, its site alias, its name, and its
+ * deletion.
  *
  * Repository settings live under the repository, so a collection's live under
  * the collection, at the same place in the path. The rename is graded amber
  * rather than red for the same reason a repository's is: what it breaks can be
- * put back by renaming it again.
+ * put back by renaming it again. Deletion takes the red grade and the typed
+ * confirmation, and is offered only when the collection is empty; one holding
+ * repositories shows why the form is absent instead.
  */
-function collectionSettingsPage(viewer, collection, repoCount, owners, msg, error) {
+function collectionSettingsPage(viewer, collection, repoCount, owners, sites, msg, error) {
     const base = `/${encodeURIComponent(collection)}`;
     const holds = repoCount === 0
         ? 'This collection is empty.'
         : `Every one of its ${repoCount === 1 ? 'repository' : `${repoCount} repositories`} moves with it, along with their sites, workflow runs, issues, pull requests, releases, and LFS objects.`;
+    // The alias only means anything on a vault with a sites host, so the box is
+    // absent without one rather than offering a setting with no effect.
+    const aliasState = sites.alias
+        ? (0, html_1.html) `Sites in this collection are served from <span class="mono">&lt;repo&gt;--${sites.alias}.${sites.host}</span>${sites.stored
+            ? (0, html_1.html) `, under the alias set below.`
+            : sites.alias === collection
+                ? (0, html_1.html) `. That is the collection's own name, which is usable as a hostname label.`
+                : (0, html_1.html) `. That is the name rewritten as a hostname label, the name itself not being usable as one; no other collection holds that label, which is what makes it available here. An alias set below replaces it.`}`
+        : sites.taken
+            ? (0, html_1.html) `This collection's name is not usable as a hostname label, and the label it would be rewritten to, <span class="mono">${sites.taken}</span>, ${sites.takenBy
+                ? (0, html_1.html) `belongs to the collection <a href="/${sites.takenBy}">${sites.takenBy}</a>`
+                : (0, html_1.html) `is one another collection's name rewrites to as well, so it belongs to neither`}. Until an alias is set here, nothing in this collection has a derived hostname, and its sites are served on the forge host, sandboxed, unless a repository claims a label of its own.`
+            : (0, html_1.html) `This collection's name is not usable as a hostname label, so nothing in it has a derived hostname until an alias is set here; its sites are served on the forge host, sandboxed, unless a repository claims a label of its own.`;
+    const sitesBox = sites.host
+        ? (0, html_1.html) `<div class="box settings-box" id="site"><div class="box-header">${(0, icons_1.icon)('globe')}Site alias</div><div class="box-body">
+<p>${aliasState}</p>
+<form method="post" action="${base}/settings/site">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="siteAlias">Hostname label</label><input type="text" id="siteAlias" name="alias" value="${sites.stored}" placeholder="${sites.alias ?? (0, siteshost_1.sanitizedSiteLabel)(collection)}" autocomplete="off" spellcheck="false">
+<p class="muted small">The label standing in for <span class="mono">${collection}</span> in each of its repositories' hostnames: lowercase letters, digits, and single interior hyphens, and never a doubled hyphen. Empty means the collection's own name where that is usable as a label, and otherwise its name rewritten as one. Changing it moves every site in the collection to a new origin; the old hostnames stop resolving rather than redirecting, since the alias they carry then names no collection.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div></div>`
+        : '';
     const content = (0, html_1.html) `<div class="page-head"><h1 class="with-avatar">${(0, avatar_1.avatar)(collection, 28, 'square')}${collection}</h1></div>
 <h2>Settings</h2>
 ${flashBanner(msg)}
@@ -187,7 +414,7 @@ ${errorBanner(error)}
 and manage these settings. A user named <span class="mono">${collection}</span> owns it by bearing its name and is not
 listed here.</p>
 ${owners.length
-        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>User</th><th class="right"></th></tr>${owners.map((o) => (0, html_1.html) `<tr><td class="with-avatar">${(0, avatar_1.avatar)(o, 24)}<b>${o}</b></td><td class="right">
+        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>User</th><th class="right"></th></tr>${owners.map((o) => (0, html_1.html) `<tr><td class="with-avatar">${(0, views_1.userLink)(o, { face: 24, bold: true })}</td><td class="right">
 <form method="post" action="${base}/settings/owners/remove" class="inline-form">
 ${(0, views_1.csrfField)(viewer)}
 <input type="hidden" name="username" value="${o}">
@@ -200,6 +427,7 @@ ${(0, views_1.csrfField)(viewer)}
 <button type="submit" class="btn">${(0, icons_1.icon)('people')}<span>Add owner</span></button>
 </form>
 </div></div>
+${sitesBox}
 <div class="danger-zone caution">
 <h3>Rename</h3>
 <p>${holds} The old address is redirected here, so links and existing clones keep working until something else is created under that name, but token scopes naming the old collection have to be granted again under the new name.</p>
@@ -208,6 +436,17 @@ ${(0, views_1.csrfField)(viewer)}
 <label for="toName">Collection name</label><input type="text" id="toName" name="name" value="${collection}" required>
 <button type="submit" class="btn">${(0, icons_1.icon)('pencil')}<span>Rename</span></button>
 </form>
+</div>
+<div class="danger-zone">
+<h3>Danger zone</h3>
+${repoCount === 0
+        ? (0, html_1.html) `<p>Deleting this collection removes its directory and its owners list from the vault permanently. There is no undo.</p>
+<form method="post" action="${base}/settings/delete">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="confirm">Type <b class="mono">${collection}</b> to confirm</label><input type="text" id="confirm" name="confirm" autocomplete="off"></div>
+<button type="submit" class="btn btn-danger">${(0, icons_1.icon)('trash')}<span>Delete this collection</span></button>
+</form>`
+        : (0, html_1.html) `<p>A collection can be deleted only once it is empty. This one holds ${repoCount === 1 ? 'a repository' : `${repoCount} repositories`}; delete ${repoCount === 1 ? 'it' : 'them'}, or move ${repoCount === 1 ? 'it' : 'them'} to another collection, first.</p>`}
 </div>`;
     return (0, views_1.layout)(`Settings - ${collection}`, content, {
         crumbs: (0, html_1.html) ` / <a href="${base}">${collection}</a>`,
@@ -243,12 +482,26 @@ function editFilePage(ctx, filePath, content, expectedHead, error) {
     const action = `${base}/edit/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
     const cancel = `${base}/blob/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
     const rows = Math.min(30, Math.max(12, content.split('\n').length + 2));
+    // A markdown file gets the markdown editor's tabs and toolbar around the
+    // same field, with the preview resolving relative links against the file's
+    // own branch and directory; any other file gets the plain editor.
+    const editor = (0, markdown_1.isMarkdownFile)(filePath)
+        ? (0, mdedit_1.markdownEditor)({
+            name: 'content',
+            rows,
+            value: content,
+            codeEditor: true,
+            preview: (0, mdedit_1.previewUrl)(ctx),
+            ref: ctx.ref,
+            dir: filePath.split('/').slice(0, -1).join('/'),
+        })
+        : (0, html_1.html) `<textarea class="code-editor" name="content" rows="${rows}" spellcheck="false">${content}</textarea>`;
     const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
 <h2 class="file-head">Editing <span class="mono">${filePath}</span> on <span class="mono">${ctx.ref}</span></h2>
 ${errorBanner(error)}
 <form method="post" action="${action}">
 <div class="field"><label for="path">Path</label><input type="text" id="path" name="path" value="${filePath}" spellcheck="false"><p class="muted small">Changing it renames or moves the file in the same commit.</p></div>
-<textarea class="code-editor" name="content" rows="${rows}" spellcheck="false">${content}</textarea>
+${editor}
 <div class="commit-box">
 ${commitFields(ctx.viewer, expectedHead, `Update ${filePath.split('/').pop()}`, ctx.ref)}
 <div class="actions"><button type="submit" class="btn btn-primary">Commit changes</button><a class="btn" href="${cancel}">Cancel</a></div>
@@ -256,6 +509,63 @@ ${commitFields(ctx.viewer, expectedHead, `Update ${filePath.split('/').pop()}`,
 </form>`;
     return (0, views_1.layout)(`Editing ${filePath} - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
 }
+/**
+ * The editor for an age-encrypted file. The server cannot fill the textarea,
+ * so the page opens on a passphrase form instead: /assets/age.js fetches the
+ * ciphertext, decrypts it in the page, and only then reveals the editor. The
+ * commit posts fresh ciphertext through the same route and guards as any
+ * other edit; the unlock form stands outside the commit form (forms do not
+ * nest), and its passphrase input carries no name, so nothing can post it.
+ * The optional new-passphrase pair re-keys the file on commit; those inputs
+ * are nameless for the same reason.
+ */
+function editAgeFilePage(ctx, filePath, expectedHead, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const action = `${base}/edit/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const cancel = `${base}/blob/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const rawUrl = `${base}/raw/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<h2 class="file-head">Editing <span class="mono">${filePath}</span> on <span class="mono">${ctx.ref}</span></h2>
+${errorBanner(error)}
+<div class="age-card blob-binary">
+<p class="age-head">${(0, icons_1.icon)('lock')}<b>Encrypted with age</b></p>
+<p class="muted small">The passphrase decrypts the file here, in this page, and encrypts it again when you commit. It is sent nowhere.</p>
+<form class="age-unlock" data-age-for-edit>${(0, views_1.agePassInput)({
+        placeholder: 'Passphrase',
+        autocomplete: 'off',
+        required: true,
+    })}<button type="submit" class="btn btn-primary" data-busy-label="Decrypting&hellip;">Decrypt</button></form>
+<p class="age-error form-error" hidden></p>
+<noscript><p class="muted small">Editing in the browser needs JavaScript. Without it, edit a clone with the age CLI.</p></noscript>
+</div>
+<form method="post" action="${action}" data-age-edit data-age-raw="${rawUrl}" hidden>
+<p class="age-bar-note">${(0, icons_1.icon)('lock')}<span>Decrypted in your browser. Committing encrypts it again before anything leaves this page.</span></p>
+<div class="field"><label for="path">Path</label><input type="text" id="path" name="path" value="${filePath}" spellcheck="false"><p class="muted small">Changing it renames or moves the file in the same commit.</p><p class="age-warn" data-age-rename-warn hidden>${(0, icons_1.icon)('alert')}<span>The name no longer ends in <span class="mono">.age</span>: the file would still be committed encrypted, but the vault would stop treating it as an encrypted file.</span></p></div>
+<textarea class="code-editor" rows="18" spellcheck="false" disabled></textarea>
+<details class="age-newpass">
+<summary>Change the passphrase</summary>
+<div class="field"><label for="age-newpass">New passphrase</label>${(0, views_1.agePassInput)({
+        id: 'age-newpass',
+        autocomplete: 'new-password',
+    })}</div>
+<div class="field"><label for="age-newpass2">Repeat new passphrase</label>${(0, views_1.agePassInput)({
+        id: 'age-newpass2',
+        autocomplete: 'new-password',
+    })}</div>
+<p class="muted small">Left empty, the commit keeps the current passphrase. A forgotten passphrase is not recoverable.</p>
+</details>
+<input type="hidden" name="content" value="">
+<p class="age-error form-error" hidden></p>
+<div class="commit-box">
+${commitFields(ctx.viewer, expectedHead, `Update ${filePath.split('/').pop()}`, ctx.ref)}
+<div class="actions"><button type="submit" class="btn btn-primary" disabled data-busy-label="Encrypting&hellip;">Commit changes</button><a class="btn" href="${cancel}">Cancel</a></div>
+</div>
+</form>`;
+    return (0, views_1.layout)(`Editing ${filePath} - ${ctx.collection}/${ctx.repo}`, body, {
+        ...(0, views_1.repoOpts)(ctx),
+        ageScript: true,
+    });
+}
 function newFilePage(ctx, branch, dir, expectedHead, preset, error) {
     const base = (0, views_1.repoUrl)(ctx);
     const action = `${base}/new/${(0, views_1.encPath)(branch)}${dir === '' ? '' : `/${(0, views_1.encPath)(dir)}`}`;
@@ -268,15 +578,30 @@ function newFilePage(ctx, branch, dir, expectedHead, preset, error) {
 <h2 class="file-head">New file in <span class="mono">${prefix || '/'}</span> on <span class="mono">${branch}</span></h2>
 ${branchNote}
 ${errorBanner(error)}
-<form method="post" action="${action}">
-<div class="field"><label for="filename">File name</label><div class="filename-row"><span class="mono muted">${prefix}</span><input type="text" id="filename" name="filename" value="${preset.filename ?? ''}" placeholder="path/to/file.md" required></div></div>
+<form method="post" action="${action}" data-age-new>
+<div class="field"><label for="filename">File name</label><div class="filename-row"><span class="mono muted">${prefix}</span><input type="text" id="filename" name="filename" value="${preset.filename ?? ''}" placeholder="path/to/file.md" required></div><p class="muted small" data-age-hint>A name ending in <span class="mono">.age</span> is encrypted with a passphrase in this page before it is committed.</p></div>
+<div class="age-pass-fields blob-binary age-card" hidden>
+<p class="age-head">${(0, icons_1.icon)('lock')}<b>A name ending in <span class="mono">.age</span> makes an encrypted file</b></p>
+<p class="muted small">The content below is encrypted in this page before it is committed; the vault stores only ciphertext, and the passphrase is sent nowhere and stored nowhere. A forgotten passphrase is not recoverable.</p>
+<div class="field"><label for="age-pass">Passphrase</label>${(0, views_1.agePassInput)({
+        id: 'age-pass',
+        autocomplete: 'new-password',
+    })}</div>
+<div class="field"><label for="age-pass2">Repeat passphrase</label>${(0, views_1.agePassInput)({
+        id: 'age-pass2',
+        autocomplete: 'new-password',
+    })}</div>
+<p class="age-error form-error" hidden></p>
+</div>
 <textarea class="code-editor" name="content" rows="18" spellcheck="false">${preset.content ?? ''}</textarea>
 <div class="commit-box">
 ${commitFields(ctx.viewer, expectedHead, 'Create new file', expectedHead === null ? undefined : branch)}
-<div class="actions"><button type="submit" class="btn btn-primary">Commit new file</button><a class="btn" href="${cancel}">Cancel</a></div>
+<div class="actions"><button type="submit" class="btn btn-primary" data-busy-label="Encrypting&hellip;">Commit new file</button><a class="btn" href="${cancel}">Cancel</a></div>
 </div>
 </form>`;
-    return (0, views_1.layout)(`New file - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
+    // The age script rides on every new-file page, because whether it is
+    // needed is decided by the name the user has yet to type.
+    return (0, views_1.layout)(`New file - ${ctx.collection}/${ctx.repo}`, body, { ...(0, views_1.repoOpts)(ctx), ageScript: true });
 }
 /**
  * The upload form. A file input and the same commit box as the editor, so
@@ -326,25 +651,35 @@ function conflictPage(ctx, branch, retryUrl) {
 </div>`;
     return (0, views_1.layout)(`Conflict - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
 }
-function settingsPage(ctx, description, access, msg, error) {
+function isSettingsSection(value) {
+    return value === 'general' || value === 'access' || value === 'site';
+}
+function settingsPage(ctx, description, topics, access, site, msg, error, section) {
     const base = (0, views_1.repoUrl)(ctx);
+    // A message belongs to the box whose form produced it; one that names no box
+    // (a hand-typed URL, an older link) stays at the top, where it always was.
+    const flashIn = (name) => (section === name ? flashBanner(msg) : '');
+    const errorIn = (name) => (section === name ? errorBanner(error) : '');
     const branchOptions = ctx.branches.map((b) => (0, html_1.html) `<option value="${b.name}"${b.name === ctx.defaultBranch ? (0, html_1.raw)(' selected') : ''}>${b.name}</option>`);
     const defaultBranchField = ctx.branches.length > 0
         ? (0, html_1.html) `<div class="field"><label for="defaultBranch">Default branch</label><select id="defaultBranch" name="defaultBranch">${branchOptions}</select></div>`
         : '';
     const settingsForm = ctx.canPush
-        ? (0, html_1.html) `<div class="box settings-box"><div class="box-header">${(0, icons_1.icon)('sliders')}General</div><div class="box-body">
+        ? (0, html_1.html) `<div class="box settings-box" id="general"><div class="box-header">${(0, icons_1.icon)('sliders')}General</div><div class="box-body">
+${flashIn('general')}${errorIn('general')}
 <form method="post" action="${base}/settings">
 ${(0, views_1.csrfField)(ctx.viewer)}
 <div class="field"><label for="description">Description</label><input type="text" id="description" name="description" value="${description}"><p class="muted small">Shown beside the repository in listings and in the About panel.</p></div>
+<div class="field"><label for="topics">Topics</label><input type="text" id="topics" name="topics" value="${topics.join(' ')}" placeholder="webgpu numbl mri"><p class="muted small">Separated by spaces or commas: lowercase letters, digits, and hyphens, up to 20. Listings can be narrowed by topic, and each topic has a page across the vault.</p></div>
 ${defaultBranchField}
+<div class="field"><label for="upstream">Upstream</label><input type="text" id="upstream" name="upstream" value="${ctx.upstream?.url ?? ''}" placeholder="https://github.com/owner/repo"><p class="muted small">The URL outside this vault this repository was forked from: the header shows it as &ldquo;forked from&rdquo;, <span class="mono">mochi sync</span> fast-forwards from it, and <span class="mono">mochi pr export</span> sends pull requests back to it. An https or ssh git URL; leave empty for a repository that stands on its own.</p></div>
 <button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
 </form>
 </div></div>`
         : '';
     // Who may see and write the repository. Admin only, like the rename below:
     // access is the repository's own business.
-    const collaboratorRows = access.collaborators.map(({ username, role }) => (0, html_1.html) `<tr><td class="with-avatar">${(0, avatar_1.avatar)(username, 24)}<b>${username}</b></td><td class="muted">${role}</td><td class="right">
+    const collaboratorRows = access.collaborators.map(({ username, role }) => (0, html_1.html) `<tr><td class="with-avatar">${(0, views_1.userLink)(username, { face: 24, bold: true })}</td><td class="muted">${role}</td><td class="right">
 <form method="post" action="${base}/settings/collaborators/remove" class="inline-form">
 ${(0, views_1.csrfField)(ctx.viewer)}
 <input type="hidden" name="username" value="${username}">
@@ -354,7 +689,8 @@ ${(0, views_1.csrfField)(ctx.viewer)}
         ? (0, html_1.html) `<p class="muted small">Owners of <span class="mono">${ctx.collection}</span> (${(0, html_1.joinHtml)(access.owners.map((o) => (0, html_1.html) `<b>${o}</b>`), ', ')}, and the user the collection is named after) hold the admin role here without being listed.</p>`
         : (0, html_1.html) `<p class="muted small">The user the collection is named after, and any owners added to it, hold the admin role here without being listed.</p>`;
     const accessBox = ctx.canAdmin
-        ? (0, html_1.html) `<div class="box settings-box"><div class="box-header">${(0, icons_1.icon)('people')}Access</div><div class="box-body">
+        ? (0, html_1.html) `<div class="box settings-box" id="access"><div class="box-header">${(0, icons_1.icon)('people')}Access</div><div class="box-body">
+${flashIn('access')}${errorIn('access')}
 <form method="post" action="${base}/settings/visibility">
 ${(0, views_1.csrfField)(ctx.viewer)}
 <input type="hidden" name="private" value="${ctx.isPrivate ? 'false' : 'true'}">
@@ -382,6 +718,65 @@ ${(0, views_1.csrfField)(ctx.viewer)}
 <button type="submit" class="btn">${(0, icons_1.icon)('people')}<span>Add</span></button>
 </form>
 <p class="muted small">read may see a private repository; write may also push and edit; admin may also change its settings, visibility, and collaborators.</p>
+</div></div>`
+        : '';
+    // The site: whether the sibling directory is published, how it is written,
+    // and at which hostname. Admin only, like visibility, because enabling a
+    // site publishes whatever the directory holds to everyone.
+    const derivedLabel = site.derivedLabel;
+    const siteStatus = site.enabled
+        ? site.dirExists
+            ? (0, html_1.html) `This repository's site is <b>enabled</b>, served at <a href="${ctx.siteUrl}">${ctx.siteUrl}</a>.`
+            : site.source === 'repository'
+                ? (0, html_1.html) `This repository's site is <b>enabled</b> and follows the default branch, but nothing has been published yet: push to the branch, or save the settings below to publish it now.`
+                : (0, html_1.html) `This repository's site is <b>enabled</b>, but there are no site files yet: copy them into <span class="mono">${ctx.repo}.site</span> next to the repository, or have a workflow deploy them.`
+        : site.dirExists
+            ? (0, html_1.html) `This repository's site is <b>disabled</b>. The files in <span class="mono">${ctx.repo}.site</span> stay on disk but are not served; enabling the site brings them straight back.`
+            : (0, html_1.html) `This repository's site is <b>disabled</b>. Enabling it serves static files from a <span class="mono">${ctx.repo}.site</span> directory next to the repository, with an index.html at its root.`;
+    // The domain is editable in place only by a site admin; everyone else sees
+    // where it answers, or who to ask.
+    const viewerIsSiteAdmin = ctx.viewer !== null && (0, perms_1.isSiteAdmin)(ctx.viewer.auth);
+    const domainNote = site.domain
+        ? (0, html_1.html) `<p>It answers at <a href="https://${site.domain}/">https://${site.domain}/</a>, its custom domain; its other hostnames redirect there.</p>`
+        : viewerIsSiteAdmin
+            ? ''
+            : (0, html_1.html) `<p class="muted small">A vault admin can attach a custom domain, in this box or with <span class="mono">mochi repo edit ${ctx.collection}/${ctx.repo} --site-domain docs.example.org</span>.</p>`;
+    const domainField = viewerIsSiteAdmin
+        ? (0, html_1.html) `<div class="field"><label for="siteDomain">Custom domain</label><input type="text" id="siteDomain" name="domain" value="${site.domain ?? ''}" placeholder="docs.example.org"><p class="muted small">A hostname of the site's own; empty detaches it. Point its DNS record at this vault and cover it with a certificate yourself. It becomes the site's canonical origin, and the site's other hostnames redirect there. Site admins only, since the name is the operator's to answer for.</p></div>`
+        : '';
+    const labelField = site.sitesHost
+        ? (0, html_1.html) `<div class="field"><label for="siteLabel">Hostname label</label><input type="text" id="siteLabel" name="label" value="${site.label}" placeholder="${derivedLabel ?? ''}"><p class="muted small">The label under <span class="mono">${site.sitesHost}</span> the site is served from: lowercase letters, digits, and single interior hyphens. ${derivedLabel
+            ? (0, html_1.html) `Empty means the default, <span class="mono">${derivedLabel}</span>.`
+            : site.collectionAlias === null
+                ? (0, html_1.html) `The collection <span class="mono">${ctx.collection}</span> has no site alias, so nothing in it has a derived hostname; an owner can give it one in the <a href="/${ctx.collection}/settings">collection's settings</a>. Without a label here the site is served on the forge host, sandboxed.`
+                : (0, html_1.html) `This repository's name is not usable as a hostname label, so without one the site is served on the forge host, sandboxed.`}</p></div>`
+        : '';
+    const siteConfigForm = site.enabled
+        ? (0, html_1.html) `<hr class="rule">
+<form method="post" action="${base}/settings/site">
+${(0, views_1.csrfField)(ctx.viewer)}
+<div class="field"><label for="siteSource">Published by</label><select id="siteSource" name="source">
+<option value="copy"${site.source === 'copy' ? (0, html_1.raw)(' selected') : ''}>Copied files</option>
+<option value="actions"${site.source === 'actions' ? (0, html_1.raw)(' selected') : ''}>Workflow deploys</option>
+<option value="repository"${site.source === 'repository' ? (0, html_1.raw)(' selected') : ''}>Repository contents</option>
+</select><p class="muted small">Copied files means whatever can write the vault publishes by writing the directory, and a workflow's deploy step is refused. Workflow deploys additionally lets a run's <span class="mono">deploy-pages</span> step publish the site. Repository contents means the server publishes the default branch itself, again on every push that moves it; a <span class="mono">.gitattributes</span> line such as <span class="mono">notes.txt export-ignore</span> keeps a file out.</p></div>
+<div class="field"><label for="sitePath">Directory</label><input id="sitePath" name="path" value="${site.path}" placeholder="(root of the repository)"><p class="muted small">For repository contents: the directory within the branch to publish, such as <span class="mono">docs</span>. Empty publishes the whole tree.</p></div>
+${labelField}
+${domainField}
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>`
+        : '';
+    const siteBox = ctx.canAdmin
+        ? (0, html_1.html) `<div class="box settings-box" id="site"><div class="box-header">${(0, icons_1.icon)('globe')}Site</div><div class="box-body">
+${flashIn('site')}${errorIn('site')}
+<p>${siteStatus}</p>
+${site.enabled ? domainNote : ''}
+<form method="post" action="${base}/settings/site">
+${(0, views_1.csrfField)(ctx.viewer)}
+<input type="hidden" name="enabled" value="${site.enabled ? 'false' : 'true'}">
+<button type="submit" class="btn">${site.enabled ? 'Disable site' : 'Enable site'}</button>
+</form>
+${siteConfigForm}
 </div></div>`
         : '';
     // Renaming and moving are one operation, since both are a directory rename.
@@ -398,6 +793,7 @@ ${(0, views_1.csrfField)(ctx.viewer)}
 <label for="toName">Name</label><input type="text" id="toName" name="name" value="${ctx.repo}" required>
 <button type="submit" class="btn">${(0, icons_1.icon)('pencil')}<span>Rename</span></button>
 </form>
+<p class="muted small">The collection may be one that exists or a new one to create along with the move, so check it for typos: a misspelt collection is created, not refused.</p>
 </div>`
         : '';
     const dangerZone = ctx.canAdmin
@@ -413,14 +809,44 @@ ${(0, views_1.csrfField)(ctx.viewer)}
         : '';
     const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'settings')}
 <h2>Settings</h2>
-${flashBanner(msg)}
-${errorBanner(error)}
+${section === undefined ? flashBanner(msg) : ''}
+${section === undefined ? errorBanner(error) : ''}
 ${settingsForm}
 ${accessBox}
+${siteBox}
 ${renameForm}
 ${dangerZone}`;
     return (0, views_1.layout)(`Settings - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx, `${base}/settings`));
 }
+/**
+ * Where a user writes the profile their page at /<username> shows: a display
+ * name, a short bio, and links. The longer-form introduction is the profile
+ * README (.mochi/profile/README.md in their collection), which is a file in a
+ * repository rather than a form here, so this page only points at it.
+ */
+function profileSettingsPage(viewer, profile, msg, error) {
+    const name = viewer.auth.username;
+    const links = (profile?.links ?? []).join('\n');
+    const content = (0, html_1.html) `<div class="page-head"><h1 class="with-avatar">${(0, avatar_1.avatar)(name, 32)}Your profile</h1><span class="right-group"><a class="btn" href="/${encodeURIComponent(name)}">${(0, icons_1.icon)('person')}<span>View profile</span></a></span></div>
+${flashBanner(msg)}
+${errorBanner(error)}
+<div class="form-box wide">
+<form method="post" action="/settings/profile">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="displayName">Name</label><input type="text" id="displayName" name="displayName" value="${profile?.name ?? ''}" maxlength="80" placeholder="${name}">
+<p class="muted small">Shown on your profile beside your username, <span class="mono">${name}</span>.</p></div>
+<div class="field"><label for="bio">Bio</label><textarea id="bio" name="bio" rows="3" maxlength="500" placeholder="A sentence or two about yourself">${profile?.bio ?? ''}</textarea></div>
+<div class="field"><label for="links">Links</label><textarea id="links" name="links" rows="3" placeholder="https://example.org">${links}</textarea>
+<p class="muted small">One per line, up to five, each starting with <span class="mono">http://</span> or
+<span class="mono">https://</span>.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save profile</span></button>
+</form>
+<hr class="rule">
+<p class="muted small">For a longer introduction, your profile page also renders
+<span class="mono">${name}/.mochi/profile/README.md</span>, edited like any other file in a repository.</p>
+</div>`;
+    return (0, views_1.layout)('Your profile', content, { viewer, path: '/settings/profile' });
+}
 function adminUsersPage(viewer, users, msg, error) {
     const rows = users.map(({ name, user }) => {
         const actions = (0, html_1.html) `<details class="dropdown"><summary class="btn">${(0, icons_1.icon)('kebab')}<span>Manage</span></summary><div class="dropdown-menu dd-right user-actions">
@@ -509,6 +935,40 @@ repository (collaborators), per collection (owners), or with the site-admin bit
 <button type="submit" class="btn">${user.siteAdmin ? 'Withdraw site admin' : 'Make site admin'}</button>
 </form>
 </div>`;
+    // Passkeys sit beside tokens because they are the same kind of thing -- a
+    // credential this user signs in with -- and revoking one is the same
+    // emergency. Adding one is not here: registration takes the authenticator,
+    // which is on the user's own device, so it lives on their /account page.
+    const passkeyRows = (user.passkeys ?? []).map((p) => (0, html_1.html) `<tr><td>${p.name ?? 'Passkey'}</td><td class="muted small">${p.created ? (0, render_1.timeTag)(p.created, '') : ''}</td><td class="mono small muted">${p.id.slice(0, 8)}&hellip;</td><td class="right">
+<form method="post" action="${base}/passkeys/${encodeURIComponent(p.id)}/delete" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn btn-danger-outline">Remove</button>
+</form></td></tr>`);
+    const passkeys = passkeyRows.length
+        ? (0, html_1.html) `<h2>Passkeys</h2>
+<table class="listing"><tbody><tr><th>Passkey</th><th>Added</th><th>Id</th><th class="right"></th></tr>${passkeyRows}</tbody></table>
+<p class="muted small">Passkeys sign in to the web interface only, with the user's full standing. ${name} adds them from
+their own account page; removal is immediate, like revoking a token.</p>`
+        : '';
+    // The GitHub link sits with the other credentials for the same reason
+    // passkeys do: it is a way this user signs in, and unlinking is the same
+    // emergency off switch. Linking is not here; it takes the GitHub side, so
+    // it lives on the user's own account page.
+    const github = user.github
+        ? (0, html_1.html) `<div class="form-box">
+<h2>GitHub</h2>
+<form method="post" action="${base}/github/unlink">
+${(0, views_1.csrfField)(viewer)}
+<p>Linked to GitHub account <a href="https://github.com/${user.github.login}"><b>${user.github.login}</b></a>
+<span class="mono small muted">id ${String(user.github.id)}</span>. &ldquo;Sign in with GitHub&rdquo; signs in as ${name},
+with their full standing.</p>
+<button type="submit" class="btn btn-danger-outline">Unlink</button>
+</form>
+<p class="muted small">Unlinking ends sessions signed in with GitHub on their next request. To bar this person from
+GitHub sign-in entirely, also remove them from the approved list under <a href="/admin/github">GitHub sign-in</a>, or a
+fresh account would be created for them on their next sign-in.</p>
+</div>`
+        : '';
     const identity = (0, html_1.html) `<div class="form-box">
 <h2>Identity</h2>
 <form method="post" action="${base}/emails">
@@ -533,13 +993,15 @@ ${(0, views_1.csrfField)(viewer)}
 <button type="submit" class="btn btn-danger">${(0, icons_1.icon)('trash')}<span>Delete this user</span></button>
 </form>
 </div>`;
-    const content = (0, html_1.html) `<div class="page-head"><div class="with-avatar">${(0, avatar_1.avatar)(name, 32)}<h1>${name}</h1></div></div>
+    const content = (0, html_1.html) `<div class="page-head"><div class="with-avatar">${(0, avatar_1.avatar)(name, 32)}<h1>${name}</h1></div><span class="right-group"><a class="btn" href="/${encodeURIComponent(name)}">${(0, icons_1.icon)('person')}<span>Profile</span></a></span></div>
 ${flashBanner(msg)}
 ${errorBanner(error)}
 <p class="muted">${user.siteAdmin ? 'Site admin' : (0, html_1.html) `Owns the collection <span class="mono">${name}</span> by name`}</p>
 <h2>Tokens</h2>
 ${tokens}
 ${mint}
+${passkeys}
+${github}
 ${grant}
 ${identity}
 ${danger}
@@ -559,8 +1021,10 @@ function adminShell(viewer, active, title, path, body) {
     const nav = (0, html_1.html) `<aside class="admin-side"><div class="side-block"><h3>${(0, icons_1.icon)('sliders')}Administration</h3><div class="side-links">
 ${item('users', '/admin/users', 'Users', 'people')}
 ${item('runners', '/admin/runners', 'Runners', 'server')}
+${canVault ? item('github', '/admin/github', 'GitHub sign-in', 'person') : ''}
 ${canVault ? item('egress', '/admin/egress', 'Egress', 'upload') : ''}
 ${canVault ? item('appearance', '/admin/appearance', 'Appearance', 'appearance') : ''}
+${canVault ? item('settings', '/admin/settings', 'Vault settings', 'sliders') : ''}
 </div></div></aside>`;
     // The bar locates an admin page the way it locates a repository page: the
     // trail up from here, for after the heading has scrolled away.
@@ -568,8 +1032,10 @@ ${canVault ? item('appearance', '/admin/appearance', 'Appearance', 'appearance')
         index: null,
         users: { href: '/admin/users', label: 'Users' },
         runners: { href: '/admin/runners', label: 'Runners' },
+        github: { href: '/admin/github', label: 'GitHub sign-in' },
         egress: { href: '/admin/egress', label: 'Egress' },
         appearance: { href: '/admin/appearance', label: 'Appearance' },
+        settings: { href: '/admin/settings', label: 'Vault settings' },
     };
     const section = sections[active];
     const crumbs = (0, html_1.html) ` / <a href="/admin">admin</a>${section ? (0, html_1.html) ` / <a href="${section.href}">${section.label}</a>` : ''}`;
@@ -585,16 +1051,22 @@ function adminIndexPage(viewer, canVault) {
 <div class="card-list">
 ${card('/admin/users', 'Users', 'Create users, grant site admin, mint tokens.')}
 ${card('/admin/runners', 'Runners', 'Register the machines that execute workflow jobs.')}
+${canVault
+        ? card('/admin/github', 'GitHub sign-in', 'Let approved GitHub accounts sign in to this vault.')
+        : ''}
 ${canVault
         ? card('/admin/egress', 'Egress', 'See what has been sent out today, per repository, and cap what a day may send.')
         : ''}
 ${canVault
         ? card('/admin/appearance', 'Appearance', 'Choose the theme this vault is served with.')
         : ''}
+${canVault
+        ? card('/admin/settings', 'Vault settings', 'The sites hostname, CI retention, forwarded headers, and rate limits.')
+        : ''}
 </div>
 ${canVault
         ? ''
-        : (0, html_1.html) `<p class="muted small">Appearance and the egress budget are vault-wide settings, so they are the site admin's.</p>`}`;
+        : (0, html_1.html) `<p class="muted small">Appearance, the egress budget, and the vault settings are vault-wide, so they are the site admin's.</p>`}`;
     return adminShell(viewer, 'index', 'Administration', '/admin', content);
 }
 /**
@@ -720,6 +1192,205 @@ ${(0, views_1.csrfField)(viewer)}
 </form>`;
     return adminShell(viewer, 'appearance', 'Appearance', '/admin/appearance', content);
 }
+function isVaultSettingsSection(value) {
+    return value === 'sites' || value === 'ci' || value === 'network' || value === 'limits';
+}
+/**
+ * The rest of config.json, administered: the sites hostname, CI retention,
+ * and the startup-read network and limits blocks. The first two are read per
+ * request, so a save is in effect on the next one. The last two are read once
+ * at startup; a save still writes config.json, and the box carries an amber
+ * note naming each saved value the running server is not yet using, with the
+ * command that restarts it, so the state of the world is never misreported.
+ */
+function vaultSettingsPage(viewer, info, msg, section) {
+    // A message belongs to the box whose form produced it; one that names no box
+    // (a hand-typed URL, an older link) stays at the top.
+    const flashIn = (name) => (section === name ? flashBanner(msg) : '');
+    const restartHow = info.restart
+        ? (0, html_1.html) `restart the server: <span class="mono">${info.restart.command}</span>${info.restart.caveat ? (0, html_1.html) ` (${info.restart.caveat})` : ''}`
+        : (0, html_1.html) `stop the server and start it again the way it was started`;
+    const pendingNote = (rows) => rows.length
+        ? (0, html_1.html) `<div class="restart-note">Saved, but not yet in effect: the running server started with ${(0, html_1.joinHtml)(rows.map((r) => (0, html_1.html) `<span class="mono">${r.name}</span> ${r.running} (saved: ${r.saved})`), ', ')}. To apply, ${restartHow}.</div>`
+        : '';
+    const num = (id, label, value, min, blurb) => (0, html_1.html) `<div class="field"><label for="${id}">${label}</label><input type="number" id="${id}" name="${id}" min="${String(min)}" step="1" value="${String(value)}">${blurb === '' ? '' : (0, html_1.html) `<p class="muted small">${blurb}</p>`}</div>`;
+    // Who holds what under the sites host: the labels repositories have claimed,
+    // which are one flat vault-wide namespace, and each collection's alias, which
+    // stands in for its name in every derived hostname. Neither is editable here;
+    // this is the one place both can be read at once.
+    const names = info.names;
+    const labelRows = (names?.labels ?? []).map(({ label, collection, repo }) => (0, html_1.html) `<tr><td class="mono">${label}.${info.sitesHost}</td><td><a href="/${collection}/${repo}/settings#site">${collection}/${repo}</a></td></tr>`);
+    const aliasRows = (names?.collections ?? []).map(({ collection, alias, stored, taken }) => (0, html_1.html) `<tr><td class="mono">${alias ? (0, html_1.html) `&lt;repo&gt;--${alias}.${info.sitesHost}` : (0, html_1.html) `<span class="muted">none</span>`}</td><td><a href="/${collection}/settings#site">${collection}</a>${stored
+        ? (0, html_1.raw)(' <span class="counter">set</span>')
+        : taken
+            ? (0, html_1.html) ` <span class="muted small">(<span class="mono">${taken}</span> is taken)</span>`
+            : ''}</td></tr>`);
+    const namesUnderHost = names
+        ? (0, html_1.html) `<hr class="rule">
+<h3>Claimed labels</h3>
+${labelRows.length
+            ? (0, html_1.html) `<table class="listing"><tbody><tr><th>Hostname</th><th>Repository</th></tr>${labelRows}</tbody></table>`
+            : (0, html_1.html) `<p class="muted">No repository has claimed a label; every site is served under its derived hostname.</p>`}
+<p class="muted small">A label is a single name under the sites host, claimed by a repository's admin in its own settings, and one repository at a time holds it. These labels cannot collide with a derived hostname, which always carries a doubled hyphen. ${names.reserved.length
+            ? (0, html_1.html) `Reserved, so no repository may claim them: ${(0, html_1.joinHtml)(names.reserved.map((r) => (0, html_1.html) `<span class="mono">${r}</span>`), ', ')}.`
+            : ''}</p>
+<h3>Collection aliases</h3>
+${aliasRows.length
+            ? (0, html_1.html) `<table class="listing"><tbody><tr><th>Derived hostname</th><th>Collection</th></tr>${aliasRows}</tbody></table>`
+            : (0, html_1.html) `<p class="muted">No collections yet.</p>`}
+<p class="muted small">The alias stands in for a collection's name in each of its repositories' derived hostnames. Without one stored, it is the collection's own name where that is usable as a hostname label, and otherwise the name rewritten as one; a rewritten label that another collection already holds is left unused, and an owner resolves it by storing an alias in the collection's settings. A collection with no alias has no derived hostnames, and its sites stay on the forge host unless each repository claims a label.</p>`
+        : '';
+    const sitesBox = (0, html_1.html) `<div class="box settings-box" id="sites"><div class="box-header">${(0, icons_1.icon)('globe')}Sites hostname</div><div class="box-body">
+${flashIn('sites')}
+<p>${info.sitesHost
+        ? (0, html_1.html) `Sites are served from their own origins under <span class="mono">${info.sitesHost}</span>.`
+        : (0, html_1.html) `No sites host is set, so sites are served on the forge host, sandboxed.`}</p>
+<form method="post" action="/admin/settings/sites">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="sitesHost">Sites host</label><input type="text" id="sitesHost" name="host" value="${info.sitesHost}" placeholder="vault-sites.example.org" autocomplete="off" spellcheck="false">
+<p class="muted small">Subdomains of this hostname serve each eligible repository's site, at <span class="mono">&lt;repo&gt;--&lt;alias&gt;.&lt;host&gt;</span> or the label the repository chose, in place of the sandbox on the forge host. Set it only once the wildcard resolves to this vault and a certificate covers it, since sites stop being served anywhere else the moment it is saved. It is read per request, so a save is in effect immediately; empty puts sites back on the forge host, equally immediately.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+${namesUnderHost}
+</div></div>`;
+    const ciBox = (0, html_1.html) `<div class="box settings-box" id="ci"><div class="box-header">${(0, icons_1.icon)('workflow')}CI retention</div><div class="box-body">
+${flashIn('ci')}
+<form method="post" action="/admin/settings/ci">
+${(0, views_1.csrfField)(viewer)}
+${num('runs', 'Completed runs to keep', info.ci.runs, 0, 'Per repository; older completed runs beyond this are dropped, with their logs and artifacts.')}
+${num('days', 'Days to keep them', info.ci.days, 0, 'Also drop completed runs older than this many days; 0 keeps them regardless of age.')}
+${num('artifactMb', 'Largest artifact (MB)', info.ci.artifactMb, 1, 'The largest artifact a workflow job may upload.')}
+<p class="muted small">Read per request, so a change is in effect on the next one.</p>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div></div>`;
+    const networkBox = (0, html_1.html) `<div class="box settings-box" id="network"><div class="box-header">${(0, icons_1.icon)('link')}Network</div><div class="box-body">
+${flashIn('network')}
+${pendingNote(info.trustProxy !== info.startup.trustProxy
+        ? [
+            {
+                name: 'trustProxy',
+                running: info.startup.trustProxy ? 'believed' : 'not believed',
+                saved: info.trustProxy ? 'believed' : 'not believed',
+            },
+        ]
+        : [])}
+<form method="post" action="/admin/settings/network">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="trustProxy">Forwarded headers</label><select id="trustProxy" name="trustProxy">
+<option value="true"${info.trustProxy ? (0, html_1.raw)(' selected') : ''}>Believed: a reverse proxy is the only way in</option>
+<option value="false"${info.trustProxy ? '' : (0, html_1.raw)(' selected')}>Not believed: the vault is exposed directly</option>
+</select>
+<p class="muted small">Whether <span class="mono">X-Forwarded-For</span> and <span class="mono">X-Forwarded-Proto</span> may be believed. Believe them only when a reverse proxy you control is the only way in: on a directly exposed vault they let any client claim any address, which defeats every per-address limit. Read once at startup, so a save here writes <span class="mono">config.json</span> and waits for a restart.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div></div>`;
+    const limitFields = [
+        {
+            key: 'requestsPerMinute',
+            label: 'Requests per minute',
+            min: 0,
+            blurb: 'Per address, over everything not exempt; 0 turns the ceiling off.',
+        },
+        {
+            key: 'authFailures',
+            label: 'Auth failures',
+            min: 0,
+            blurb: 'Failed credential checks per address and username, in 15 minutes; 0 turns the limit off.',
+        },
+        { key: 'clone', label: 'Concurrent clones', min: 1, blurb: '' },
+        { key: 'push', label: 'Concurrent pushes', min: 1, blurb: '' },
+        { key: 'search', label: 'Concurrent searches', min: 1, blurb: '' },
+        { key: 'tree', label: 'Concurrent tree reads', min: 1, blurb: '' },
+    ];
+    const limitsBox = (0, html_1.html) `<div class="box settings-box" id="limits"><div class="box-header">${(0, icons_1.icon)('filter')}Limits</div><div class="box-body">
+${flashIn('limits')}
+${pendingNote(limitFields
+        .filter((f) => info.limits[f.key] !== info.startup.limits[f.key])
+        .map((f) => ({ name: f.key, running: String(info.startup.limits[f.key]), saved: String(info.limits[f.key]) })))}
+<form method="post" action="/admin/settings/limits">
+${(0, views_1.csrfField)(viewer)}
+${(0, html_1.joinHtml)(limitFields.map((f) => num(f.key, f.label, info.limits[f.key], f.min, f.blurb)), '\n')}
+<p class="muted small">The four concurrencies are how many git subprocesses of each class may run at once; requests beyond them queue briefly. All of this box is read once at startup, since it holds live counters, so a save writes <span class="mono">config.json</span> and waits for a restart. The daily egress cap is the one limit not here: it is read per request, and lives on the <a href="/admin/egress">Egress</a> page.</p>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div></div>`;
+    const content = (0, html_1.html) `<div class="page-head"><h1>Vault settings</h1></div>
+${section === undefined ? flashBanner(msg) : ''}
+<p class="muted">The rest of what <span class="mono">config.json</span> holds, next to <span class="mono">vault.json</span>: every box writes that file, which can equally be edited by hand. The theme is under <a href="/admin/appearance">Appearance</a>, the daily egress cap under <a href="/admin/egress">Egress</a>, and sign-in with GitHub has a <a href="/admin/github">page of its own</a>.</p>
+${sitesBox}
+${ciBox}
+${networkBox}
+${limitsBox}`;
+    return adminShell(viewer, 'settings', 'Vault settings', '/admin/settings', content);
+}
+/**
+ * Sign-in with GitHub, administered: the OAuth App's credentials, the list of
+ * GitHub accounts approved to sign in, and what is already linked. The
+ * callback URL is on the page because it is the one value GitHub's form asks
+ * for that the administrator would otherwise have to derive by hand.
+ */
+function adminGithubPage(viewer, opts) {
+    const on = opts.clientId !== '' && opts.secretSet;
+    const status = on
+        ? (0, html_1.html) `<p>Sign-in with GitHub is <b>on</b>: the sign-in page offers it, approved GitHub accounts get an account here
+on their first sign-in, and users may link their GitHub account from their account page.</p>`
+        : (0, html_1.html) `<p>Sign-in with GitHub is <b>off</b>${opts.clientId !== '' ? ' until the client secret is added below' : ''}.</p>`;
+    const setup = (0, html_1.html) `<div class="form-box">
+<h2>OAuth App</h2>
+${status}
+<p class="muted small">Create a GitHub OAuth App (on GitHub: Settings &rarr; Developer settings &rarr; OAuth Apps) with
+this authorization callback URL, and put its credentials here:</p>
+${(0, views_1.copyRow)(opts.callbackUrl)}
+<form method="post" action="/admin/github">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="ghClientId">Client id</label><input type="text" id="ghClientId" name="clientId" value="${opts.clientId}" autocomplete="off"></div>
+<div class="field"><label for="ghClientSecret">Client secret</label><input type="password" id="ghClientSecret" name="clientSecret" autocomplete="off" placeholder="${opts.secretSet ? 'stored; leave empty to keep it' : ''}">
+<p class="muted small">The client id is public and kept in <span class="mono">config.json</span>; the secret is written
+to <span class="mono">.github-secret</span> beside <span class="mono">.secret</span>, mode 600, and never shown again.
+Saving with an empty client id turns sign-in with GitHub off and removes the stored secret.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div>`;
+    const approvedRows = opts.approved.map((a) => (0, html_1.html) `<tr><td><a href="https://github.com/${a.login}">${a.login}</a></td><td class="mono small muted">${String(a.id)}</td><td class="muted small">${a.added ? (0, render_1.timeTag)(a.added, '') : ''}</td><td>${a.account
+        ? (0, views_1.userLink)(a.account, { face: 20, bold: true })
+        : (0, html_1.raw)('<span class="muted small">first sign-in creates one</span>')}</td><td class="right">
+<form method="post" action="/admin/github/approved/${String(a.id)}/remove" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn btn-danger-outline">Remove</button>
+</form></td></tr>`);
+    const approvedTable = approvedRows.length
+        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>GitHub user</th><th>Id</th><th>Approved</th><th>Account here</th><th class="right"></th></tr>${approvedRows}</tbody></table>`
+        : (0, html_1.html) `<p class="muted">Nobody is approved yet.</p>`;
+    const approve = (0, html_1.html) `<div class="form-box">
+<h2>Approved GitHub accounts</h2>
+<p class="muted small">An approved GitHub account may sign in here; its first sign-in creates a vault account named
+after the GitHub login, holding no tokens until one is minted for it. Approval is recorded by GitHub's stable numeric
+id, resolved from the username as it is added, so a later rename on GitHub transfers nothing. Removing an approval
+stops new accounts being created; a GitHub account already linked to a user keeps signing in until it is unlinked on
+that user's page.</p>
+${approvedTable}
+<form method="post" action="/admin/github/approve" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<label for="ghLogin">GitHub username</label><input type="text" id="ghLogin" name="login" autocomplete="off" spellcheck="false" required>
+<button type="submit" class="btn">${(0, icons_1.icon)('plus')}<span>Approve</span></button>
+</form>
+</div>`;
+    const linkedRows = opts.linked.map((l) => (0, html_1.html) `<tr><td class="with-avatar">${(0, views_1.userLink)(l.username, { face: 20, bold: true })}</td><td><a href="https://github.com/${l.login}">${l.login}</a></td><td class="mono small muted">${String(l.id)}</td></tr>`);
+    const linked = linkedRows.length
+        ? (0, html_1.html) `<h2>Linked accounts</h2>
+<table class="listing"><tbody><tr><th>User</th><th>GitHub account</th><th>Id</th></tr>${linkedRows}</tbody></table>
+<p class="muted small">Each is unlinked from its user's page under <a href="/admin/users">Users</a>, or by the user on
+their own account page.</p>`
+        : '';
+    const content = (0, html_1.html) `<div class="page-head"><h1>GitHub sign-in</h1></div>
+${flashBanner(opts.msg)}
+${errorBanner(opts.error)}
+${setup}
+${approve}
+${linked}`;
+    return adminShell(viewer, 'github', 'GitHub sign-in', '/admin/github', content);
+}
 function tokenPage(viewer, username, token, created) {
     const heading = created ? `Created user ${username}` : `New token for ${username}`;
     const content = (0, html_1.html) `<div class="form-box">