Merge pull request 'feat(shard): admin-configurable visibility for every shard surface' (#109) from feat/shard-visibility-framework into edge

Reviewed-on: #109
Reviewed-by: Colby Whitlock <whitlocktech@gmail.com>

.env.example

@@ -1,5 +1,14 @@
-# ─── UOMysticmoon — root environment (used by docker-compose) ───
+# ─── Runic Gateway — root environment (used by docker-compose) ───
 # Copy to .env and fill in. NEVER commit the real .env.
+# To run this as an existing branded instance (e.g. UOMysticmoon), see
+# .env.uomysticmoon.example for the exact BRAND_*/DB pinning to copy in.
+
+# Container image tag pulled by docker-compose (app + bot). Published by the
+# Gitea Actions workflow on every merge to main as `latest` and `sha-<7>`.
+# Leave as `latest` for routine deploys; pin to a specific build for a
+# reproducible deploy or rollback, e.g. IMAGE_TAG=sha-042a151.
+# Deploy: `docker compose pull && docker compose up -d`.
+IMAGE_TAG=latest
 
 # App
 NODE_ENV=production
@@ -16,12 +25,32 @@ LOG_TO_FILE=true        # set false for console-only
 LOG_DIR=/app/logs       # log directory inside the container (bind-mounted to ./logs)
 LOG_FILE=app.log
 
+# ─── Branding (BRAND_*) ───────────────────────────────────────────────────
+# Instance identity. Defaults render as "Runic Gateway"; set these to rebrand
+# without a rebuild. Text + colors reach the SPA through the settings API at
+# runtime; the server templates index.html <title>/meta/OG/favicon at boot. The
+# admin-editable "site title" and "contact email" settings, if set, override
+# BRAND_NAME / BRAND_CONTACT_EMAIL.
+BRAND_NAME=Runic Gateway
+BRAND_SHORT_NAME=Runic Gateway
+BRAND_TAGLINE=an independent private Ultima Online shard
+BRAND_DESCRIPTION=Runic Gateway — an independent private Ultima Online shard. News, screenshots, guides, and community notes.
+BRAND_CONTACT_EMAIL=
+BRAND_URL=
+# Accent color — drives the web theme's --accent and the Discord embed color.
+BRAND_ACCENT_COLOR=#7f99bd
+# Image assets: paths under the /brand mount (see docker-compose.yml) or absolute
+# URLs. Blank = built-in defaults (hero falls back to a neutral built-in image).
+BRAND_LOGO=
+BRAND_HERO=
+BRAND_FAVICON=
+
 # Database (the values here are shared by the `db`, `app`, and `bot` containers —
 # the bot only ever touches its own tables: guild_config, mod_actions, warnings)
 DB_HOST=db
 DB_PORT=3306
-DB_NAME=uomysticmoon
-DB_USER=uomm
+DB_NAME=runic_gateway
+DB_USER=runic
 DB_PASSWORD=change-me-db-password
 DB_ROOT_PASSWORD=change-me-root-password
 
@@ -31,7 +60,8 @@ JWT_EXPIRES_IN=1d
 # auto = Secure cookie only when the request arrives over HTTPS (Pangolin).
 # Leave as auto so login works both via the LAN IP (HTTP) and the proxy (HTTPS).
 COOKIE_SECURE=auto
-COOKIE_NAME=uomm_token
+# Changing this on a live instance invalidates existing sessions (users re-login).
+COOKIE_NAME=rg_token
 
 # Reverse-proxy trust (req.ip / req.secure for rate limiting, backoff, bot-ban).
 # Path: client -> Pangolin -> newt agent "ptero" (separate VM) -> app. Pin this
@@ -44,8 +74,8 @@ TRUST_PROXY=1
 # request (to verify/refresh ptero's IP without redeploying). Noisy; keep off.
 DEBUG_TRUST_PROXY=0
 
-# Optional TOTP two-factor (opt-in per user).
-TOTP_ISSUER=UOMysticmoon
+# Optional TOTP two-factor (opt-in per user). Defaults to BRAND_NAME when unset.
+# TOTP_ISSUER=Runic Gateway
 TOTP_CHALLENGE_TTL=5m
 
 # First admin bootstrap — created only if no users exist yet.
@@ -53,13 +83,10 @@ TOTP_CHALLENGE_TTL=5m
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
 
-# Email (optional). If SMTP_HOST is blank, the contact endpoint tells the
-# client to fall back to a mailto: link instead.
-SMTP_HOST=
-SMTP_PORT=587
-SMTP_USER=
-SMTP_PASS=
-CONTACT_TO=UOMysticmoon@gmail.com
+# Email is configured in Admin → Settings → Email (Gmail over OAuth2), not via
+# env. It reuses the Google auth provider's OAuth client and stores an encrypted
+# refresh token in the DB. Until it's connected, the contact form falls back to
+# a mailto: link (recipient = the `contact_email` site setting).
 
 # CORS — only needed for local dev when the Vite dev server is a different origin.
 CLIENT_ORIGIN=http://localhost:5173
@@ -79,3 +106,37 @@ CLIENT_ORIGIN=http://localhost:5173
 # longer rides the public listener, but an explicit deny rule is belt-and-braces.
 BOT_INTERNAL_URL=http://bot:4100
 BOT_INTERNAL_KEY=change-me-to-a-long-random-string
+
+# uo-link sidecar — the HTTP + WebSocket bridge to the ServUO game server. The
+# website ingests its live event feed and proxies its read queries/commands
+# (shard status, online players, player-vendor sales, IDOC houses, character
+# sheets, account linking, town-crier). In production the sidecar + shard run on
+# a DIFFERENT host from the website, so both URLs are configurable. The
+# shared-secret auth token is NOT an env var — it is entered in the admin panel
+# (Shard page) and stored encrypted in the DB (same pattern as the Discord bot
+# token). These URLs are just defaults; the admin can override them at runtime.
+UOLINK_BASE_URL=http://127.0.0.1:8080
+UOLINK_WS_URL=ws://127.0.0.1:8080/ws
+UOLINK_PROTOCOL=1
+
+# ─── Push notifications (M7) — self-hosted ntfy UnifiedPush relay ───
+# The `ntfy` compose service and the backend's push fan-out (opt-in notifications
+# for the Android app; docs/android/PLAN.md §11).
+#   NTFY_BASE_URL         Public URL devices reach the relay at (behind the
+#                         reverse proxy). Used BOTH to configure the ntfy service
+#                         AND as the backend's SSRF allow-set — a device may only
+#                         register an endpoint whose origin matches this.
+#   NTFY_ALLOWED_ORIGINS  Optional, comma-separated extra allowed endpoint origins
+#                         (defaults to NTFY_BASE_URL's origin). Set only if devices
+#                         register endpoints on a different host than NTFY_BASE_URL.
+#   NTFY_PUBLISH_TOKEN    Optional. The content-free-tickle design needs NO token;
+#                         set one only to require auth on backend→ntfy publishes.
+#   NTFY_HOST_PORT        Host port the ntfy container publishes :80 on (default
+#                         2586). The public reverse proxy forwards the notification
+#                         subdomain to host:NTFY_HOST_PORT — required because the
+#                         proxy lives outside the compose network and cannot reach
+#                         ntfy any other way. Change only on a host-port conflict.
+NTFY_BASE_URL=https://ntfy.example.com
+# NTFY_ALLOWED_ORIGINS=https://ntfy.example.com
+# NTFY_PUBLISH_TOKEN=
+# NTFY_HOST_PORT=2586

.env.uomysticmoon.example

@@ -0,0 +1,30 @@
+# ─── UOMysticmoon instance — BRAND_* / identity overrides ───
+#
+# Runic Gateway's first "tenant". Copy these into the deploy .env (on top of
+# .env.example) to run RunicGateway/website as UOMysticmoon. This is the proof
+# that branding is data, not code: the same image renders as UOMysticmoon purely
+# from these vars.
+#
+# Only the values that differ from the Runic Gateway defaults are shown.
+
+# Identity
+BRAND_NAME=UOMysticmoon
+BRAND_SHORT_NAME=Mysticmoon
+BRAND_TAGLINE=an independent private Ultima Online shard
+BRAND_DESCRIPTION=UOMysticmoon — an independent private Ultima Online shard. News, screenshots, guides, and community notes.
+BRAND_CONTACT_EMAIL=UOMysticmoon@gmail.com
+# BRAND_URL=https://<your public url>
+
+# Visual — the existing UOM accent + hero image (baked into the image already).
+BRAND_ACCENT_COLOR=#7f99bd
+BRAND_HERO=/assets/img/uomysticmoon-main-hero.png
+
+# TOTP label (defaults to BRAND_NAME, so optional — shown for clarity).
+TOTP_ISSUER=UOMysticmoon
+
+# ── Infrastructure identifiers — PIN to the existing production values so the
+# ── app keeps talking to the same database and existing sessions stay valid.
+# ── (These are NOT branding; they must match what production already uses.)
+DB_NAME=uomysticmoon
+DB_USER=uomm
+COOKIE_NAME=uomm_token

.gitea/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,41 @@
+---
+name: Bug report
+about: Report something that is broken or behaving unexpectedly
+title: "[bug] "
+labels:
+  - bug
+---
+
+## Summary
+
+<!-- A clear, concise description of the bug. -->
+
+## Steps to reproduce
+
+1.
+2.
+3.
+
+## Expected behavior
+
+<!-- What you expected to happen. -->
+
+## Actual behavior
+
+<!-- What actually happened. Include exact error messages and logs if you have them. -->
+
+## Environment
+
+- Component / repo:
+- Version or commit:
+- OS / runtime (Node, Rust, ServUO, browser…):
+- Deployment (Docker Compose, local dev, bare metal…):
+
+## Additional context
+
+<!-- Screenshots, config (with secrets redacted), anything else that helps. -->
+
+<!--
+  Security issue? Do NOT file it here. See SECURITY.md and email
+  whitlocktech@gmail.com instead.
+-->

.gitea/ISSUE_TEMPLATE/config.yaml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Security vulnerability
+    url: https://gitea.whitlocktech.com/RunicGateway/website/src/branch/main/SECURITY.md
+    about: Please do not open a public issue for security problems — report them privately by email instead (see SECURITY.md).

.gitea/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea, enhancement, or new capability
+title: "[feature] "
+labels:
+  - enhancement
+---
+
+## Problem / motivation
+
+<!-- What are you trying to do? What's missing or painful today? -->
+
+## Proposed solution
+
+<!-- What you'd like to see happen. -->
+
+## Alternatives considered
+
+<!-- Other approaches you thought about, and why you prefer the one above. -->
+
+## Additional context
+
+<!-- Mockups, links, related issues, affected component/repo, etc. -->

.gitea/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!--
+  Thanks for contributing to Runic Gateway!
+  Please fill out the sections below and check every box before requesting review.
+-->
+
+## What & why
+
+<!-- What does this PR change, and why? Link any related issue: "Closes #123". -->
+
+## How it was tested
+
+<!-- Commands you ran, manual steps, screenshots. -->
+
+## Checklist
+
+- [ ] I have read [CONTRIBUTING.md](CONTRIBUTING.md).
+- [ ] The change builds and existing tests/checks pass locally.
+- [ ] I have added or updated tests/docs where it makes sense.
+- [ ] My commits are reasonably scoped with clear messages.
+
+## AI-assisted contributions (required)
+
+This project **requires disclosure of AI tool usage**. Please pick one:
+
+- [ ] No AI tools were used to produce this contribution.
+- [ ] AI tools were used. Tool(s): `___________`. I have reviewed and understand
+      every change, and take responsibility for it. AI-authored commits are
+      marked with a `Co-Authored-By` / `Assisted-By` trailer.
+
+## License
+
+- [ ] I agree that my contribution is licensed under this project's license
+      (**GNU GPL v3.0 or later**), and I have the right to contribute it.

.gitea/scripts/gen_tree.py

@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+"""Render an ASCII tree of tracked files, read from stdin (one path per line).
+
+Used by the `sync-project-tree` workflow to regenerate this repo's PROJECT_TREE.md
+snapshot in the RunicGateway/docs repo. Feed it `git ls-files`:
+
+    git ls-files | python3 .gitea/scripts/gen_tree.py <root-label>
+
+Deterministic ordering: directories before files, each group sorted
+case-insensitively with the raw name as a tiebreak. Output uses the classic
+`tree(1)` box-drawing style so the result is stable across runs and platforms.
+"""
+import sys
+
+
+def build(paths):
+    root = {}
+    for p in paths:
+        p = p.strip().replace("\\", "/")
+        if not p:
+            continue
+        node = root
+        for part in p.split("/"):
+            node = node.setdefault(part, {})
+    return root
+
+
+def render(node, prefix, lines):
+    entries = list(node.items())
+    # directories (non-empty children dict) before files, then case-insensitive name
+    entries.sort(key=lambda kv: (0 if kv[1] else 1, kv[0].lower(), kv[0]))
+    for i, (name, child) in enumerate(entries):
+        last = i == len(entries) - 1
+        branch = "└── " if last else "├── "
+        suffix = "/" if child else ""
+        lines.append(f"{prefix}{branch}{name}{suffix}")
+        if child:
+            render(child, prefix + ("    " if last else "│   "), lines)
+
+
+def main():
+    try:
+        sys.stdout.reconfigure(encoding="utf-8", newline="\n")
+    except AttributeError:
+        pass
+    root_label = sys.argv[1] if len(sys.argv) > 1 else "."
+    tree = build(sys.stdin.read().splitlines())
+    lines = [f"{root_label}/"]
+    render(tree, "", lines)
+    sys.stdout.write("\n".join(lines) + "\n")
+
+
+if __name__ == "__main__":
+    main()

.gitea/workflows/build-images.yml

@@ -0,0 +1,120 @@
+# Build the app + bot container images, publish them to Gitea's container
+# registry, then roll the production stack onto the fresh images — all on every
+# merge to main. Production only ever pulls prebuilt images; it never builds.
+#
+# Two jobs run in sequence:
+#   build   — builds & pushes website-app / website-bot images (on ubuntu-latest)
+#   deploy  — `needs: build`, so it starts only after a clean build+push, and
+#             pulls + recreates the stack on the production host (on uom-deploy-runner)
+#
+# Prerequisites (one-time):
+#   • An always-on Gitea runner with label `ubuntu-latest` whose jobs have the
+#     host Docker socket mounted (/var/run/docker.sock), so `docker build` talks
+#     to the host daemon. This also gives free layer caching between runs.
+#   • A second self-hosted runner labelled `uom-deploy-runner` ON the production host,
+#     with access to the Docker daemon and to /home/perry/website (the directory
+#     holding the production docker-compose.yml + .env). This is what actually
+#     rolls the stack; it must be able to `docker compose pull` from the registry
+#     (log in once on the host, or ensure the images are public-read).
+#   • Two repo secrets (Settings → Actions → Secrets):
+#       REGISTRY_USER  — the Gitea username that owns the token below
+#       REGISTRY_TOKEN — a Gitea access token with `write:package` (+ read:package)
+#     See the PR description / README for step-by-step token creation.
+#
+# Produces, in gitea.whitlocktech.com/<owner>/ :
+#   website-app:latest  + website-app:sha-<7>
+#   website-bot:latest  + website-bot:sha-<7>
+# then deploys the `:latest` images (docker-compose.yml defaults IMAGE_TAG=latest).
+
+name: Build container images
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch: {}
+
+concurrency:
+  group: images-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  REGISTRY: gitea.whitlocktech.com
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the merged commit
+        uses: actions/checkout@v4
+
+      - name: Derive image refs (registry owner must be lowercase for Docker)
+        run: |
+          set -euo pipefail
+          OWNER="$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')"
+          SHORT_SHA="${GITHUB_SHA:0:7}"
+          echo "APP_IMAGE=${REGISTRY}/${OWNER}/website-app" >> "$GITHUB_ENV"
+          echo "BOT_IMAGE=${REGISTRY}/${OWNER}/website-bot" >> "$GITHUB_ENV"
+          echo "TAG=sha-${SHORT_SHA}" >> "$GITHUB_ENV"
+
+      - name: Verify the Docker daemon is reachable
+        # Fails fast with a clear message if the host socket isn't mounted into
+        # the job container (the one hard runner prerequisite).
+        run: |
+          set -euo pipefail
+          if ! docker info >/dev/null 2>&1; then
+            echo "::error::Docker daemon not reachable. Mount /var/run/docker.sock into the runner's job containers."
+            exit 1
+          fi
+          echo "Docker daemon OK"
+
+      - name: Log in to the Gitea container registry
+        run: |
+          set -euo pipefail
+          echo "${{ secrets.REGISTRY_TOKEN }}" \
+            | docker login "${REGISTRY}" -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
+      - name: Build & push the app image (server + client)
+        run: |
+          set -euo pipefail
+          docker build -f Dockerfile \
+            -t "${APP_IMAGE}:latest" \
+            -t "${APP_IMAGE}:${TAG}" \
+            .
+          docker push "${APP_IMAGE}:latest"
+          docker push "${APP_IMAGE}:${TAG}"
+
+      - name: Build & push the bot image
+        run: |
+          set -euo pipefail
+          docker build -f bot/Dockerfile \
+            -t "${BOT_IMAGE}:latest" \
+            -t "${BOT_IMAGE}:${TAG}" \
+            .
+          docker push "${BOT_IMAGE}:latest"
+          docker push "${BOT_IMAGE}:${TAG}"
+
+      - name: Log out (clear cached credentials from the runner)
+        if: always()
+        run: docker logout "${REGISTRY}" || true
+
+  deploy:
+    # Roll production onto the images `build` just pushed. `needs: build` makes
+    # this wait for a clean build+push — if the build fails, deploy never fires,
+    # so the running stack is left untouched rather than torn down for nothing.
+    needs: build
+    runs-on: uom-deploy-runner
+    # Guard against a workflow_dispatch fired from a non-main branch: only ever
+    # deploy the main line to production.
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Pull the fresh images and recreate the stack
+        # `pull` grabs the new :latest images the build job published; `down`
+        # then `up -d` recreates the containers on them. Compose only recreates
+        # services whose image digest changed, so the DB stays put.
+        run: |
+          set -euo pipefail
+          cd /home/perry/website
+          docker compose pull
+          docker compose down
+          docker compose up -d
+          docker compose ps

.gitea/workflows/pr-checks.yml

@@ -0,0 +1,80 @@
+# Gate every pull request into `main` on a fast, DB-free check suite so a broken
+# build or failing test can't reach the deployable branch. Complements
+# build-images.yml, which runs only AFTER merge (on push to main) to publish
+# images — this one runs BEFORE merge.
+#
+# Enforcement (one-time, in the Gitea UI):
+#   Repository Settings → Branches → Branch Protection (rule for `main`)
+#     • Enable Status Check
+#     • Status check patterns:  PR Checks / *
+#   Note: Gitea only lists a context in its dropdown after it has reported once,
+#   so let this workflow run on one PR first. The `PR Checks / *` glob matches
+#   without needing the dropdown.
+#
+# Runner: reuses the existing self-hosted `ubuntu-latest` runner. These jobs need
+# only Node (no Docker socket), and the server tests stub their models + point the
+# DB pool at a dead port, so no MariaDB service is required.
+
+name: PR Checks
+
+on:
+  pull_request:
+    branches: [main]
+
+# A newer push to the same PR cancels the in-flight run.
+concurrency:
+  group: pr-checks-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  server-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: server/package-lock.json
+      - name: Install server deps
+        run: npm ci --prefix server
+      - name: Run server tests
+        run: npm test --prefix server
+      - name: Check the route manifest is current
+        # The URL surface is frozen while the routers are carved up by capability
+        # (docs/website/API_V2_PLAN.md § Phase 2). Regenerating from the live Express
+        # stack and diffing proves a "mechanical" refactor moved no URL. A PR that
+        # really does change one has to commit the new manifest, putting it in front
+        # of a reviewer instead of letting it pass silently.
+        run: npm run routes:manifest --prefix server -- --check
+
+  client-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: client/package-lock.json
+      - name: Install client deps
+        run: npm ci --prefix client
+      - name: Run client tests
+        # Pure-logic unit tests on Node's built-in runner (no browser/DOM).
+        run: npm test --prefix client
+      - name: Build client
+        run: npm run build --prefix client
+
+  bot-install:
+    # No tests/build to run; a clean install still catches a broken or
+    # out-of-sync lockfile before it ships in the bot image.
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: bot/package-lock.json
+      - name: Install bot deps
+        run: npm ci --prefix bot

.gitea/workflows/sonarqube.yml

@@ -0,0 +1,87 @@
+# Run SonarQube static analysis against the code that just landed on `main` and
+# report the results to the self-hosted SonarQube server for review. This is
+# intentionally NON-BLOCKING: it triggers on push to main (i.e. AFTER merge),
+# not on pull_request, so it never gates a PR. It complements pr-checks.yml
+# (which gates PRs) and build-images.yml (which ships images) — this one only
+# feeds the dashboard.
+#
+# Prerequisites (one-time, in the Gitea UI — Repo → Settings → Actions):
+#   • Secret   SONAR_TOKEN     — a SonarQube "Analysis" token generated at
+#                                My Account → Security in SonarQube for the
+#                                runic-gateway-website project (or a global one).
+#   • Variable SONAR_HOST_URL  — the SonarQube base URL on your LAN, e.g.
+#                                http://192.168.0.56:9000
+#     (kept as a variable, not committed, so the internal address stays out of git.)
+#
+# The runner (self-hosted `ubuntu-latest`, same as the other workflows) must be
+# able to reach SONAR_HOST_URL on your network. Nothing here waits on the
+# SonarQube Quality Gate, so a failing gate does not fail this job — check the
+# dashboard when you want to.
+
+name: SonarQube
+
+on:
+  push:
+    branches: [main]
+  # Allow re-running the analysis on demand from the Actions tab.
+  workflow_dispatch: {}
+
+concurrency:
+  group: sonarqube-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  analysis:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out (full history for accurate new-code + blame)
+        uses: actions/checkout@v4
+        with:
+          # SonarQube uses git history to attribute issues to authors and to
+          # compute "new code". A shallow clone degrades both.
+          fetch-depth: 0
+
+      # SonarQube runs static analysis only — it never executes the test suite,
+      # so we must produce a coverage report ourselves and hand it to the
+      # scanner (see sonar.javascript.lcov.reportPaths in sonar-project.properties).
+      # Node's built-in `lcov` coverage reporter needs Node >= 22.
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: server/package-lock.json
+
+      - name: Install server deps
+        run: npm ci --prefix server
+
+      - name: Generate server test coverage (LCOV)
+        # Run from the repo root (not `--prefix server`) so the LCOV `SF:` paths
+        # are emitted as `server/src/...`, matching sonar.sources and letting the
+        # scanner resolve them against the project base dir. The server tests stub
+        # their models and point the DB pool at a dead port, so no MariaDB is needed.
+        run: |
+          mkdir -p server/coverage
+          node --test --experimental-test-coverage \
+            --test-reporter=spec --test-reporter-destination=stdout \
+            --test-reporter=lcov --test-reporter-destination=server/coverage/lcov.info \
+            --test-reporter=./scripts/sonar-test-reporter.mjs --test-reporter-destination=server/coverage/test-execution.xml \
+            server/test/*.test.js
+
+      - name: Generate client test coverage (LCOV)
+        # The client's pure-logic modules (lib/, api/, data/) are plain ESM with no
+        # browser/DOM deps, so they run on the same built-in runner. Run from the
+        # repo root so the `SF:` paths come out as `client/src/...`. No `npm ci`:
+        # the tested modules import only relative files + Node built-ins.
+        run: |
+          mkdir -p client/coverage
+          node --test --experimental-test-coverage \
+            --test-reporter=spec --test-reporter-destination=stdout \
+            --test-reporter=lcov --test-reporter-destination=client/coverage/lcov.info \
+            --test-reporter=./scripts/sonar-test-reporter.mjs --test-reporter-destination=client/coverage/test-execution.xml \
+            client/test/*.test.js
+
+      - name: Run SonarQube scan
+        uses: sonarsource/sonarqube-scan-action@v4
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ vars.SONAR_HOST_URL }}

.gitea/workflows/sync-project-tree.yml

@@ -0,0 +1,111 @@
+name: sync-project-tree
+
+# Keeps this repo's file-layout snapshot (docs/website/PROJECT_TREE.md in the
+# RunicGateway/docs repo) current. On every push to `main` it regenerates the
+# tree from tracked files and, if it changed, opens (or force-updates) a pull
+# request against the docs repo. It never writes to the docs repo's `main`
+# directly. Auth reuses the same REGISTRY_USER / REGISTRY_TOKEN secrets the
+# other workflows use (the token needs repo read/write on RunicGateway/docs).
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch: {}
+
+concurrency:
+  group: sync-project-tree
+  cancel-in-progress: true
+
+env:
+  GITEA_HOST: gitea.whitlocktech.com
+  DOCS_REPO: RunicGateway/docs
+  SELF_REPO: RunicGateway/website
+  DOCS_PATH: website/PROJECT_TREE.md
+  TREE_TITLE: Website
+  ROOT_LABEL: website
+  PR_BRANCH: chore/sync-website-tree
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out this repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Ensure python3 is available
+        run: |
+          set -euo pipefail
+          command -v python3 >/dev/null 2>&1 || { sudo apt-get update -qq && sudo apt-get install -y -qq python3; }
+
+      - name: Render PROJECT_TREE.md from tracked files
+        run: |
+          set -euo pipefail
+          mkdir -p _sync
+          {
+            printf '# %s — Project Tree\n\n' "${TREE_TITLE}"
+            printf '> **Auto-generated.** This file is maintained by the `sync-project-tree` CI workflow in\n'
+            printf '> the [`%s`](https://%s/%s) repository, which\n' "${SELF_REPO}" "${GITEA_HOST}" "${SELF_REPO}"
+            printf '> opens a pull request here whenever the tracked file layout on `main` changes. Do not edit\n'
+            printf '> by hand — changes will be overwritten by the next sync.\n\n'
+            printf 'A snapshot of the tracked files in the repository (build output, dependencies, and other\n'
+            printf 'git-ignored paths are excluded).\n\n'
+            printf '```text\n'
+            git ls-files | python3 .gitea/scripts/gen_tree.py "${ROOT_LABEL}"
+            printf '```\n'
+          } > _sync/PROJECT_TREE.md
+          echo "----- generated ${DOCS_PATH} -----"
+          cat _sync/PROJECT_TREE.md
+
+      - name: Open or update the docs PR if the tree changed
+        env:
+          REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
+          REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+        run: |
+          set -euo pipefail
+          # Secrets can carry a trailing CR/LF depending on how they were pasted;
+          # strip line breaks before they land in a URL or Authorization header.
+          CI_USER="$(printf '%s' "${REGISTRY_USER}" | tr -d '\r\n')"
+          CI_TOKEN="$(printf '%s' "${REGISTRY_TOKEN}" | tr -d '\r\n')"
+          API="https://${GITEA_HOST}/api/v1/repos/${DOCS_REPO}"
+          REMOTE="https://${CI_USER}:${CI_TOKEN}@${GITEA_HOST}/${DOCS_REPO}.git"
+
+          git clone --depth 1 "${REMOTE}" docs_repo
+          cd docs_repo
+          git config user.name  "runic-docs-bot"
+          git config user.email "ci@whitlocktech.com"
+
+          mkdir -p "$(dirname "${DOCS_PATH}")"
+          cp ../_sync/PROJECT_TREE.md "${DOCS_PATH}"
+          git add "${DOCS_PATH}"
+          if git diff --cached --quiet; then
+            echo "PROJECT_TREE.md already up to date — nothing to sync."
+            exit 0
+          fi
+
+          SHORT_SHA="$(echo "${GITHUB_SHA:-local}" | cut -c1-7)"
+          git checkout -B "${PR_BRANCH}"
+          git commit -m "docs(tree): sync ${DOCS_PATH} from ${SELF_REPO}@${SHORT_SHA} [skip ci]"
+          git push --force "${REMOTE}" "HEAD:${PR_BRANCH}"
+
+          # Open a PR only if one isn't already open for this branch (a force-push
+          # to an existing open PR's head updates it in place).
+          OPEN="$(curl -sSf -H "Authorization: token ${CI_TOKEN}" \
+            "${API}/pulls?state=open&limit=50" \
+            | jq --arg b "${PR_BRANCH}" '[.[] | select(.head.ref == $b)] | length')"
+          if [ "${OPEN}" = "0" ]; then
+            curl -sSf -X POST "${API}/pulls" \
+              -H "Authorization: token ${CI_TOKEN}" \
+              -H "Content-Type: application/json" \
+              -d "$(jq -n \
+                    --arg head "${PR_BRANCH}" \
+                    --arg base "main" \
+                    --arg title "docs(tree): sync ${DOCS_PATH}" \
+                    --arg body "Automated project-tree sync from [\`${SELF_REPO}\`](https://${GITEA_HOST}/${SELF_REPO}), regenerated from tracked files on \`main\`. Merge once the layout looks right; the workflow will keep this branch current until then." \
+                    '{head: $head, base: $base, title: $title, body: $body}')" \
+              >/dev/null
+            echo "Opened a new docs PR for ${PR_BRANCH}."
+          else
+            echo "Existing open docs PR for ${PR_BRANCH} was updated via force-push."
+          fi

.gitignore

@@ -6,6 +6,10 @@ server/node_modules/
 # build output
 client/dist/
 
+# test coverage (generated in CI for SonarQube)
+server/coverage/
+coverage/
+
 # env / secrets
 .env
 *.env
@@ -31,5 +35,8 @@ Thumbs.db
 .vscode/
 .idea/
 
+# local planning docs (not part of the tracked codebase)
+.plans/
+
 # scratch / temp scripts
 _*.ps1

BACKEND_DESIGN.md

@@ -1,330 +0,0 @@
-# UOMysticmoon Website — Backend Design
-
-> Phase 1 of 3: **backend design** → Claude Design (frontend mockup) → coding.
-> This document is the contract the later phases build against.
-
-Public contact email: **UOMysticmoon@gmail.com**
-
----
-
-## 1. Stack & top-level decisions
-
-| Concern | Decision | Rationale |
-|---|---|---|
-| Runtime | Node.js + Express | serverlinkr pattern |
-| Database | MariaDB (own container) | spec; `mariadb` pool, parameterized SQL, no ORM (keeps the lightweight `model`/`db` split from serverlinkr) |
-| Auth | JWT in an **httpOnly cookie** | spec says "JWT auth" + "secure cookies when HTTPS"; httpOnly keeps the token out of JS (XSS-safe), `SameSite=Strict` covers CSRF for a same-origin admin panel |
-| Frontend | React + Vite, same repo, served by Express in prod | spec |
-| Hashing | bcrypt (`bcryptjs`) | spec; matches serverlinkr |
-| Deploy | Docker Compose (app + db) behind Pangolin | spec |
-
-**Adapting serverlinkr → this project**
-- `*.mongo.js` (mongoose) → `*.db.js` (MariaDB queries), exactly as the spec names them.
-- Drop the session/passport hybrid (`express-session`, `passport`, `passport-local`, `connect-mongo`). Pure stateless JWT instead — simpler and matches "JWT auth".
-- Routes grouped by **access level** (auth / public / admin) per spec, instead of serverlinkr's per-entity routers. Models stay grouped by **entity**.
-
----
-
-## 2. Folder structure
-
-Skeleton from the spec, with a small number of justified additions marked **(+)**.
-
-```
-server/
-  .env.example
-  package.json
-  db/
-    schema.sql                  (+) DDL, also auto-run by the MariaDB container
-    seed.js                     (+) seed wiki pages, default settings, first admin
-  src/
-    server.js                   bootstrap: ensure schema, then listen on 0.0.0.0
-    app.js                      express app + middleware wiring
-    router/
-      api.router.js             mounts /v1
-      v1/
-        v1.router.js            mounts /auth /public /admin
-        auth/    auth.routes.js    + auth.controller.js
-        public/  public.routes.js  + public.controller.js
-        admin/   admin.routes.js   + admin.controller.js
-    model/
-      users/     users.model.js    + users.db.js
-      posts/     posts.model.js     + posts.db.js     (news/five-on-friday/newsletter/screenshots)
-      wiki/      wiki.model.js      + wiki.db.js
-      settings/  settings.model.js  + settings.db.js
-      activity/  activity.model.js  + activity.db.js  (+) admin activity log
-    middleware/                 (+)
-      siteMode.js               LIVE/MAINTENANCE gate for public content
-      noindex.js                X-Robots-Tag: noindex,nofollow on admin
-      rateLimit.js              login limiter
-      validate.js               express-validator error handler
-    utils/
-      auth.js                   JWT sign/verify, isLoggedIn middleware
-      db.js                     MariaDB pool + ensureSchema()
-      mailer.js                 (+) nodemailer; mailto fallback if SMTP unset
-client/                         built in Phase 2/3 (React + Vite)
-Dockerfile
-docker-compose.yml
-.env.example
-.gitignore
-```
-
-**Why the additions:** the spec's feature list requires an activity log, a maintenance-mode
-gate, login rate limiting, admin `noindex`, and SMTP email — none fit cleanly in the four
-listed models/two utils. They're isolated in `middleware/` + one `activity` model +
-`utils/mailer.js`, and the spec explicitly says the layout is "expandable."
-
----
-
-## 3. Database schema (MariaDB)
-
-`utf8mb4` throughout. Created idempotently on boot (`ensureSchema()`) **and** shipped as
-`db/schema.sql` for the container's `/docker-entrypoint-initdb.d`.
-
-### users
-| col | type | notes |
-|---|---|---|
-| id | INT PK AUTO_INCREMENT | |
-| username | VARCHAR(32) UNIQUE NOT NULL | |
-| password_hash | VARCHAR(72) NOT NULL | bcrypt; **never** returned by the API |
-| role | ENUM('admin','editor') NOT NULL DEFAULT 'admin' | room to grow |
-| created_at | DATETIME DEFAULT CURRENT_TIMESTAMP | |
-| last_login_at | DATETIME NULL | shown in user management |
-
-### posts  — one table, four categories
-| col | type | notes |
-|---|---|---|
-| id | INT PK AUTO_INCREMENT | |
-| category | ENUM('news','five_on_friday','newsletter','screenshot') NOT NULL | |
-| title | VARCHAR(200) NOT NULL | |
-| slug | VARCHAR(220) NULL | optional clean URL |
-| excerpt | VARCHAR(400) NULL | list teaser |
-| body | MEDIUMTEXT NULL | markdown/HTML; main text for news/5oF/newsletter |
-| image_url | VARCHAR(500) NULL | required for `screenshot`, optional hero elsewhere |
-| published | TINYINT(1) NOT NULL DEFAULT 0 | publish/unpublish toggle |
-| author_id | INT NULL FK→users(id) | ON DELETE SET NULL |
-| created_at | DATETIME DEFAULT CURRENT_TIMESTAMP | |
-| updated_at | DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP | |
-| published_at | DATETIME NULL | set when first published; list order |
-
-Index: `(category, published, published_at DESC)`.
-
-### wiki_pages
-| col | type | notes |
-|---|---|---|
-| id | INT PK AUTO_INCREMENT | |
-| slug | VARCHAR(120) UNIQUE NOT NULL | e.g. `new-player-guide` |
-| title | VARCHAR(200) NOT NULL | |
-| body | MEDIUMTEXT NULL | markdown/HTML |
-| updated_by | INT NULL FK→users(id) | |
-| created_at / updated_at | DATETIME | |
-
-Seeded with the 8 spec categories: `new-player-guide, maps-atlas, systems, items, monsters, crafting, lore, rules`.
-
-### settings  — key/value, expandable
-| col | type | notes |
-|---|---|---|
-| `key` | VARCHAR(64) PK | |
-| value | TEXT NULL | |
-| updated_by | INT NULL FK→users(id) | |
-| updated_at | DATETIME ON UPDATE CURRENT_TIMESTAMP | |
-
-Seeded keys: `site_mode` (default `maintenance`), `site_mode_changed_at`,
-`site_mode_changed_by`, `maintenance_message`, `status_message`, `homepage_teaser`,
-`contact_email` (=UOMysticmoon@gmail.com), `site_title`.
-
-### activity_log  — append-only
-| col | type | notes |
-|---|---|---|
-| id | INT PK AUTO_INCREMENT | |
-| user_id | INT NULL FK→users(id) | |
-| action | VARCHAR(64) NOT NULL | e.g. `auth.login`, `site_mode.change`, `post.create` |
-| detail | TEXT NULL | JSON string of what changed |
-| ip | VARCHAR(45) NULL | from `req.ip` (needs `trust proxy`) |
-| created_at | DATETIME DEFAULT CURRENT_TIMESTAMP | |
-
----
-
-## 4. API contract
-
-Base path `/api/v1`. JSON in/out. Auth via httpOnly cookie (`isLoggedIn` reads it; also
-accepts `Authorization: Bearer` for API testing).
-
-### /auth  (auth.routes.js → auth.controller.js)
-| Method | Path | Auth | Body | Purpose |
-|---|---|---|---|---|
-| POST | `/login` | — (rate-limited) | `{username,password}` | verify, set cookie, log `auth.login`, update `last_login_at` |
-| POST | `/logout` | cookie | — | clear cookie |
-| GET | `/me` | cookie | — | current user (no hash) or 401 — client bootstraps auth state |
-
-No public `register`. First admin is bootstrapped by `seed.js` from env (see §6). Further
-admins are created under `/admin/users`.
-
-### /public  (public.routes.js → public.controller.js) — all GET, no auth
-| Method | Path | Notes |
-|---|---|---|
-| GET | `/settings` | whitelisted public keys only (mode, maintenance_message, status_message, homepage_teaser, contact_email, site_title) |
-| GET | `/status` | status message + current mode |
-| GET | `/posts/:category` | published only; `category` ∈ news\|five-on-friday\|newsletter\|screenshots |
-| GET | `/posts/:category/:idOrSlug` | single published post |
-| GET | `/wiki` | list of pages (slug + title) |
-| GET | `/wiki/:slug` | single page |
-| POST | `/contact` | (rate-limited) send mail via SMTP; if unconfigured, respond `{fallback:"mailto", email}` |
-
-Public content GETs pass through the **siteMode** gate (§5).
-
-### /admin  (admin.routes.js → admin.controller.js) — all behind `isLoggedIn` + `noindex`
-| Method | Path | Purpose |
-|---|---|---|
-| GET | `/dashboard` | current mode, last change time + who, content counts, recent activity |
-| PUT | `/site-mode` | `{mode}` → update settings, stamp who/when, log `site_mode.change` |
-| GET | `/posts?category=` | all posts incl. unpublished |
-| POST | `/posts` | create |
-| GET | `/posts/:id` | one |
-| PUT | `/posts/:id` | edit |
-| DELETE | `/posts/:id` | delete |
-| PATCH | `/posts/:id/publish` | `{published}` toggle (sets `published_at`) |
-| POST | `/posts/upload` | multipart image upload (multer) → `{image_url}` for screenshots |
-| GET | `/wiki` · GET `/wiki/:slug` | read incl. unpublished |
-| POST | `/wiki` · PUT `/wiki/:slug` · DELETE `/wiki/:slug` | manage pages |
-| GET | `/settings` · PUT `/settings` | read all / update `{key:value,...}` |
-| GET | `/activity?limit=&offset=` | paginated activity log |
-| GET | `/users` · POST `/users` · PUT `/users/:id` · DELETE `/users/:id` | user mgmt (can't delete self / last admin; password hashed on write) |
-
-Every admin write logs to `activity_log`.
-
----
-
-## 5. Site mode (LIVE / MAINTENANCE)
-
-State in `settings.site_mode` (`live`|`maintenance`), default **maintenance**.
-
-`middleware/siteMode.js`, applied only to **public content** routes:
-- `live` → pass through.
-- `maintenance` → respond **503** with `{mode:"maintenance", message}` **unless** the request
-  carries a valid admin cookie (admin preview). This hides content server-side, not just in
-  the UI.
-
-Always reachable regardless of mode: static assets / SPA shell, `/api/v1/auth/*`, all
-`/api/v1/admin/*`. So admin login + panel + the maintenance "coming soon" page always load.
-
-**Client behavior (Phase 3):** reads `GET /public/settings`; if `maintenance` and not an
-admin previewing, render the polished dark coming-soon page (message + contact email).
-Admin "preview live" simply hits the content APIs with the admin cookie, which bypass the gate.
-
-Dashboard reads `site_mode` + `site_mode_changed_at`/`_by` for "current mode + last change +
-who"; `activity_log` provides the history feed.
-
----
-
-## 6. Auth & security
-
-- **JWT** signed with `JWT_SECRET`, `expiresIn=JWT_EXPIRES_IN` (default `1d`); payload `{id,username,role}`.
-- **Cookie**: `httpOnly`, `sameSite=Lax`, `path=/`, and **`secure` decided per-request** (`COOKIE_SECURE=auto` → `secure: req.secure`). This is the key to dual access: the cookie is `Secure` when reached through Pangolin (HTTPS, `X-Forwarded-Proto: https`) but **not** `Secure` when reached directly over the LAN IP on plain HTTP — so login works in both. `COOKIE_SECURE=true|false` can force it. Requires `trust proxy` (below). `localhost:5173` (Vite) and `localhost:3000` are same-site, so the cookie flows in dev too.
-- **bcrypt** hashing (cost 10+); plaintext passwords never stored, logged, or returned.
-- **Rate limiting** (`express-rate-limit`) on `/auth/login` and `/public/contact`.
-- **Validation** (`express-validator`) on all writes; centralized error handler.
-- **helmet** with a CSP suited to the SPA (self + inline styles as needed; image sources for uploads/hero).
-- **Admin not indexed**: `X-Robots-Tag: noindex, nofollow` on `/api/v1/admin` and the admin SPA routes; `robots.txt` disallows `/admin`.
-- **No directory browsing** (express.static doesn't list; no `serve-index`).
-- **No hardcoded credentials**: first admin via `seed.js` reading `ADMIN_USERNAME`/`ADMIN_PASSWORD` from env (created only if no users exist); `.env` git-ignored, `.env.example` committed.
-- **`app.set('trust proxy', 1)`** so secure cookies, `req.ip`, and rate-limiting work behind Pangolin.
-- **CORS**: same-origin in prod (SPA served by Express). Dev only: allow `CLIENT_ORIGIN` (Vite, `http://localhost:5173`) with `credentials:true`.
-
----
-
-## 7. Email
-
-`utils/mailer.js` (nodemailer) configured from `SMTP_HOST/PORT/USER/PASS`, sending to
-`CONTACT_TO` (default UOMysticmoon@gmail.com). No Gmail password in code — env only.
-If SMTP is unconfigured, `POST /public/contact` returns `{fallback:"mailto", email}` so the
-client renders a `mailto:` link instead. Site mode changes / errors never leak SMTP creds.
-
----
-
-## 7.5 Logging & observability
-
-`utils/logger.js` — a small dependency-free logger with **two transports, console + file**,
-and four levels (`error`/`warn`/`info`/`debug`). Each line is timestamped and tagged by
-subsystem (`[server]`, `[http]`, `[db]`, `[auth]`, `[admin]`, `[ratelimit]`, …).
-
-- **Console**: color on a TTY, plain in Docker; verbosity = `LOG_LEVEL` (default `info`).
-- **File**: plain text appended to `LOG_DIR/LOG_FILE` (default `<server>/logs/app.log`,
-  `/app/logs/app.log` in Docker, bind-mounted to `./logs`); verbosity = `FILE_LOG_LEVEL`
-  (default `debug`, so the file keeps a complete record while the console stays readable).
-  Toggle with `LOG_TO_FILE`. The stream is flushed on graceful shutdown.
-- **HTTP access logs** via morgan piped into the logger: real client IP (`trust proxy`),
-  authenticated admin username, method, URL, status, response time, size.
-- **Captured events**: startup config banner, schema/seed steps, login success/failure,
-  rate-limit hits, site-mode changes, maintenance-gate blocks (debug), all errors with
-  stack traces (5xx), and SIGINT/SIGTERM shutdown. Passwords and request bodies are never
-  logged. `unhandledRejection`/`uncaughtException` are caught and logged.
-
-## 8. Deployment
-
-**docker-compose.yml** — two services on a private network:
-- `db`: `mariadb:11`, env `MARIADB_DATABASE/USER/PASSWORD/ROOT_PASSWORD`, volume
-  `dbdata:/var/lib/mysql`, mounts `schema.sql` into `/docker-entrypoint-initdb.d`, healthcheck.
-- `app`: builds the Dockerfile (installs client+server, builds Vite, serves via Express),
-  `env_file: .env`, `DB_HOST=db`, `depends_on: db (healthy)`, volume `uploads:/app/uploads`,
-  `ports: "3000:3000"` — **binds 0.0.0.0** (no `127.0.0.1:` prefix) so Pangolin reaches it.
-- Volumes: `dbdata`, `uploads`.
-
-Express listens on `0.0.0.0:${PORT||3000}`. Pangolin terminates TLS and proxies to `app`.
-
-**.env.example** (committed; real `.env` ignored):
-```
-NODE_ENV=production
-PORT=3000
-DB_HOST=db
-DB_PORT=3306
-DB_NAME=uomysticmoon
-DB_USER=uomm
-DB_PASSWORD=
-DB_ROOT_PASSWORD=
-JWT_SECRET=
-JWT_EXPIRES_IN=1d
-COOKIE_SECURE=true
-COOKIE_NAME=uomm_token
-ADMIN_USERNAME=
-ADMIN_PASSWORD=
-SMTP_HOST=
-SMTP_PORT=587
-SMTP_USER=
-SMTP_PASS=
-CONTACT_TO=UOMysticmoon@gmail.com
-CLIENT_ORIGIN=http://localhost:5173
-```
-
-`.gitignore`: `node_modules/`, `.env`, `_reference/`, `client/dist/`, `uploads/`.
-
----
-
-## 9. Dependencies (server)
-
-`express, cors, helmet, morgan, dotenv, mariadb, jsonwebtoken, bcryptjs, cookie-parser,
-express-rate-limit, express-validator, multer, nodemailer` · dev: `nodemon`.
-Removed vs serverlinkr: `mongoose, mongodb, connect-mongo, express-session, passport,
-passport-local`.
-
----
-
-## 10. Spec coverage
-
-| Spec requirement | Covered by |
-|---|---|
-| Public pages (`/`, `/site/*`, `/wiki/*`) | `/public/*` API + Phase-3 SPA routes; content from `posts`/`wiki`/`settings` |
-| News / 5-on-Friday / Newsletter / Screenshots | `posts` table, `category` column; admin CRUD + publish |
-| Wiki 8 categories, editable later | `wiki_pages` seeded with 8 slugs; admin CRUD |
-| Status page | `settings.status_message` + mode via `/public/status` |
-| Admin dashboard (mode, last change, who) | `/admin/dashboard` + settings stamps + activity log |
-| Site mode toggle | `PUT /admin/site-mode` + `siteMode` middleware |
-| Admin activity log | `activity_log` + `/admin/activity` |
-| Admin user management | `/admin/users` CRUD |
-| Site settings editing | `/admin/settings` |
-| JWT, bcrypt, rate limit, secure cookies, noindex, no dir browsing, no hardcoded creds, .env | §6 |
-| Maintenance page, admin always in, static always loads, admin preview | §5 |
-| SMTP via env, mailto fallback | §7 |
-| Docker Compose + MariaDB + Pangolin, 0.0.0.0 bind | §8 |
-| Design tokens / hero | reused from existing `assets/css/mysticmoon.css` + hero PNG in Phase 2/3 |
-| Expandable | key/value settings, role enum, modular routers/models |
-```

CODE_OF_CONDUCT.md

@@ -0,0 +1,133 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+**whitlocktech@gmail.com**.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

CONTRIBUTING.md

@@ -0,0 +1,100 @@
+# Contributing to Runic Gateway — Website
+
+Thanks for your interest in contributing! This repo is the full-stack website
+(Node.js + Express API, MariaDB, React + Vite SPA). This guide covers how to get
+set up, the workflow we follow, and the rules for contributions.
+
+By participating you agree to abide by our
+[Code of Conduct](CODE_OF_CONDUCT.md).
+
+## Ways to contribute
+
+- **Report a bug** or **request a feature** through the
+  [issue tracker](https://gitea.whitlocktech.com/RunicGateway/website/issues)
+  (issue templates are provided).
+- **Improve the code or docs** by opening a pull request (see below).
+- **Never** report a security vulnerability in a public issue — see
+  [SECURITY.md](SECURITY.md).
+
+## Development setup
+
+**Prerequisites:** Node.js 20+ and npm, plus Docker (for MariaDB).
+
+The [README](README.md) has the full setup guide. The short version for local
+development with hot reload:
+
+```bash
+# 1. Start a MariaDB the backend can reach
+docker run -d --name rg-db -p 3306:3306 \
+  -e MARIADB_DATABASE=runic_gateway -e MARIADB_USER=runic \
+  -e MARIADB_PASSWORD=devpass -e MARIADB_ROOT_PASSWORD=rootpass mariadb:11
+
+# 2. Backend (terminal 1)
+cp server/.env.example server/.env   # set DB_* , JWT_SECRET, ADMIN_USERNAME/PASSWORD
+npm run install-all
+npm run server                       # nodemon -> http://localhost:3000
+
+# 3. Frontend (terminal 2)
+npm run client                       # Vite -> http://localhost:5173
+```
+
+Develop against **http://localhost:5173** (the Vite dev server proxies `/api`).
+
+### Tests & checks
+
+Please run the server test suite and make sure the client builds before opening
+a PR — these are the same checks CI runs on your PR:
+
+```bash
+npm test            # server tests
+npm run build       # client production build
+```
+
+If you add or change an API route, regenerate the Swagger spec
+(`cd server && npm run swagger`) and commit the updated
+`server/swagger/swagger-output.json`.
+
+The URL surface is also frozen by a generated manifest. If your change adds,
+removes or renames a route, regenerate it (`cd server && npm run routes:manifest`)
+and commit `server/routes.manifest.json` + `server/routes.guards.json` — CI fails
+otherwise. A non-empty diff in `routes.manifest.json` means you changed the API
+contract, so call it out in the PR description; a pure refactor must produce none.
+
+## Branch & PR workflow
+
+1. Fork or branch from `main`. Use a descriptive branch name
+   (`feature/…`, `fix/…`, `docs/…`, `chore/…`).
+2. Keep changes focused; small PRs are easier to review.
+3. Push and open a pull request against `main`. Fill out the PR template,
+   including the **AI-assisted contributions** disclosure.
+4. Make sure PR checks (server tests + client build) are green.
+5. A maintainer will review; address feedback by pushing follow-up commits.
+
+### Commit messages
+
+We use [Conventional Commits](https://www.conventionalcommits.org/) —
+`type(scope): summary` (e.g. `feat(auth): add TOTP challenge step`,
+`fix(brand): link footer badge to Gitea org`). Common types: `feat`, `fix`,
+`docs`, `chore`, `refactor`, `test`, `ci`.
+
+## AI-assisted contributions (disclosure required)
+
+This project is developed openly with AI assistance, and we ask the same
+transparency of everyone. **If you used an AI tool** (Claude, Copilot, ChatGPT,
+Cursor, etc.) to help produce a contribution, you must disclose it:
+
+- Tick the AI-usage box in the pull-request template and name the tool(s).
+- Mark AI-authored commits with a trailer, e.g.
+  `Co-Authored-By: Claude <noreply@anthropic.com>` or `Assisted-By: <tool>`.
+- You remain responsible for every line you submit: review it, understand it,
+  and make sure it is correct and that you have the right to contribute it.
+
+Disclosed AI assistance is welcome. Undisclosed AI-generated contributions are
+not, and may be closed.
+
+## License
+
+Runic Gateway is licensed under the **GNU General Public License v3.0 or later**
+(see [LICENSE.md](LICENSE.md)). By submitting a contribution you agree that it is
+licensed under the same terms (inbound = outbound) and that you have the right to
+contribute it.

CONTRIBUTORS.md

@@ -0,0 +1,31 @@
+# Contributors
+
+Runic Gateway is built and maintained by the people and tools listed here.
+Thank you to everyone who has contributed.
+
+## Maintainers
+
+- **whitlocktech** <whitlocktech@gmail.com> — project lead and maintainer
+
+## Contributors
+
+<!--
+  Add yourself here when your contribution is merged — alphabetical by name or
+  handle. One line each:
+
+  - **Name or handle** (optional link) — what you contributed
+-->
+
+- _Your name could be here — see [CONTRIBUTING.md](CONTRIBUTING.md)._
+
+## AI-assisted development
+
+Parts of Runic Gateway were developed with the assistance of AI coding tools,
+including **Claude** (Anthropic) via Claude Code. AI-assisted commits are
+attributed in their commit trailers (e.g. `Co-Authored-By: Claude ...`).
+
+In keeping with this project's transparency policy, **all contributors must
+disclose their use of AI tools** on any contribution — see the
+"AI-assisted contributions" section of [CONTRIBUTING.md](CONTRIBUTING.md).
+Disclosed AI assistance is welcome; undisclosed AI-generated contributions are
+not.

HERO_EDITOR.md

@@ -1,134 +0,0 @@
-# UOMysticmoon — Hero Canvas Editor Spec
-
-> Branch: **`hero-feature`**. Build contract for the WYSIWYG portal-hero editor.
-> Derived from the design doc *Hero Canvas Editor — Design Document*, **corrected
-> to match the current codebase** and with the open questions resolved.
-> Same workflow as the wiki upgrade: design → phased build → verify.
-
-## 1. Goal
-
-Let staff compose the portal hero (background image, overlay opacity, and floating
-elements — text, CTA buttons, moon, badge, image) in-browser, then preview and
-publish — no source edits. Layout persists as JSON in the existing `settings` table.
-
-## 2. Locked decisions
-
-| # | Decision |
-|---|---|
-| Scope | **Full v1** — background/overlay, all element types, drag/resize/z-order, draft→preview→publish (built in phases) |
-| CTA buttons | **First-class `buttons` element type** (independently positioned), not baked into a text block |
-| First run | **Pre-populate** the canvas with today's hero (headline, subtitle, teaser, CTAs) as editable elements so nothing changes visually until edited |
-| Drag | **Native Pointer Events** (mouse/touch/pen), zero dependencies |
-| Font size | Stored in **px** (fixed reference canvas) |
-| Image compression | **None** server-side; client warns when a file is > ~1 MB |
-| Preview | `?preview=1` renders the **draft** by reading it through the authenticated admin settings endpoint |
-| Other pages | Out of scope for v1 (design allows a per-page key later) |
-
-## 3. Corrections to the design doc (current-code reality)
-
-1. **Public settings is a whitelist, not `getAll()`.** `GET /api/v1/public/settings`
-   → `settings.getPublic()` → `PUBLIC_KEYS` in
-   [settings.model.js](server/src/model/settings/settings.model.js). The doc's
-   "no backend changes / picked up automatically" is wrong. **Fix:** add
-   `hero_layout` to `PUBLIC_KEYS` (one line). `hero_layout_draft` stays out
-   (admin-only) — which is why preview reads the draft via `api.admin.getSettings()`.
-2. **Moon is a reusable component** ([MoonDot.jsx](client/src/components/MoonDot.jsx),
-   props `size`/`glow`), used in logo/login/maintenance — not "only the header."
-   The `moon` element reuses it; it gains an optional `color`.
-3. **Route vs. nav live in different files.** `/admin/hero` route →
-   [App.jsx](client/src/App.jsx); sidebar link/title → `NAV`/`TITLES` in
-   [AdminLayout.jsx](client/src/routes/admin/AdminLayout.jsx).
-4. **Admin content area is `maxWidth: 1000px`** — the editor canvas renders
-   scaled-to-fit; percentage positions stay faithful.
-
-Everything else in the doc matches (hardcoded `HERO_BG` + CTAs + `homepage_teaser`
-in [Portal.jsx](client/src/routes/public/Portal.jsx); `updateSettings` accepts
-arbitrary keys; `/admin/uploads` exists; default hero asset present; TEXT settings
-columns — no schema change).
-
-## 4. Data model — no schema change
-
-Two `settings` keys (TEXT): `hero_layout` (live) and `hero_layout_draft` (admin).
-
-```jsonc
-{
-  "version": 1,
-  "background": { "image_url": null, "position_x": "left", "position_y": "center", "size": "cover" },
-  "overlay": { "opacity": 0.72 },
-  "elements": [
-    { "id": "uuid", "type": "text_block|buttons|moon|badge|image",
-      "x": 50, "y": 42, "z": 1, "anchor": "center", "props": { /* per type */ } }
-  ]
-}
-```
-
-Positions are **% of canvas** (reference width 1080, matching `.shell`), so the
-layout adapts across viewports without breakpoint data. `version` is validated
-(`=== 1`) before use; anything else falls back.
-
-### Element props
-
-| Type | Props |
-|---|---|
-| `text_block` | `lines: [{ text, tag(h1/h2/p/span), fontSize(px), color, weight }]`, `align` |
-| `buttons` | `items: [{ label, to, variant(primary/ghost) }]`, `align`, `gap` |
-| `moon` | `size`, `glow`, `color` |
-| `badge` | `text`, `bgColor`, `textColor`, `borderRadius` |
-| `image` | `src`, `width`(%), `alt` |
-
-## 5. Backend changes
-- **One line:** add `'hero_layout'` to `PUBLIC_KEYS`. No new routes/controllers —
-  layout saves through the existing `PUT /admin/settings`; images via `/admin/uploads`.
-
-## 6. Frontend changes
-- **New** `client/src/components/HeroElement.jsx` — renders one element by type
-  (shared by the live portal and the editor canvas).
-- **New** `client/src/routes/admin/views/HeroEditor.jsx` — canvas + element tray +
-  properties panel; native-pointer drag/resize; background/overlay panel; snap grid;
-  auto-save draft, preview, publish, revert.
-- **Edit** [Portal.jsx](client/src/routes/public/Portal.jsx) — parse `hero_layout`
-  (or draft when `?preview=1` + admin), render elements, fall back to a
-  `DEFAULT_LAYOUT` built from today's hero so the page is unchanged until edited.
-- **Edit** [AdminLayout.jsx](client/src/routes/admin/AdminLayout.jsx) (nav) +
-  [App.jsx](client/src/App.jsx) (route `/admin/hero`).
-- **Edit** [MoonDot.jsx](client/src/components/MoonDot.jsx) — optional `color`.
-- **No** `client/src/api/client.js` changes needed beyond what exists
-  (`admin.updateSettings`, `admin.getSettings`, `admin.upload`).
-
-## 7. Phased build (each phase: build → verify in preview → commit)
-
-- **Phase 0 — Spec** ✅ this document.
-- **Phase 1 — Data path & renderer** ✅ (verified 2026-06-28). `hero_layout`
-  whitelisted; `HeroElement.jsx`; Portal renders the layout with a `DEFAULT_LAYOUT`
-  fallback. Default render matches the old hero; publishing a layout re-renders;
-  draft key not exposed publicly. Shared helpers moved to `client/src/lib/heroLayout.js`.
-- **Phase 2 — Editor shell + background/overlay** ✅ (verified 2026-06-28).
-  `/admin/hero` view + sidebar nav; canvas live-preview; background upload + 3×3
-  position + overlay opacity; debounced draft auto-save; publish; `?preview=1`
-  reads the draft (admin) with a banner; revert. Verified: overlay/position update
-  the canvas, auto-save writes the draft, publish writes live, preview shows the
-  draft while the normal portal shows live.
-- **Phase 3 — Elements: select / drag / text_block / buttons** ✅ (verified
-  2026-06-28). Element tray (+ Text / + Buttons); click-to-select with outline;
-  native Pointer Events drag (% of canvas); Delete key + panel delete; z-order
-  (send back / bring forward); text_block line editor (text/tag/size/color/bold,
-  add/remove lines, align) and buttons editor (label/path/variant, add/remove).
-  Verified: select shows the line editor, editing a line updates the canvas live,
-  drag moved 50%→65%, add→3/delete→2 elements, empty-canvas click deselects.
-- **Phase 4 — moon + badge + image + resize + snap grid** ✅ (verified 2026-06-28).
-  Tray adds moon/badge/image; property panels (moon: size/glow/color; badge:
-  text/colors/radius; image: upload/width/alt); corner resize handle (image→width%,
-  moon→size, text→box width); 8px snap-grid toggle with overlay; image placeholder
-  until a file is chosen. Verified: each type adds + edits, resize moved a moon
-  64→104px, snap grid shows, and a published moon+badge render on the live portal.
-
-**Status: v1 feature-complete.** All phases verified end-to-end; ready for PR.
-Deferred (noted in the design doc as follow-ups): 8-point resize (only a corner
-handle for now), per-viewport layouts, server-side image compression.
-
-## 8. Edge cases (from the doc, carried forward)
-- `JSON.parse` wrapped in try/catch + `version` check → fall back to `DEFAULT_LAYOUT`.
-- Element ids via `crypto.randomUUID()` (never array index).
-- Empty `elements` → render `DEFAULT_LAYOUT` so the hero is never blank.
-- Last-write-wins on concurrent admin edits (acceptable for this shard).
-- Client-side warning for background files > ~1 MB (no hard block; 8 MB server cap).

LICENSE.md

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,18 +1,31 @@
-# UOMysticmoon Website
+# Runic Gateway Website
 
-Public site, wiki, and protected admin panel for the **UOMysticmoon** private Ultima Online
-shard — a full-stack app in one repo:
+[![Bugs](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=bugs&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Code Smells](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=code_smells&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Duplicated Lines (%)](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=duplicated_lines_density&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Lines of Code](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=ncloc&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Security Hotspots](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=security_hotspots&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Security Rating](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=security_rating&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+[![Vulnerabilities](https://sonar.whitlocktech.com/api/project_badges/measure?project=runic-gateway-website&metric=vulnerabilities&token=sqb_d3593f26ac5663cd3e666039b7038f3248e8df50)](https://sonar.whitlocktech.com/dashboard?id=runic-gateway-website)
+
+Public site, wiki, and protected admin panel for a private Ultima Online shard — a
+full-stack app in one repo. Branding is instance-configurable via `BRAND_*` (see
+[Branding](#branding)); **UOMysticmoon** is the first instance.
+
+A full-stack app in one repo:
 
 - **Backend** — Node.js + Express REST API (layered `router → controller → model → db`), MariaDB, a provider-agnostic session layer (JWT cookie for web, bearer tokens for mobile, pluggable SSO).
 - **Frontend** — React + Vite single-page app (public site, wiki, and the admin panel), dark "gothic" theme (Cinzel + Georgia).
-- **Deploy** — Docker Compose (app + MariaDB) behind a Pangolin reverse proxy. Express serves the built SPA in production.
+- **Deploy** — Docker Compose (app + MariaDB) behind a reverse proxy (Pangolin, Nginx, Caddy, Traefik, …). Express serves the built SPA in production.
+- **Shard link** — a live bridge to the in-game ServUO shard through the **uo-link** sidecar ([RunicGateway/link](https://gitea.whitlocktech.com/RunicGateway/link)): the site ingests a live event feed and makes server-side REST calls to show shard status, economy, staff presence, IDOCs, live activity, and per-character sheets. See [Shard integration (uo-link)](#shard-integration-uo-link).
 
-The design reference is [BACKEND_DESIGN.md](BACKEND_DESIGN.md) (API contract, schema, security).
+The design reference is [BACKEND_DESIGN.md](https://gitea.whitlocktech.com/RunicGateway/docs/src/branch/main/website/BACKEND_DESIGN.md) (API contract, schema, security), in the [**RunicGateway/docs**](https://gitea.whitlocktech.com/RunicGateway/docs) repo — where all project documentation now lives.
 
 ---
 
 ## Contents
 
+- [Architecture](#architecture)
 - [Tech stack](#tech-stack)
 - [Project structure](#project-structure)
 - [Prerequisites](#prerequisites)
@@ -24,10 +37,107 @@ The design reference is [BACKEND_DESIGN.md](BACKEND_DESIGN.md) (API contract, sc
 - [Pages & routes](#pages--routes)
 - [API endpoints](#api-endpoints)
 - [API documentation (Swagger)](#api-documentation-swagger)
+- [Shard integration (uo-link)](#shard-integration-uo-link)
 - [Environment variables](#environment-variables)
 - [Security](#security)
 - [Logging](#logging)
-- [Deployment behind Pangolin](#deployment-behind-pangolin)
+- [Deployment behind a reverse proxy](#deployment-behind-a-reverse-proxy)
+
+---
+
+## Architecture
+
+How the pieces fit together — the React SPA and native app talk to one Express backend
+(`router → controller → model → db`), which persists to MariaDB and bridges to the live
+game world only through the **uo-link** sidecar. The shard itself is never internet-facing.
+
+```mermaid
+flowchart TB
+    %% ---------- Clients ----------
+    subgraph clients["Clients"]
+        browser["Browser<br/>React + Vite SPA<br/>(public · wiki · admin)"]
+        mobile["Native mobile app<br/>(bearer tokens)"]
+    end
+
+    idp["SSO providers<br/>Google · Discord · custom OIDC"]
+    discord["Discord"]
+
+    %% ---------- Website (one repo) ----------
+    subgraph website["website/ &nbsp;— Node app (one repo)"]
+        direction TB
+
+        subgraph backend["server/ — Express backend"]
+            direction TB
+            mw["Middleware<br/>helmet · siteMode · noindex<br/>rateLimit · loginProtection · botScore · validate"]
+            router["Router /api/v1<br/>auth (web · mobile · sso) · public · admin"]
+            ctrl["Controllers"]
+            auth["Session layer (auth/)<br/>sessionService · JWT/cookie · bearer · SSO+PKCE"]
+            model["Models (.model + .db)<br/>raw parameterized SQL — no ORM"]
+            sse["SSE fan-out<br/>public stream (allowlist) · admin stream (sensitive)"]
+
+            subgraph shardutil["Shard integration (utils/)"]
+                ingest["shardIngest.js<br/>WS ingest dispatcher"]
+                restcli["uoLinkClient.js<br/>REST client (never throws)"]
+            end
+
+            secret["secretBox.js<br/>AES-256-GCM secrets at rest"]
+        end
+
+        bot["bot/<br/>Discord bot"]
+    end
+
+    db[("MariaDB<br/>users · posts · wiki · settings · activity<br/>mobileSessions · authProviders · userIdentities<br/>uoLinkConfig · shard_online/economy/houses/events")]
+
+    %% ---------- Shard side ----------
+    subgraph shardside["Game shard (never internet-facing)"]
+        direction TB
+        sidecar["uo-link sidecar<br/>(Rust) — the only bridge exposed"]
+        servuo["ServUO shard<br/>(C# plugin)"]
+    end
+
+    %% ---------- Edges ----------
+    browser <-->|"same-origin JSON + SSE (cookie)"| mw
+    mobile -->|"REST (bearer access/refresh)"| mw
+    browser -.->|"OAuth redirect + PKCE"| idp
+    auth -.->|"token exchange"| idp
+
+    mw --> router --> ctrl
+    ctrl --> auth
+    ctrl --> model
+    ctrl --> restcli
+    ctrl --> sse
+    auth --> model
+    model <--> db
+    auth -. reads/writes secrets .-> secret
+    restcli -. reads config/token .-> secret
+    ingest --> model
+    ingest --> sse
+    sse -->|"live events"| browser
+    bot -->|"messages"| discord
+    bot <--> db
+
+    restcli -->|"REST: /char /roster /economy /history · /link/confirm · /towncrier"| sidecar
+    sidecar -->|"WebSocket live event feed (bearer + X-UOLink-Version)"| ingest
+    servuo -->|"loopback TCP 127.0.0.1:7788<br/>newline-delimited JSON (shard dials out)"| sidecar
+
+    %% ---------- Styling ----------
+    classDef ext fill:#2d2233,stroke:#7a5c94,color:#e8dff0;
+    classDef store fill:#1f2d2a,stroke:#4c8c7d,color:#dff0ea;
+    classDef bridge fill:#2d2620,stroke:#94764c,color:#f0e6d8;
+    class idp,discord ext;
+    class db store;
+    class sidecar,servuo bridge;
+```
+
+- **One backend, layered.** Every request flows `middleware → router → controller → model → db`.
+  Web browsers authenticate with an httpOnly JWT cookie; the native app uses short-lived bearer
+  access tokens plus rotated refresh tokens; SSO (Google/Discord/OIDC) is link-only and PKCE-guarded.
+  All three surfaces produce the *same* session via the session layer.
+- **The shard is never reachable.** The ServUO shard *dials out* over loopback TCP to the uo-link
+  sidecar; only the sidecar is exposed, and only the backend talks to it. The REST client
+  (`uoLinkClient.js`) never throws, so the site degrades gracefully when the shard is down.
+- **Sensitive events stay private.** Ingested game events fan out to browsers over two SSE channels —
+  a public allowlist stream and an admin-only stream that adds staff audit / cheat / login events.
 
 ---
 
@@ -39,16 +149,16 @@ The design reference is [BACKEND_DESIGN.md](BACKEND_DESIGN.md) (API contract, sc
 | Auth | Session service over JWT: httpOnly cookie (web) + bearer access/refresh tokens (mobile), bcrypt hashing, optional TOTP 2FA (`speakeasy` + `qrcode`), pluggable OAuth2/OIDC SSO (built-in Google & Discord + generic) |
 | Database | MariaDB 11 (own container) |
 | Frontend | React 18, Vite 5, React Router 6 |
-| Email | Nodemailer (SMTP) with a `mailto:` fallback |
+| Email | Nodemailer via Gmail OAuth2 (configured in admin), with a `mailto:` fallback |
 | API docs | OpenAPI 3.0 via `swagger-autogen`, served with `swagger-ui-express` at `/api/docs` |
-| Deploy | Docker Compose, Pangolin reverse proxy |
+| Deploy | Docker Compose, any reverse proxy (Pangolin, Nginx, Caddy, Traefik, …) |
 
 ---
 
 ## Project structure
 
 ```
-UOMSITE/
+website/
 ├─ server/                     Express API
 │  ├─ src/
 │  │  ├─ server.js             bootstrap: ensure schema → seed → listen (0.0.0.0)
@@ -90,8 +200,10 @@ UOMSITE/
 
 ### Option A — Docker Compose (full stack)
 
-The simplest way to run everything. The image installs server deps, **builds the React client**,
-and Express serves it; MariaDB runs in its own container; tables + defaults + the first admin are
+`docker-compose.yml` is **production-shaped**: it *pulls* the prebuilt `app` and `bot` images from
+the Gitea container registry (published by `.gitea/workflows/build-images.yml` on every merge to
+`main`) — it never builds. Each image already bundles the server deps and the built React client,
+which Express serves. MariaDB runs in its own container; tables + defaults + the first admin are
 created automatically on first boot.
 
 ```bash
@@ -101,7 +213,9 @@ cp .env.example .env
 #   JWT_SECRET                      (a long random string)
 #   ADMIN_USERNAME, ADMIN_PASSWORD  (your first admin login)
 
-docker compose up -d --build
+docker compose pull && docker compose up -d          # IMAGE_TAG defaults to `latest`
+# pin a specific build (reproducible deploy / rollback):
+IMAGE_TAG=sha-042a151 docker compose pull && docker compose up -d
 ```
 
 - App: **http://localhost:3000** (binds `0.0.0.0`)
@@ -109,6 +223,16 @@ docker compose up -d --build
 - Logs: `docker compose logs -f app` (and `./logs/app.log` on the host)
 - Stop: `docker compose down` (add `-v` to also wipe the database + uploads volumes)
 
+**Build the images locally instead of pulling** (offline, or to test an unmerged change) — overlay
+the dev file, which adds `build:` back:
+
+```bash
+docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build
+```
+
+Keeping `build:` out of the base file means a production host can only ever pull — it can never
+accidentally build.
+
 ### Option B — Local development (hot reload)
 
 Run the API and the Vite dev server separately. The Vite server proxies `/api` and `/uploads`
@@ -117,14 +241,14 @@ to the backend, so the SPA stays same-origin (cookies work).
 **1. Start a MariaDB the backend can reach** (published on `localhost:3306`):
 
 ```bash
-docker run -d --name uomm-db -p 3306:3306 -e MARIADB_DATABASE=uomysticmoon -e MARIADB_USER=uomm -e MARIADB_PASSWORD=devpass -e MARIADB_ROOT_PASSWORD=rootpass mariadb:11
+docker run -d --name rg-db -p 3306:3306 -e MARIADB_DATABASE=runic_gateway -e MARIADB_USER=runic -e MARIADB_PASSWORD=devpass -e MARIADB_ROOT_PASSWORD=rootpass mariadb:11
 ```
 
 **2. Configure + start the backend** (terminal 1):
 
 ```bash
 cp server/.env.example server/.env
-# Set DB_HOST=127.0.0.1, DB_PORT=3306, DB_USER=uomm, DB_PASSWORD=devpass,
+# Set DB_HOST=127.0.0.1, DB_PORT=3306, DB_USER=runic, DB_PASSWORD=devpass,
 #     JWT_SECRET=<anything>, ADMIN_USERNAME=admin, ADMIN_PASSWORD=<your password>
 npm run install-server
 npm run server          # nodemon → http://localhost:3000
@@ -207,10 +331,13 @@ npm start               # node server → serves API + SPA at http://localhost:3
 | SSO | `/api/v1/auth` (`providers` — public discovery; `sso/:provider/start`, `sso/:provider/link`, `sso/:provider/callback`) | redirect flow |
 | Public | `/api/v1/public` (`settings`, `status`, `posts/:category`, `posts/:category/:idOrSlug`, `wiki`, `wiki/:slug`, `contact`) | none |
 | Admin | `/api/v1/admin` (`dashboard`, `site-mode`, `posts`, `posts/upload`, `wiki`, `settings`, `activity`, `bot-activity`, `bot-activity/unban`, `auth/providers` (CRUD), `users`, `account`, `account/totp/*`, `account/identities`) | cookie (admin) |
+| Public · Shard | `/api/v1/public/shard` (`status`, `feed`, `economy`, `online`, `idoc`, `stream`) | none |
+| Player · Shard | `/api/v1/player/shard` (`link`, `accounts`, `roster/:account`, `vendors/:account`, `char/:serial`, `sales`) | cookie/bearer (player) |
+| Admin · Shard | `/api/v1/admin/shard` (self linking, same as player) · `/api/v1/admin/uo-link` (`config`, `towncrier`, `stream`) | cookie (staff / admin) |
 
 Post categories (URL form): `news`, `five-on-friday`, `newsletter`, `screenshots`.
 `authMethod` on a session ∈ `local · totp · mobile · google · discord · oidc`.
-See [BACKEND_DESIGN.md](BACKEND_DESIGN.md) §4 for the full contract, or the interactive Swagger
+See [BACKEND_DESIGN.md](https://gitea.whitlocktech.com/RunicGateway/docs/src/branch/main/website/BACKEND_DESIGN.md) §4 for the full contract, or the interactive Swagger
 docs below for a per-endpoint reference (parameters, request bodies, response codes).
 
 ---
@@ -230,7 +357,7 @@ actually returns (`400` validation, `401`/`403` auth, `404`, `409` conflicts, `4
 
 **Authentication in the UI** — click **Authorize** and provide either:
 
-- `cookieAuth` — the `uomm_token` session cookie (set automatically in the browser after
+- `cookieAuth` — the session cookie (name `rg_token`, configurable via `COOKIE_NAME`; set automatically in the browser after
   `POST /api/v1/auth/login`), or
 - `bearerAuth` — a mobile access token from `POST /api/v1/auth/mobile/login` (sent as
   `Authorization: Bearer <token>`).
@@ -249,6 +376,103 @@ npm run swagger        # → server/swagger/swagger-output.json
 If the generated spec is missing, the server logs a warning and simply disables `/api/docs` (it does
 not crash).
 
+### The route manifest (frozen URL surface)
+
+`server/routes.manifest.json` is a generated, sorted `{ method, path }` list of every route the two
+Express listeners actually expose. It is **not** documentation — it is the machine-checkable freeze of
+the URL surface, so that carving the router files up by business capability
+(`docs/website/API_V2_PLAN.md`) can be proved to move no URL instead of merely claiming it.
+
+```bash
+cd server
+npm run routes:manifest             # → routes.manifest.json + routes.guards.json
+npm run routes:manifest -- --check  # exit 1 if either file is stale (what CI runs)
+```
+
+The generator walks the live Express stack (runtime introspection, not source parsing — a route's path
+sits on the line *after* `router.get(`, which defeats greps) and keeps only
+`/api/**` and `/.well-known/**` plus the internal listener. The SPA catch-all, `/uploads` and `/brand`
+are filesystem-conditional static mounts, not API contract, so they are excluded and the output does
+not depend on whether the client has been built.
+
+Two generated files, two very different meanings:
+
+| File | Meaning of a diff |
+|---|---|
+| `routes.manifest.json` | **Contract change.** A URL moved. Justify it in the PR description; never let one ride along in a "mechanical" refactor. |
+| `routes.guards.json` | **Review aid.** Per route: handler count + the *named* middleware on its mount chain. Names are a hint only — `requireRole(...)` returns an anonymous arrow and cannot be seen — but a vanished `requireAuth` is unambiguous. |
+
+Unlike the Swagger spec, the manifest is annotation-free: `swagger-output.json` documents intent (only
+annotated routes appear), the manifest records reality.
+
+---
+
+## Shard integration (uo-link)
+
+The site is wired to the live in-game world through **uo-link**, a standalone sidecar service that
+runs next to the ServUO shard. Its source lives in a separate repo:
+**[RunicGateway/link](https://gitea.whitlocktech.com/RunicGateway/link)**. uo-link speaks the shard's internals and
+exposes a small, authenticated HTTP + WebSocket API; this website is a *client* of it. The shard
+itself is never exposed to the internet — only the sidecar is, and only the website's backend talks
+to it.
+
+### How it works
+
+```
+ServUO shard  ──▶  uo-link sidecar (RunicGateway/link)  ──▶  website backend  ──▶  browser
+                   REST + WebSocket, bearer-auth      ingest + REST         same-origin JSON/SSE
+```
+
+- **Connection is admin-managed, not env.** The sidecar's base URL, WebSocket URL, shared-secret
+  token, and protocol version are stored in the database (`uoLinkConfig`), edited from the
+  **Admin → Shard** panel. The token is **encrypted at rest** (AES-256-GCM) and is **write-only** in
+  the API — it is never returned to any client and never sent to the browser. Every call the backend
+  makes carries `Authorization: Bearer <token>` and an `X-UOLink-Version` header (a protocol
+  mismatch fails fast with `409` instead of being mis-parsed).
+- **Live ingest (WebSocket).** When enabled, the backend opens an outbound WebSocket to the sidecar
+  and receives a stream of game events — `mob.login`/`logout`, `char.vitals`, `economy.supply`,
+  `vendor.sale`, `player.death`/`murdered`, `house.decay` (IDOC), staff `audit.*`/`cheat.*`,
+  `link.request`, and `server.hello`/`shutdown`. A single dispatcher (`utils/shardIngest.js`) routes
+  each event: state-changing kinds update `shard_online` / `shard_economy` / `shard_houses`; notable
+  kinds are appended to an append-only `shard_events` log; high-frequency kinds (vitals, supply
+  ticks) only update state and are not logged. A changed boot id on `server.hello` is detected as a
+  restart and stale "online" rows are cleared. On reconnect the backend backfills missed events via
+  the sidecar's `/history`.
+- **Live round-trips (REST).** For point-in-time reads the backend calls the sidecar directly —
+  `/char/serial/:serial`, `/roster/:account`, `/vendors/:account`, `/economy`, `/history` — plus
+  commands `/link/confirm` and `/towncrier`. The REST client (`utils/uoLinkClient.js`) **never
+  throws**: every call returns `{ ok, data, status }`, so a shard that is down or mid-restart
+  degrades to a `503`/retry banner instead of a 500.
+- **Fan-out to the browser.** Ingested events are pushed to browsers over **Server-Sent Events**.
+  Two channels exist: a **public** stream carrying only a safe allowlist of kinds, and an
+  **admin-only** stream that also includes sensitive kinds (staff audit, cheat detection, login
+  attempts, IPs). Sensitive kinds can never leak onto the public channel.
+
+### Account linking
+
+A player (or staff member) proves ownership of a game account without sharing any game credentials:
+
+1. In game, the player runs **`[link`** and receives a one-time code.
+2. On the website (Player portal, or Admin → Account for staff) they enter the code.
+3. The backend confirms the code with the sidecar (`POST /link/confirm`), which permanently tags the
+   game account with the website user id, and mirrors the link locally in `shard_account_links`.
+
+That mirror is the authorization basis for character reads: roster/vendor/character-sheet endpoints
+are **ownership-checked** so a user only sees accounts they linked. **Admins may view any
+character**; players and editor/moderator staff are limited to their own linked accounts.
+
+### What each audience sees
+
+| Surface | Endpoints | Who | Data |
+|---|---|---|---|
+| **Public** | `/api/v1/public/shard/*` (`status`, `feed`, `economy`, `online`, `idoc`, `stream`) | anyone | Shard up/down, gold-supply series, IDOC houses, a curated live feed, and **"Staff online"** — only players whose account is linked to a **staff** user (admin/editor/moderator), shown with name + map location. Linked *players* are never listed publicly; no vitals or account are exposed. |
+| **Player** | `/api/v1/player/shard/*` (`link`, `accounts`, `roster/:account`, `vendors/:account`, `char/:serial`, `sales`) | logged-in player | Their own linked accounts: character rosters, character sheets, player-vendor snapshots, and recent vendor sales. |
+| **Admin** | `/api/v1/admin/shard/*` (self-linking, same as player) · `/api/v1/admin/uo-link/*` (`config`, `towncrier`, `stream`) | staff / admin | Staff link their own accounts like players; **admins** additionally read *any* character's data, edit the sidecar connection config, publish/remove **town-crier** messages, and subscribe to the full event stream (incl. audit/cheat). |
+
+The sidecar URL and token are set once in **Admin → Shard**; if uo-link is not configured (or the
+shard is offline), every shard surface degrades gracefully — the public page still renders, showing
+the shard as offline.
+
 ---
 
 ## Environment variables
@@ -261,26 +485,54 @@ Copy `.env.example` (Compose) or `server/.env.example` (local) and fill in. **`.
 | `PORT` | `3000` | server listens on `0.0.0.0:PORT` |
 | `UPLOAD_DIR` | `<server>/uploads` | where post images are written (`/app/uploads`, volume-mounted, in Compose) |
 | `DB_HOST` / `DB_PORT` | `db` / `3306` | `db` in Compose; `127.0.0.1` for local dev |
-| `DB_NAME` / `DB_USER` / `DB_PASSWORD` | `uomysticmoon` / `uomm` / — | app database credentials |
+| `DB_NAME` / `DB_USER` / `DB_PASSWORD` | `runic_gateway` / `runic` / — | app database credentials |
 | `DB_ROOT_PASSWORD` | — | MariaDB root (Compose only) |
 | `JWT_SECRET` | — | **required** — long random string; signs session, mobile, and SSO-flow tokens |
 | `JWT_EXPIRES_IN` | `1d` | web session token + cookie lifetime |
-| `COOKIE_SECURE` | `auto` | `auto` = Secure only over HTTPS (works on LAN HTTP + Pangolin HTTPS) |
-| `COOKIE_NAME` | `uomm_token` | |
+| `COOKIE_SECURE` | `auto` | `auto` = Secure only over HTTPS (works on LAN HTTP + proxy HTTPS) |
+| `COOKIE_NAME` | `rg_token` | changing it on a live instance invalidates existing sessions |
+| `BRAND_*` | Runic Gateway | instance branding (name, tagline, colors, logo/hero/favicon) — see [Branding](#branding) |
 | `SECRET_ENC_KEY` | — | **required in prod** — key for AES-256-GCM encryption of stored OAuth client secrets. Dev falls back to a key derived from `JWT_SECRET` (with a warning) |
 | `APP_BASE_URL` | — | public base URL, used to build the SSO OAuth `redirect_uri` (`${APP_BASE_URL}/api/v1/auth/sso/:provider/callback`). Set in prod to match what you register with Google/Discord; if unset it is derived from the request (fine for local dev) |
 | `MOBILE_ACCESS_TTL` | `15m` | mobile bearer **access** token lifetime (short-lived) |
 | `MOBILE_REFRESH_TTL_DAYS` | `30` | mobile **refresh** token lifetime (long-lived, rotated on use) |
 | `TRUST_PROXY` | `1` | reverse-proxy trust for correct `req.ip` / `req.secure` (rate limiting, backoff, bot-ban). Pin to the proxy hop's LAN IP in prod. A blanket `true` is rejected (coerced to `1`) to block `X-Forwarded-For` spoofing |
 | `DEBUG_TRUST_PROXY` | `0` | `1` logs raw peer address + `X-Forwarded-For` + resolved `req.ip` per request (to verify/refresh the proxy IP). Noisy — leave off |
-| `TOTP_ISSUER` | `UOMysticmoon` | label shown in authenticator apps for optional per-user 2FA |
+| `TOTP_ISSUER` | `BRAND_NAME` | label shown in authenticator apps for optional per-user 2FA |
 | `TOTP_CHALLENGE_TTL` | `5m` | lifetime of the short-lived post-password "awaiting code" step |
 | `ADMIN_USERNAME` / `ADMIN_PASSWORD` | — | first-admin bootstrap (first boot only) |
-| `SMTP_HOST` / `SMTP_PORT` / `SMTP_USER` / `SMTP_PASS` | — | optional; blank → contact form uses `mailto:` |
-| `CONTACT_TO` | `UOMysticmoon@gmail.com` | contact recipient |
+| _Email_ | — | configured in Admin → Settings → Email (Gmail OAuth2), not via env; recipient = `contact_email` setting |
 | `CLIENT_ORIGIN` | `http://localhost:5173` | enables CORS in dev only |
 | `LOG_LEVEL` / `FILE_LOG_LEVEL` | `info` / `debug` | console / file verbosity |
 | `LOG_TO_FILE` / `LOG_DIR` / `LOG_FILE` | `true` / `<server>/logs` / `app.log` | log file (bind-mounted to `./logs` in Docker) |
+| `ANNOUNCE_POLL_MS` | `15000` | how often the news-announcement dispatcher sweeps `announce_jobs` for due/retry legs (town crier + Discord) |
+| `TOWNCRIER_DURATION_SEC` | `3600` | how long a news post's in-game town-crier message stays up (≤ `86400`) |
+
+---
+
+## Branding
+
+Instance identity is data, not code — set via `BRAND_*` env vars, so one prebuilt
+image can run as any shard. With none set, everything renders as **Runic Gateway**.
+
+| Var | What |
+|---|---|
+| `BRAND_NAME` / `BRAND_SHORT_NAME` | display name (full / short-in-prose) |
+| `BRAND_TAGLINE` / `BRAND_DESCRIPTION` | tagline + meta/OG description |
+| `BRAND_CONTACT_EMAIL` / `BRAND_URL` | contact + canonical URL (for OG/absolute links) |
+| `BRAND_ACCENT_COLOR` | theme `--accent` (web) + Discord embed color |
+| `BRAND_LOGO` / `BRAND_HERO` / `BRAND_FAVICON` | image paths under the `/brand` mount, or absolute URLs |
+
+**How it flows:** text/colors reach the SPA at runtime through the public settings
+API (`SiteContext`), so no rebuild is needed; the server templates `index.html`
+`<title>`/meta/OG/favicon at boot; emails, TOTP issuer, and the Discord bot read
+`BRAND_*` directly. The admin-editable **site title** and **contact email**
+settings override `BRAND_NAME` / `BRAND_CONTACT_EMAIL` when set. Image assets are
+delivered from the `./brand` bind-mount (see `brand/README.md`).
+
+**UOMysticmoon** is the first instance — [`.env.uomysticmoon.example`](.env.uomysticmoon.example)
+holds the exact `BRAND_*` + infra (`DB_NAME`/`DB_USER`/`COOKIE_NAME`) pinning to
+run this repo as UOMysticmoon.
 
 ---
 
@@ -342,9 +594,10 @@ Copy `.env.example` (Compose) or `server/.env.example` (local) and fill in. **`.
 **Platform**
 
 - `helmet`, admin routes `noindex` + `robots.txt` disallow, `trust proxy` for correct client IPs
-  behind Pangolin (see `TRUST_PROXY`), first admin seeded from env (no hardcoded credentials),
-  `.env` git-ignored. Passwords and request bodies are never logged. SMTP is optional — the contact
-  form falls back to a `mailto:` link when unconfigured.
+  behind a reverse proxy (see `TRUST_PROXY`), first admin seeded from env (no hardcoded credentials),
+  `.env` git-ignored. Passwords and request bodies are never logged. Email sends through Gmail
+  OAuth2 configured in the admin (refresh token stored AES-GCM-encrypted, never in env); the
+  contact form falls back to a `mailto:` link when unconfigured.
 
 ---
 
@@ -368,10 +621,60 @@ bind-mounted to `./logs/app.log` and `docker compose logs -f app` shows the cons
 
 ---
 
-## Deployment behind Pangolin
+## Deployment behind a reverse proxy
 
 `docker compose up -d --build` exposes the `app` container on `0.0.0.0:3000` (no `127.0.0.1`
-binding) so Pangolin can reach it. Point a Pangolin resource at `app:3000`. Because `COOKIE_SECURE`
-defaults to `auto`, the admin login works both directly via the LAN IP over HTTP **and** through
-Pangolin over HTTPS — no config change needed. MariaDB stays on the private Compose network
-(no published port by default); data persists in the `dbdata` volume, uploads in `uploads`.
+binding) so a reverse proxy — Pangolin, Nginx, Caddy, Traefik, etc. — can reach it. Point the
+proxy at `app:3000` (or the host's `:3000` if the proxy runs outside Compose) and terminate TLS
+there. Because `COOKIE_SECURE` defaults to `auto`, the admin login works both directly via the
+LAN IP over HTTP **and** through the proxy over HTTPS — no config change needed. MariaDB stays on
+the private Compose network (no published port by default); data persists in the `dbdata` volume,
+uploads in `uploads`.
+
+Set `TRUST_PROXY` so Express reads the real client IP from the proxy's `X-Forwarded-For` header
+(see [Environment variables](#environment-variables)) — required for rate limiting, bot scoring,
+and correct logging. Forward the standard `X-Forwarded-For` and `X-Forwarded-Proto` headers from
+your proxy.
+
+Minimal proxy examples:
+
+```nginx
+# Nginx
+location / {
+    proxy_pass http://app:3000;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}
+```
+
+```caddy
+# Caddy — Caddyfile (automatic HTTPS; forwards X-Forwarded-* by default)
+your.domain {
+    reverse_proxy app:3000
+}
+```
+
+**Pangolin:** create a resource targeting `app:3000`; it forwards the required headers and
+terminates HTTPS out of the box, so no extra configuration is needed.
+
+---
+
+## License
+
+Runic Gateway is free software, licensed under the **GNU General Public License
+v3.0 or later** — see [LICENSE.md](LICENSE.md).
+
+    Copyright (C) 2026 Runic Gateway
+
+    This program is free software: you can redistribute it and/or modify it under
+    the terms of the GNU General Public License as published by the Free Software
+    Foundation, either version 3 of the License, or (at your option) any later
+    version. It is distributed WITHOUT ANY WARRANTY; without even the implied
+    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+    General Public License for more details.
+
+Contributions are welcome — please read [CONTRIBUTING.md](CONTRIBUTING.md) (note
+the **AI-usage disclosure** requirement) and our
+[Code of Conduct](CODE_OF_CONDUCT.md). Report vulnerabilities privately per
+[SECURITY.md](SECURITY.md).

SECURITY.md

@@ -0,0 +1,50 @@
+# Security Policy
+
+Thank you for helping keep Runic Gateway and its users safe.
+
+## Reporting a vulnerability
+
+**Please do not report security vulnerabilities through public issues, pull
+requests, or the wiki.** A public report tips off attackers before a fix is
+available.
+
+Instead, report privately by email to:
+
+**whitlocktech@gmail.com**
+
+Please include as much of the following as you can:
+
+- The repository and component affected.
+- The type of issue (e.g. authentication bypass, injection, secret exposure,
+  remote code execution, denial of service).
+- Step-by-step instructions to reproduce, and a proof-of-concept if you have one.
+- The impact — what an attacker could do with it.
+- Any suggested remediation.
+
+You will receive an acknowledgement of your report, typically within a few days.
+We will keep you informed as we investigate and work toward a fix, and we are
+happy to credit you in the release notes once the issue is resolved (let us know
+if you would prefer to remain anonymous).
+
+## Scope
+
+Runic Gateway is a self-hosted platform made up of several components:
+
+| Component | Repo | Network exposure |
+|---|---|---|
+| Website (site + admin + API) | `RunicGateway/website` | Internet-facing (behind a reverse proxy) |
+| uo-link sidecar | `RunicGateway/link` | The only network-facing part of the game bridge |
+| ServUO plugin | `RunicGateway/servuo-plugins` | Loopback only — dials the sidecar on `127.0.0.1` |
+| Documentation | `RunicGateway/docs` | Content only |
+
+Because instances are self-hosted, the security of any given deployment also
+depends on how it is configured and operated — strong secrets (`JWT_SECRET`,
+`SECRET_ENC_KEY`, database and admin passwords), a correctly configured reverse
+proxy and `TRUST_PROXY`, and keeping the shard itself unreachable from the
+internet (only the sidecar should be exposed). See each repo's README for the
+security model.
+
+## Supported versions
+
+This project is developed continuously and does not maintain long-term release
+branches. Security fixes land on `main`; please run a recent build.

WIKI_UPGRADE.md

@@ -1,366 +0,0 @@
-# UOMysticmoon Website — Wiki Upgrade Spec
-
-> Branch: **`wiki-upgrade`**. This document is the contract for upgrading the CMS
-> wiki from a flat single-table page store into a feature-complete wiki.
-> It follows the project workflow: **design (this doc) → build in phases → verify**.
->
-> Companion to [`BACKEND_DESIGN.md`](BACKEND_DESIGN.md); reuses its stack, auth,
-> logging, and Docker decisions unchanged.
-
----
-
-## 1. Goal & scope
-
-Turn the wiki into something that behaves like a typical wiki, while staying inside
-the existing Node/Express + MariaDB + React/Vite architecture and the **staff-only**
-auth model (admin/editor — no new roles, no public contributions).
-
-**In scope**
-
-| Feature | Summary |
-|---|---|
-| Rich-text editing | TipTap (ProseMirror) WYSIWYG in the admin; outputs HTML |
-| Sanitization | Server-side allowlist on save **and** client-side on render (fixes today's stored-XSS gap) |
-| Categories / sections | First-class `wiki_categories` table; replaces hardcoded frontend blurbs |
-| Drafts & publish | `published` + `published_at`, mirroring the `posts` pattern |
-| Tags | Many-to-many tags with filtering |
-| Internal links | `[[slug]]`-style links authored in the editor; red-link detection |
-| Backlinks | "Linked from" list, maintained on save |
-| Inline images | Reuse/generalize the existing multer upload for in-body images |
-| Search | MariaDB `FULLTEXT` over title + body |
-| Revision history | Per-save snapshots with view / diff / restore |
-
-**Out of scope (this branch)**
-
-- Public/player editing or suggestion workflow, moderation/review queues.
-- New roles or per-page ACLs (all staff with a login can edit all pages).
-- Real-time collaborative editing, comments/discussion pages, file attachments
-  other than images, page templates/transclusion, multilingual pages.
-
-**Decisions locked from planning**
-
-- Editor: **TipTap**, storing **HTML** (not Markdown, not JSON).
-- Search: **MariaDB FULLTEXT** (no new infrastructure).
-- Revision history and search are **included** (recommended additions beyond the
-  minimum requested set).
-- Authoring is **admin + editor** (`isLoggedIn`); no anonymous edits.
-
----
-
-## 2. Current state (baseline being replaced)
-
-| Layer | Today | File |
-|---|---|---|
-| Schema | flat `wiki_pages(slug,title,body,updated_by,timestamps)` | [server/db/schema.sql:31](server/db/schema.sql) |
-| Model | thin CRUD by slug | [server/src/model/wiki/wiki.db.js](server/src/model/wiki/wiki.db.js), [wiki.model.js](server/src/model/wiki/wiki.model.js) |
-| Public API | `GET /public/wiki`, `GET /public/wiki/:slug` | [public.controller.js:53](server/src/router/v1/public/public.controller.js) |
-| Admin API | `GET/POST/PUT/DELETE /admin/wiki[...]` | [admin.controller.js:163](server/src/router/v1/admin/admin.controller.js), [admin.routes.js:68](server/src/router/v1/admin/admin.routes.js) |
-| Public UI | card grid (hardcoded blurbs + Roman numerals), article w/ auto-TOC | [Wiki.jsx](client/src/routes/wiki/Wiki.jsx), [WikiArticle.jsx](client/src/routes/wiki/WikiArticle.jsx) |
-| Admin UI | raw-HTML `<textarea>` modal | [WikiAdmin.jsx](client/src/routes/admin/views/WikiAdmin.jsx), [WikiEditor.jsx](client/src/routes/admin/views/WikiEditor.jsx) |
-| API client | `api.wiki`, `api.admin.*Wiki` | [client/src/api/client.js:52](client/src/api/client.js) |
-
-**Known issues this upgrade resolves**
-
-- **Stored XSS**: body is raw HTML rendered with `dangerouslySetInnerHTML` and never
-  sanitized ([WikiArticle.jsx:91](client/src/routes/wiki/WikiArticle.jsx)).
-- Category blurbs and ordering are **faked in the component** ([Wiki.jsx:11](client/src/routes/wiki/Wiki.jsx)), not data.
-- No drafts (every save is instantly public), no history, no search, no tags, no links.
-
----
-
-## 3. Data model
-
-`utf8mb4`, InnoDB throughout. All changes are **additive and idempotent** so
-`ensureSchema()` upgrades existing databases on boot with no data loss. New columns
-are nullable or have safe defaults; **existing pages default to `published = 1`** so
-nothing disappears on deploy.
-
-### 3.1 `wiki_categories` (new)
-
-| col | type | notes |
-|---|---|---|
-| id | INT PK AI | |
-| slug | VARCHAR(120) UNIQUE NOT NULL | e.g. `guides` |
-| title | VARCHAR(200) NOT NULL | |
-| description | VARCHAR(400) NULL | card teaser on the wiki index |
-| sort_order | INT NOT NULL DEFAULT 0 | manual ordering |
-| created_at / updated_at | DATETIME | standard stamps |
-
-### 3.2 `wiki_pages` (altered)
-
-Add to the existing table:
-
-| col | type | notes |
-|---|---|---|
-| category_id | INT NULL FK→wiki_categories(id) ON DELETE SET NULL | |
-| excerpt | VARCHAR(400) NULL | card/search teaser (replaces hardcoded blurbs) |
-| published | TINYINT(1) NOT NULL DEFAULT 1 | draft/publish toggle |
-| published_at | DATETIME NULL | set on first publish |
-| sort_order | INT NOT NULL DEFAULT 0 | ordering within a category |
-| FULLTEXT idx_wiki_search (title, body) | | search |
-
-### 3.3 `wiki_tags` + `wiki_page_tags` (new)
-
-```
-wiki_tags( id PK, slug VARCHAR(120) UNIQUE, label VARCHAR(120) )
-wiki_page_tags( page_id FK→wiki_pages ON DELETE CASCADE,
-                tag_id  FK→wiki_tags  ON DELETE CASCADE,
-                PRIMARY KEY(page_id, tag_id) )
-```
-
-### 3.4 `wiki_links` (new) — backlinks index
-
-Rebuilt for a page on every save by parsing its body for internal links.
-
-| col | type | notes |
-|---|---|---|
-| source_page_id | INT FK→wiki_pages ON DELETE CASCADE | |
-| target_slug | VARCHAR(120) NOT NULL | may point at a not-yet-created page (red link) |
-| INDEX idx_wiki_links_target (target_slug) | | backlink lookups |
-
-Backlinks for page X = `SELECT source pages WHERE target_slug = X.slug AND source is published`.
-
-### 3.5 `wiki_revisions` (new) — history
-
-| col | type | notes |
-|---|---|---|
-| id | INT PK AI | |
-| page_id | INT FK→wiki_pages ON DELETE CASCADE | |
-| title / body / excerpt | snapshot of content at save time | |
-| category_id | INT NULL | snapshot |
-| editor_id | INT NULL FK→users(id) | who saved |
-| change_note | VARCHAR(280) NULL | optional summary |
-| created_at | DATETIME DEFAULT CURRENT_TIMESTAMP | |
-
-A revision is written **inside the same transaction** as each page create/update.
-
-### 3.6 Seed changes
-
-Rework [seed.js](server/db/seed.js): the current 8 hardcoded pages become **categories**
-(title + the blurb currently living in the frontend), each seeded idempotently via a new
-`seedDefaultCategory`. Existing seeded pages are migrated/attached where applicable.
-`seedDefault` for pages stays `INSERT IGNORE` so reseeding is safe.
-
----
-
-## 4. Backend changes
-
-Keep the `model` (entity) / `db` (SQL) split and the route grouping by access level.
-
-### 4.1 Models (`server/src/model/wiki/`)
-
-- `wiki.db.js` — add SQL for: category CRUD; page list with `category`, `published`,
-  `q` (FULLTEXT) filters and ordering; tag upsert + attach/detach; `wiki_links` rebuild;
-  revision insert/list/get; backlink query.
-- `wiki.model.js` — orchestration. On **create/update** (single transaction):
-  1. sanitize `body` with the allowlist (§6),
-  2. upsert the page,
-  3. insert a `wiki_revisions` snapshot,
-  4. parse body for internal links → rebuild `wiki_links` for the page,
-  5. sync tags.
-- A small `wiki.links.js` helper: parse internal links out of the saved HTML
-  (anchors written by the editor as `href="/wiki/<slug>"` / a `data-wiki-slug` attr),
-  return the set of target slugs.
-
-### 4.2 Public API (`/api/v1/public`)
-
-| Method | Path | Notes |
-|---|---|---|
-| GET | `/wiki/categories` | ordered categories with page counts |
-| GET | `/wiki?category=&tag=&q=` | **published only**; list/filter/search summaries |
-| GET | `/wiki/:slug` | page + category + tags + backlinks (published only) |
-
-Still passes through the `siteMode` maintenance gate like other public content.
-
-### 4.3 Admin API (`/api/v1/admin`, behind `isLoggedIn` + `noindex`)
-
-| Method | Path | Purpose |
-|---|---|---|
-| GET | `/wiki` | all pages incl. drafts (filters: category, tag, q, status) |
-| GET | `/wiki/:slug` | one page incl. draft, tags, category |
-| POST | `/wiki` | create (slug, title, body, excerpt, category_id, tags, published) |
-| PUT | `/wiki/:slug` | update (allows slug rename — see §7) |
-| PATCH | `/wiki/:slug/publish` | `{published}` toggle, stamps `published_at` |
-| DELETE | `/wiki/:slug` | delete (cascades revisions/links/tags) |
-| GET | `/wiki/:slug/revisions` | list snapshots |
-| GET | `/wiki/:slug/revisions/:id` | one snapshot (for diff/preview) |
-| POST | `/wiki/:slug/revisions/:id/restore` | restore (writes a new revision) |
-| GET/POST/PUT/DELETE | `/wiki/categories[...]` | category CRUD + reorder |
-| GET/POST | `/wiki/tags` | list/create tags |
-| POST | `/uploads` | generalized image upload (see §4.4) → `{url}` |
-
-Validation via `express-validator` (slug regex `^[a-z0-9-]+$`, title required, etc.),
-centralized error handler unchanged. **Every write logs to `activity_log`**
-(`wiki.create`, `wiki.update`, `wiki.publish`, `wiki.delete`, `wiki.revision.restore`,
-`wiki.category.*`) following the existing convention.
-
-### 4.4 Image uploads
-
-Generalize the existing screenshot upload (multer config in [admin.routes.js:17](server/src/router/v1/admin/admin.routes.js))
-into a shared `POST /admin/uploads` returning `{ url: "/uploads/<file>" }`, reused by both
-the post editor and the wiki editor. Same size/mime limits. No new storage —
-served from the existing `uploads/` volume.
-
----
-
-## 5. Frontend changes
-
-### 5.1 Admin
-
-- **`WikiEditor.jsx`** — replace the raw-HTML `<textarea>` with a **TipTap** editor:
-  bold/italic/headings (H2 for TOC)/lists/quote/code, link tool, **image insert**
-  (uploads via `/admin/uploads`), and an **internal-link picker** (`[[`-triggered
-  autocomplete over existing slugs; flags red links). Adds: category dropdown, tag
-  input (create-on-type), excerpt field, **Save draft / Publish** actions, and a
-  **History** tab (revision list → preview → diff → restore).
-- **`WikiAdmin.jsx`** — list gains status (draft/published), category column, and
-  filters; plus a **Categories** manager (CRUD + drag-to-reorder).
-
-### 5.2 Public
-
-- **`Wiki.jsx`** — fully data-driven: categories + real excerpts from the API
-  (delete the hardcoded `BLURBS`/`ROMAN` constants), a **search box**, optional
-  tag filter.
-- **`WikiArticle.jsx`** — keep auto-TOC; add category breadcrumb, tag chips, a
-  **"Linked from"** backlinks section, "last updated by", and **render via DOMPurify**
-  (`dangerouslySetInnerHTML` only after sanitize).
-
-### 5.3 API client & routes
-
-- Extend [client/src/api/client.js](client/src/api/client.js) with the new public/admin
-  wiki calls (categories, search params, revisions, tags, uploads).
-- Add a public search/category route if needed; admin categories view registered in
-  [App.jsx](client/src/App.jsx) under `/admin/wiki` (sub-tab, no new top-level route required).
-
-### 5.4 Dependencies (new)
-
-- **client**: `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-link`,
-  `@tiptap/extension-image` (+ a small diff lib for history, e.g. `diff`); `dompurify`.
-- **server**: `sanitize-html`.
-
-(The client currently ships only React + react-router, so this is the first feature
-dependency addition — keep the bundle lean, import only the extensions used.)
-
----
-
-## 6. Security
-
-- **Two-layer sanitization.** Server sanitizes on save with a strict `sanitize-html`
-  allowlist (headings, p, lists, blockquote, code/pre, a[href], img[src,alt],
-  strong/em, hr, table basics); strips scripts, event handlers, `javascript:` URLs,
-  styles. Client re-sanitizes with DOMPurify before render. The stored value is already
-  clean, so even direct DB edits or future API clients can't inject script.
-- **Upload safety** unchanged from posts: mime allowlist (png/jpe/gif/webp/avif),
-  8 MB cap, random filenames, served as static files (no execution).
-- **Authorization**: all mutating wiki/category/tag/upload routes stay behind
-  `isLoggedIn` (admin or editor). Public routes are read-only and published-only.
-- **No secrets/logging changes**; reuse existing rate-limit, helmet/CSP, noindex.
-  CSP `img-src` already covers `/uploads`.
-
----
-
-## 7. Migration & backward compatibility
-
-- Schema migration is additive; run by `ensureSchema()` on boot and shipped in
-  `schema.sql` for fresh containers. Use `ALTER TABLE ... ADD COLUMN IF NOT EXISTS`
-  / `ADD INDEX` guarded for idempotency (MariaDB 11 supports `IF NOT EXISTS`).
-- Existing pages: `published` backfills to `1`, `published_at` to `updated_at`,
-  `category_id` left NULL (surface as "Uncategorized" until assigned).
-- **Slug rename** (new capability): on `PUT` slug change, update the page slug and
-  best-effort rewrite known internal links pointing at the old slug; old slug is not
-  auto-redirected (acceptable for a staff-curated wiki) — note in release notes.
-- Public API response shape is **extended, not broken**: existing fields
-  (`slug`, `title`, `body`, `updated_at`) remain; new fields are additive, so the
-  current frontend keeps working between phases.
-
----
-
-## 8. Implementation process (phased)
-
-Each phase is a self-contained, shippable unit: build → run locally → verify in the
-browser preview → commit on `wiki-upgrade`. Open a PR into `main` at the end (or per
-phase if preferred). Do not merge a phase that hasn't been verified.
-
-### Phase 0 — Branch & scaffolding ✅ (this doc)
-- `wiki-upgrade` branch created; this spec committed.
-
-### Phase 1 — Foundation & safety (highest value) ✅
-- Schema: add `wiki_categories`, alter `wiki_pages` (category_id, excerpt, published,
-  published_at, sort_order, FULLTEXT), update `seed.js`.
-- Server: server-side sanitization on save; drafts/publish endpoints; categories CRUD;
-  public list filtered to published + categories endpoint.
-- Client: data-driven `Wiki.jsx` (remove hardcoded blurbs); DOMPurify render in
-  `WikiArticle.jsx`; draft/publish + category in the (still-textarea) admin editor.
-- **Exit check**: existing pages still render; XSS payload in body is neutralized;
-  draft pages hidden from the public list/article.
-- **Verified** (2026-06-27): schema migration ran clean on MariaDB 11; XSS payload
-  (`<script>`, `onerror=`, `javascript:`) stripped server-side; drafts return 404 on
-  the public API and are absent from the public list while visible in admin; public
-  index is data-driven (categories + sections); article shows category breadcrumb;
-  client builds and server boots with no errors.
-
-### Phase 2 — Authoring UX ✅
-- TipTap editor replaces the textarea; generalized `/admin/uploads`; inline images.
-- **Exit check**: create/edit a page with headings, a list, a link, and an inline
-  image; verify it renders sanitized on the public page.
-- **Verified** (2026-06-27): `/admin/uploads` returns `{url}` and the file serves as
-  an image; a page authored with H2/H3, lists, a link, and an uploaded inline image
-  round-trips through the WYSIWYG and renders sanitized publicly (link `rel` forced,
-  `<script>` stripped); a toolbar edit (insert divider) saved and persisted. TipTap
-  is code-split into its own chunk (lazy-loaded), keeping it off the public bundle.
-
-### Phase 3 — Connectivity ✅
-- Internal `[[slug]]` links + red-link detection; `wiki_links` rebuild on save;
-  backlinks on the article; tags + tag/category filtering.
-- **Exit check**: link page A→B, confirm B shows A under "Linked from"; tag filter works.
-- **Verified** (2026-06-27): internal links authored via an in-editor page picker
-  (links to `/wiki/<slug>`); A→B made B list A under "Linked from"; a link to a
-  non-existent page renders as a red link; removing the link on save cleared the
-  backlink (link index rebuilt). Tags upsert on save, filter via `?tag=` (chips +
-  flat index view), list with published counts, and orphan tags are auto-pruned.
-- Implementation note: links are plain anchors to `/wiki/<slug>` (the WYSIWYG fits
-  this better than `[[ ]]` syntax); the sanitizer also allows `data-wiki-slug`.
-
-### Phase 4 — Discovery & trust ✅
-- FULLTEXT search (public search box + admin filter); revision history list /
-  diff / restore.
-- **Exit check**: search returns expected pages; edit a page twice, diff the
-  revisions, restore an older one, confirm a new revision is recorded.
-- **Verified** (2026-06-27): `?q=` natural-language search matches on both body
-  (`recipes`→crafting) and title (`monsters`); the public search box and admin
-  filter both work. A page edited twice produced 3 revisions; the History modal
-  shows a word-level diff (added vs removed) of an old revision against current;
-  restoring reverted the page and appended a "Restored from revision #N" entry.
-
-### Verification (every phase)
-Use the preview workflow, not manual hand-off: start the dev server, exercise the
-public wiki and the admin editor, check console/network for errors, and capture a
-screenshot of the changed surface. Confirm `npm run` lint/build passes for the client
-and the server boots cleanly with `ensureSchema()` applying the migration.
-
----
-
-## 9. File-change map (reference)
-
-| Area | Files |
-|---|---|
-| Schema/seed | `server/db/schema.sql`, `server/db/seed.js`, `server/src/utils/db.js` (ensureSchema) |
-| Models | `server/src/model/wiki/wiki.db.js`, `wiki.model.js`, **new** `wiki.links.js` |
-| API | `server/src/router/v1/public/public.{routes,controller}.js`, `server/src/router/v1/admin/admin.{routes,controller}.js` |
-| Sanitize | **new** `server/src/utils/sanitizeHtml.js` |
-| Client API | `client/src/api/client.js` |
-| Public UI | `client/src/routes/wiki/Wiki.jsx`, `WikiArticle.jsx` |
-| Admin UI | `client/src/routes/admin/views/WikiAdmin.jsx`, `WikiEditor.jsx`, **new** category manager + revisions view |
-| Deps | `client/package.json`, `server/package.json` |
-
----
-
-## 10. Open questions / assumptions
-
-1. **Slug redirects**: assumed not needed on rename (staff wiki). Revisit if pages get
-   external inbound links.
-2. **Search ranking**: FULLTEXT natural-language mode assumed; can switch to BOOLEAN
-   mode if operators are wanted later.
-3. **Diff granularity**: line/word diff of the HTML source is assumed sufficient for
-   revision compare; a rendered visual diff is a later nice-to-have.
-4. **Editor scope**: tables and embeds beyond images are deferred unless requested.

bot/.env.example

@@ -1,4 +1,4 @@
-# ─── UOMysticmoon Discord bot — local dev environment ───
+# ─── Runic Gateway Discord bot — local dev environment ───
 # Copy to bot/.env for running `npm run dev` outside Docker.
 # (In Docker, the root .env / docker-compose provides these instead.)
 #
@@ -40,6 +40,6 @@ SITE_PUBLIC_URL=http://localhost:3000/api/v1/public
 # etc.) directly. Point this at the same DB the server/ uses.
 DB_HOST=127.0.0.1
 DB_PORT=3306
-DB_NAME=uomysticmoon
-DB_USER=uomm
+DB_NAME=runic_gateway
+DB_USER=runic
 DB_PASSWORD=change-me-db-password

bot/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "uomysticmoon-bot",
+  "name": "runic-gateway-bot",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "uomysticmoon-bot",
+      "name": "runic-gateway-bot",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {

bot/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "uomysticmoon-bot",
+  "name": "runic-gateway-bot",
   "version": "1.0.0",
-  "description": "Discord bot for the UOMysticmoon community server",
+  "description": "Discord bot for the Runic Gateway community server",
   "private": true,
   "main": "src/server.js",
   "scripts": {

bot/src/app.js

@@ -4,6 +4,9 @@ const internalRouter = require('./internal/internal.routes')
 
 const app = express()
 
+// Internal-only listener, but don't advertise the stack anyway (defense in depth).
+app.disable('x-powered-by')
+
 app.use(express.json())
 
 app.get('/health', (req, res) => res.json({ status: 'ok' }))

bot/src/bootstrap.js

@@ -4,11 +4,50 @@
 // container restart (crash, `docker compose restart`, host reboot) self-heals
 // without any admin-panel interaction. Node 20's built-in fetch is used; no
 // extra HTTP client dependency needed for a single startup call.
+//
+// The fetch RETRIES with backoff: on `docker compose up`, the bot and the app
+// start together and the bot's `depends_on: app` only waits for the container
+// to *start*, not for the app's internal server to be listening (it still has
+// to reach the DB and boot Express). Without retries the very first fetch loses
+// that race, bootstrap gives up, and the bot sits disconnected while the DB
+// still says enabled — the exact "enabled but disconnected until I toggle it"
+// bug. Retrying until the site answers makes a cold whole-stack start heal on
+// its own.
 const discordManager = require('./discord/discordManager')
 const createLogger = require('./utils/logger')
 
 const log = createLogger('bootstrap')
 
+const MAX_ATTEMPTS = 30 // ~30 tries * ~2s ≈ 1 min of patience for the app to come up
+const RETRY_DELAY_MS = 2000
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+// Fetch config from the site, retrying while the site is unreachable or not yet
+// ready (network error or 5xx). Returns the parsed config, or null if we gave
+// up after MAX_ATTEMPTS. A 4xx (e.g. bad internal key) is a real misconfig, not
+// a transient startup race, so we don't retry those.
+async function fetchConfig(siteUrl, key) {
+  for (let attempt = 1; attempt <= MAX_ATTEMPTS; attempt += 1) {
+    try {
+      const res = await fetch(siteUrl, { headers: { 'X-Internal-Key': key } })
+      if (res.ok) return await res.json()
+      if (res.status >= 400 && res.status < 500) {
+        log.error('boot-time config fetch rejected — not retrying', { status: res.status })
+        return null
+      }
+      log.warn('boot-time config fetch not ready — retrying', { status: res.status, attempt })
+    } catch (err) {
+      log.warn('boot-time config fetch errored — retrying', { message: err.message, attempt })
+    }
+    if (attempt < MAX_ATTEMPTS) await sleep(RETRY_DELAY_MS)
+  }
+  log.error('boot-time config fetch gave up after retries — staying disconnected until the admin panel pushes config', {
+    attempts: MAX_ATTEMPTS,
+  })
+  return null
+}
+
 async function bootstrap() {
   const siteUrl = process.env.SITE_INTERNAL_URL
   const key = process.env.BOT_INTERNAL_KEY
@@ -17,22 +56,19 @@ async function bootstrap() {
     return
   }
 
-  try {
-    const res = await fetch(siteUrl, { headers: { 'X-Internal-Key': key } })
-    if (!res.ok) {
-      log.error('boot-time config fetch failed', { status: res.status })
-      return
-    }
-    const config = await res.json()
+  const config = await fetchConfig(siteUrl, key)
+  if (!config) return
+
   if (config.enabled) {
     log.info('boot-time config says enabled — reconnecting', { guildId: config.guildId })
+    try {
       await discordManager.start({ token: config.token, guildId: config.guildId })
+    } catch (err) {
+      log.error('boot-time reconnect failed', { message: err.message })
+    }
   } else {
     log.info('boot-time config says disabled — staying disconnected')
   }
-  } catch (err) {
-    log.error('boot-time config fetch errored', { message: err.message })
-  }
 }
 
 module.exports = bootstrap

bot/src/brand.js

@@ -0,0 +1,13 @@
+// Branding for the Discord bot. Mirrors the server's BRAND_* scheme so embeds and
+// logs carry the instance identity. Kept minimal — the bot only needs the name
+// and the accent color (as an int for discord.js embeds).
+require('dotenv').config()
+
+const name = process.env.BRAND_NAME || 'Runic Gateway'
+const accentHex = process.env.BRAND_ACCENT_COLOR || '#7f99bd'
+const accentInt = (() => {
+  const n = parseInt(String(accentHex).replace('#', ''), 16)
+  return Number.isNaN(n) ? 0x7f99bd : n
+})()
+
+module.exports = { name, accentHex, accentInt }

bot/src/db.js

@@ -12,7 +12,7 @@ const pool = mariadb.createPool({
   port: Number(process.env.DB_PORT) || 3306,
   user: process.env.DB_USER || 'root',
   password: process.env.DB_PASSWORD || '',
-  database: process.env.DB_NAME || 'uomysticmoon',
+  database: process.env.DB_NAME || 'runic_gateway',
   connectionLimit: 5,
   insertIdAsNumber: true,
   bigIntAsNumber: true,

bot/src/discord/commands/invite.command.js

@@ -4,6 +4,46 @@ const guildConfig = require('../../model/guildConfig')
 const inviteLog = require('../../model/inviteLog')
 const inviteRotator = require('../../invites/inviteRotator')
 
+// Per-subcommand handlers, split out of execute() so the dispatch stays flat.
+async function handleChannel(interaction) {
+  const channel = interaction.options.getChannel('channel')
+  if (!channel) {
+    const currentId = await guildConfig.getInviteChannelId(interaction.guildId)
+    const content = currentId ? `Invites are created in <#${currentId}>.` : 'No invite channel is set yet.'
+    await interaction.reply({ content, ephemeral: true })
+    return
+  }
+  await guildConfig.setInviteChannelId(interaction.guildId, channel.id)
+  await interaction.reply({ content: `Invite channel set to ${channel}.`, ephemeral: true })
+}
+
+async function handleRotate(interaction) {
+  await interaction.deferReply({ ephemeral: true })
+  try {
+    const invite = await inviteRotator.rotate(interaction.client, interaction.guildId, {
+      triggeredBy: interaction.user.id,
+      triggeredByTag: interaction.user.tag,
+    })
+    await interaction.editReply({ content: `New invite: https://discord.gg/${invite.code}` })
+  } catch (err) {
+    await interaction.editReply({ content: `Couldn't rotate the invite: ${err.message}` })
+  }
+}
+
+async function handleLog(interaction) {
+  const rows = await inviteLog.list(interaction.guildId, 10)
+  if (rows.length === 0) {
+    await interaction.reply({ content: 'No invite rotations logged yet.', ephemeral: true })
+    return
+  }
+  const lines = rows.map((r) => {
+    const who = r.triggered_by_tag || 'automatic (scheduled)'
+    const status = r.revoked_at ? `revoked ${new Date(r.revoked_at).toLocaleString()}` : 'active'
+    return `\`${r.invite_code}\` — by ${who} on ${new Date(r.created_at).toLocaleString()} (${status})`
+  })
+  await interaction.reply({ content: lines.join('\n'), ephemeral: true })
+}
+
 module.exports = {
   data: {
     name: 'invite',
@@ -40,46 +80,8 @@ module.exports = {
   },
   async execute(interaction) {
     const sub = interaction.options.getSubcommand()
-
-    if (sub === 'channel') {
-      const channel = interaction.options.getChannel('channel')
-      if (!channel) {
-        const currentId = await guildConfig.getInviteChannelId(interaction.guildId)
-        const content = currentId ? `Invites are created in <#${currentId}>.` : 'No invite channel is set yet.'
-        await interaction.reply({ content, ephemeral: true })
-        return
-      }
-      await guildConfig.setInviteChannelId(interaction.guildId, channel.id)
-      await interaction.reply({ content: `Invite channel set to ${channel}.`, ephemeral: true })
-      return
-    }
-
-    if (sub === 'rotate') {
-      await interaction.deferReply({ ephemeral: true })
-      try {
-        const invite = await inviteRotator.rotate(interaction.client, interaction.guildId, {
-          triggeredBy: interaction.user.id,
-          triggeredByTag: interaction.user.tag,
-        })
-        await interaction.editReply({ content: `New invite: https://discord.gg/${invite.code}` })
-      } catch (err) {
-        await interaction.editReply({ content: `Couldn't rotate the invite: ${err.message}` })
-      }
-      return
-    }
-
-    if (sub === 'log') {
-      const rows = await inviteLog.list(interaction.guildId, 10)
-      if (rows.length === 0) {
-        await interaction.reply({ content: 'No invite rotations logged yet.', ephemeral: true })
-        return
-      }
-      const lines = rows.map((r) => {
-        const who = r.triggered_by_tag || 'automatic (scheduled)'
-        const status = r.revoked_at ? `revoked ${new Date(r.revoked_at).toLocaleString()}` : 'active'
-        return `\`${r.invite_code}\` — by ${who} on ${new Date(r.created_at).toLocaleString()} (${status})`
-      })
-      await interaction.reply({ content: lines.join('\n'), ephemeral: true })
-    }
+    if (sub === 'channel') return handleChannel(interaction)
+    if (sub === 'rotate') return handleRotate(interaction)
+    if (sub === 'log') return handleLog(interaction)
   },
 }

bot/src/discord/commands/rolemenu.command.js

@@ -9,6 +9,7 @@ const {
 } = require('discord.js')
 
 const roleMenus = require('../../model/roleMenus')
+const brand = require('../../brand')
 
 // Capped at 5 roles per menu — a single Discord action row holds at most 5
 // buttons, and one row keeps this a single simple slash command instead of
@@ -62,7 +63,7 @@ module.exports = {
       return
     }
 
-    const embed = new EmbedBuilder().setTitle(title).setColor(0x6a8fc2)
+    const embed = new EmbedBuilder().setTitle(title).setColor(brand.accentInt)
     if (description) embed.setDescription(description)
 
     const row = new ActionRowBuilder().addComponents(

bot/src/discord/commands/schedule.command.js

@@ -5,6 +5,72 @@ const scheduledMessages = require('../../model/scheduledMessages')
 const scheduler = require('../../scheduler/scheduler')
 const { parseDuration } = require('../../utils/duration')
 
+// Per-subcommand handlers, split out of execute() so the dispatch stays flat.
+async function handleRecurring(interaction) {
+  const channel = interaction.options.getChannel('channel', true)
+  const cronExpr = interaction.options.getString('cron', true)
+  const message = interaction.options.getString('message', true)
+  if (!cron.validate(cronExpr)) {
+    await interaction.reply({ content: `"${cronExpr}" isn't a valid cron expression.`, ephemeral: true })
+    return
+  }
+  const id = await scheduledMessages.addRecurring({
+    guildId: interaction.guildId,
+    channelId: channel.id,
+    content: message,
+    cronExpression: cronExpr,
+    createdBy: interaction.user.id,
+    createdByTag: interaction.user.tag,
+  })
+  await scheduler.refresh()
+  await interaction.reply({ content: `Scheduled recurring message #${id} in ${channel} on \`${cronExpr}\`.`, ephemeral: true })
+}
+
+async function handleOnce(interaction) {
+  const channel = interaction.options.getChannel('channel', true)
+  const inInput = interaction.options.getString('in', true)
+  const message = interaction.options.getString('message', true)
+  const ms = parseDuration(inInput)
+  if (!ms) {
+    await interaction.reply({ content: 'Invalid time — use a number plus s/m/h/d, e.g. `30m`, `2h`, `1d`.', ephemeral: true })
+    return
+  }
+  const runAt = new Date(Date.now() + ms)
+  const id = await scheduledMessages.addOnce({
+    guildId: interaction.guildId,
+    channelId: channel.id,
+    content: message,
+    runAt,
+    createdBy: interaction.user.id,
+    createdByTag: interaction.user.tag,
+  })
+  await interaction.reply({ content: `Scheduled one-off message #${id} in ${channel} for ${runAt.toLocaleString()}.`, ephemeral: true })
+}
+
+async function handleRemove(interaction) {
+  const id = interaction.options.getInteger('id', true)
+  const removed = await scheduledMessages.remove(interaction.guildId, id)
+  await scheduler.refresh()
+  await interaction.reply({ content: removed ? `Removed scheduled message #${id}.` : `No scheduled message #${id} found.`, ephemeral: true })
+}
+
+async function handleList(interaction) {
+  const rows = await scheduledMessages.list(interaction.guildId)
+  if (rows.length === 0) {
+    await interaction.reply({ content: 'No scheduled messages.', ephemeral: true })
+    return
+  }
+  const lines = rows.map((r) => {
+    let kind
+    if (r.cron_expression) kind = `cron \`${r.cron_expression}\``
+    else if (r.sent_at) kind = `sent ${new Date(r.sent_at).toLocaleString()}`
+    else kind = `due ${new Date(r.run_at).toLocaleString()}`
+    const suffix = r.enabled ? '' : ' (disabled)'
+    return `**#${r.id}** <#${r.channel_id}> — ${kind}${suffix}`
+  })
+  await interaction.reply({ content: lines.join('\n'), ephemeral: true })
+}
+
 module.exports = {
   data: {
     name: 'schedule',
@@ -47,73 +113,9 @@ module.exports = {
   },
   async execute(interaction) {
     const sub = interaction.options.getSubcommand()
-
-    if (sub === 'recurring') {
-      const channel = interaction.options.getChannel('channel', true)
-      const cronExpr = interaction.options.getString('cron', true)
-      const message = interaction.options.getString('message', true)
-      if (!cron.validate(cronExpr)) {
-        await interaction.reply({ content: `"${cronExpr}" isn't a valid cron expression.`, ephemeral: true })
-        return
-      }
-      const id = await scheduledMessages.addRecurring({
-        guildId: interaction.guildId,
-        channelId: channel.id,
-        content: message,
-        cronExpression: cronExpr,
-        createdBy: interaction.user.id,
-        createdByTag: interaction.user.tag,
-      })
-      await scheduler.refresh()
-      await interaction.reply({ content: `Scheduled recurring message #${id} in ${channel} on \`${cronExpr}\`.`, ephemeral: true })
-      return
-    }
-
-    if (sub === 'once') {
-      const channel = interaction.options.getChannel('channel', true)
-      const inInput = interaction.options.getString('in', true)
-      const message = interaction.options.getString('message', true)
-      const ms = parseDuration(inInput)
-      if (!ms) {
-        await interaction.reply({ content: 'Invalid time — use a number plus s/m/h/d, e.g. `30m`, `2h`, `1d`.', ephemeral: true })
-        return
-      }
-      const runAt = new Date(Date.now() + ms)
-      const id = await scheduledMessages.addOnce({
-        guildId: interaction.guildId,
-        channelId: channel.id,
-        content: message,
-        runAt,
-        createdBy: interaction.user.id,
-        createdByTag: interaction.user.tag,
-      })
-      await interaction.reply({ content: `Scheduled one-off message #${id} in ${channel} for ${runAt.toLocaleString()}.`, ephemeral: true })
-      return
-    }
-
-    if (sub === 'remove') {
-      const id = interaction.options.getInteger('id', true)
-      const removed = await scheduledMessages.remove(interaction.guildId, id)
-      await scheduler.refresh()
-      await interaction.reply({ content: removed ? `Removed scheduled message #${id}.` : `No scheduled message #${id} found.`, ephemeral: true })
-      return
-    }
-
-    if (sub === 'list') {
-      const rows = await scheduledMessages.list(interaction.guildId)
-      if (rows.length === 0) {
-        await interaction.reply({ content: 'No scheduled messages.', ephemeral: true })
-        return
-      }
-      const lines = rows.map((r) => {
-        const kind = r.cron_expression
-          ? `cron \`${r.cron_expression}\``
-          : r.sent_at
-            ? `sent ${new Date(r.sent_at).toLocaleString()}`
-            : `due ${new Date(r.run_at).toLocaleString()}`
-        return `**#${r.id}** <#${r.channel_id}> — ${kind}${r.enabled ? '' : ' (disabled)'}`
-      })
-      await interaction.reply({ content: lines.join('\n'), ephemeral: true })
-    }
+    if (sub === 'recurring') return handleRecurring(interaction)
+    if (sub === 'once') return handleOnce(interaction)
+    if (sub === 'remove') return handleRemove(interaction)
+    if (sub === 'list') return handleList(interaction)
   },
 }

bot/src/discord/discordManager.js

@@ -50,6 +50,42 @@ async function stop() {
   log.info('discord client disconnected')
 }
 
+// Post-login startup: register commands and start the background workers. A
+// failure here leaves the client connected but flags an error status.
+async function onReady() {
+  try {
+    await registerCommands(client.application.id, guildId)
+    await scheduler.start(client)
+    tempRoleSweeper.start(client)
+    inviteScheduler.start(client, guildId)
+    await inviteTracker.prime(client, guildId)
+    status = 'connected'
+    statusDetail = null
+    lastConnectedAt = new Date()
+    log.info('discord client ready', { user: client.user?.tag, guildId })
+  } catch (err) {
+    status = 'error'
+    statusDetail = `startup failed: ${err.message}`
+    log.error('post-login startup failed (commands/scheduler/temp-roles/invites)', { message: err.message })
+  }
+}
+
+// Route an interaction: role-menu handler first, then chat-input slash commands.
+async function onInteractionCreate(interaction) {
+  if (await roleMenuHandler.handleInteraction(interaction)) return
+  if (!interaction.isChatInputCommand()) return
+  const command = commands.get(interaction.commandName)
+  if (!command) return
+  try {
+    await command.execute(interaction)
+  } catch (err) {
+    log.error('command execution failed', { command: interaction.commandName, message: err.message })
+    const payload = { content: 'Something went wrong running that command.', ephemeral: true }
+    if (interaction.replied || interaction.deferred) await interaction.followUp(payload)
+    else await interaction.reply(payload)
+  }
+}
+
 // start({ token, guildId }) — (re)connects. Always stops any existing client
 // first so re-saving config or toggling Enabled off/on is idempotent.
 async function start({ token, guildId: gid }) {
@@ -72,39 +108,8 @@ async function start({ token, guildId: gid }) {
     ],
   })
 
-  client.once('ready', async () => {
-    try {
-      await registerCommands(client.application.id, guildId)
-      await scheduler.start(client)
-      tempRoleSweeper.start(client)
-      inviteScheduler.start(client, guildId)
-      await inviteTracker.prime(client, guildId)
-      status = 'connected'
-      statusDetail = null
-      lastConnectedAt = new Date()
-      log.info('discord client ready', { user: client.user?.tag, guildId })
-    } catch (err) {
-      status = 'error'
-      statusDetail = `startup failed: ${err.message}`
-      log.error('post-login startup failed (commands/scheduler/temp-roles/invites)', { message: err.message })
-    }
-  })
-
-  client.on('interactionCreate', async (interaction) => {
-    if (await roleMenuHandler.handleInteraction(interaction)) return
-    if (!interaction.isChatInputCommand()) return
-    const command = commands.get(interaction.commandName)
-    if (!command) return
-    try {
-      await command.execute(interaction)
-    } catch (err) {
-      log.error('command execution failed', { command: interaction.commandName, message: err.message })
-      const payload = { content: 'Something went wrong running that command.', ephemeral: true }
-      if (interaction.replied || interaction.deferred) await interaction.followUp(payload)
-      else await interaction.reply(payload)
-    }
-  })
-
+  client.once('ready', onReady)
+  client.on('interactionCreate', onInteractionCreate)
   client.on('messageCreate', messageFilter.handleMessageCreate)
   client.on('guildMemberAdd', handleGuildMemberAdd)
   client.on('guildMemberRemove', handleGuildMemberRemove)

bot/src/discord/messageFilter.js

@@ -66,8 +66,7 @@ function detectSpam(message) {
 async function isBypassed(message, cache) {
   if (cache.allowChannels.has(message.channelId)) return true
   const memberRoles = message.member ? message.member.roles.cache : null
-  if (memberRoles && [...memberRoles.keys()].some((id) => cache.allowRoles.has(id))) return true
-  return false
+  return Boolean(memberRoles && [...memberRoles.keys()].some((id) => cache.allowRoles.has(id)))
 }
 
 async function applyWarnAction(message, reason) {

bot/src/discord/modLog.js

@@ -43,6 +43,34 @@ async function record({ client, guildId, actionType, target, staffUser, reason,
   }
 }
 
+// Post an "appeal approved → action reversed" embed to the mod-log channel.
+// Unlike record() this NEVER inserts a mod_actions row — the reversal is an
+// out-of-band correction driven by the site's appeals flow, not a new staff
+// action. Best-effort: a missing channel or send failure is logged, not thrown.
+async function postReversal({ client, guildId, actionType, discordUserId, appealId }) {
+  try {
+    const channelId = await guildConfig.getModLogChannelId(guildId)
+    if (!channelId) return
+    const channel = await client.channels.fetch(channelId)
+    if (!channel || !channel.isTextBased()) return
+
+    const reversed = actionType === 'ban' ? 'Ban lifted (unbanned)' : 'Mute cleared (timeout removed)'
+    const embed = new EmbedBuilder()
+      .setColor(0x88c0a0)
+      .setTitle('APPEAL APPROVED')
+      .addFields(
+        { name: 'Action reversed', value: reversed, inline: true },
+        { name: 'Target id', value: `${discordUserId}`, inline: true },
+        { name: 'Appeal', value: `#${appealId}`, inline: true },
+      )
+      .setTimestamp()
+
+    await channel.send({ embeds: [embed] })
+  } catch (err) {
+    log.warn('failed to post appeal-reversal embed', { message: err.message })
+  }
+}
+
 function formatDuration(seconds) {
   if (seconds % 86400 === 0) return `${seconds / 86400}d`
   if (seconds % 3600 === 0) return `${seconds / 3600}h`
@@ -50,4 +78,4 @@ function formatDuration(seconds) {
   return `${seconds}s`
 }
 
-module.exports = { record }
+module.exports = { record, postReversal }

bot/src/discord/newsAnnounce.js

@@ -4,6 +4,7 @@
 const { EmbedBuilder } = require('discord.js')
 
 const guildConfig = require('../model/guildConfig')
+const brand = require('../brand')
 const createLogger = require('../utils/logger')
 
 const log = createLogger('news')
@@ -15,7 +16,7 @@ async function postAnnounce(client, guildId, { title, excerpt, url, imageUrl })
   const channel = await client.channels.fetch(channelId)
   if (!channel || !channel.isTextBased()) throw new Error('Configured news channel is missing or not text-based.')
 
-  const embed = new EmbedBuilder().setColor(0x6a8fc2).setTitle(title).setURL(url)
+  const embed = new EmbedBuilder().setColor(brand.accentInt).setTitle(title).setURL(url)
   if (excerpt) embed.setDescription(excerpt)
   if (imageUrl) embed.setImage(imageUrl)
 

bot/src/filter/inviteFilter.js

@@ -2,7 +2,7 @@
 // current guild (anti-raid/anti-advertising). An invite that fails to resolve
 // (expired/invalid/vanity-only) is treated as foreign too — safer default
 // than silently letting an unresolvable link through.
-const INVITE_REGEX = /(?:discord\.gg|discord(?:app)?\.com\/invite)\/([a-zA-Z0-9-]+)/gi
+const INVITE_REGEX = /(?:discord\.gg|discord(?:app)?\.com\/invite)\/([a-z0-9-]+)/gi
 
 // Returns the first foreign (or unresolvable) invite code found in the message,
 // or null if the message contains no foreign invites. Returning the code (rather

bot/src/internal/internal.controller.js

@@ -1,9 +1,14 @@
 const discordManager = require('../discord/discordManager')
 const newsAnnounce = require('../discord/newsAnnounce')
+const modLog = require('../discord/modLog')
 const createLogger = require('../utils/logger')
 
 const log = createLogger('internal')
 
+const REVERSIBLE = new Set(['ban', 'mute'])
+// discord.js REST error code for removing a ban that no longer exists.
+const UNKNOWN_BAN = 10026
+
 // POST /internal/config — called by the main server right after an admin
 // saves the Discord Bot panel, and by the bot's own bootstrap on startup
 // (via a GET to the server for the current config, then this same start/stop
@@ -47,4 +52,51 @@ async function announce(req, res) {
   }
 }
 
-module.exports = { setConfig, getStatus: getStatusHandler, announce }
+// POST /internal/mod-reverse — called by the main server when a staffer APPROVES
+// a moderation appeal (Phase 6d). Body: { discord_user_id, action_type, appeal_id }.
+// Reverses the Discord action: 'ban' → lift the ban, 'mute' → clear the timeout.
+// Idempotent-friendly: an already-lifted ban ("Unknown Ban") or a member who has
+// left the guild is treated as success (the desired end state already holds).
+async function reverseModAction(req, res) {
+  const { discord_user_id: discordUserId, action_type: actionType, appeal_id: appealId } = req.body || {}
+
+  if (!REVERSIBLE.has(actionType)) {
+    return res.status(400).json({ message: 'action_type must be ban or mute' })
+  }
+
+  const connection = discordManager.getConnection()
+  if (!connection) return res.status(503).json({ message: 'Bot is not connected' })
+
+  const reason = `Appeal #${appealId} approved`
+  try {
+    const guild = await connection.client.guilds.fetch(connection.guildId)
+
+    if (actionType === 'ban') {
+      try {
+        await guild.bans.remove(discordUserId, reason)
+      } catch (err) {
+        // Unknown Ban → already unbanned; anything else is a real failure.
+        if (err.code !== UNKNOWN_BAN) throw err
+      }
+    } else {
+      // mute: clear the timeout. If the member has left, there's nothing to clear.
+      const member = await guild.members.fetch(discordUserId).catch(() => null)
+      if (member) await member.timeout(null, reason)
+    }
+
+    await modLog.postReversal({
+      client: connection.client,
+      guildId: connection.guildId,
+      actionType,
+      discordUserId,
+      appealId,
+    })
+
+    return res.json({ reversed: true })
+  } catch (err) {
+    log.error('mod-reverse failed', { message: err.message, actionType, discordUserId })
+    return res.status(500).json({ message: err.message })
+  }
+}
+
+module.exports = { setConfig, getStatus: getStatusHandler, announce, reverseModAction }

bot/src/internal/internal.routes.js

@@ -10,5 +10,6 @@ router.use(requireInternalKey)
 router.post('/config', ctrl.setConfig)
 router.get('/status', ctrl.getStatus)
 router.post('/announce', ctrl.announce)
+router.post('/mod-reverse', ctrl.reverseModAction)
 
 module.exports = router

bot/src/internal/requireInternalKey.js

@@ -1,4 +1,4 @@
-// Gate for the bot's /internal/* API. The only caller is the main UOMysticmoon
+// Gate for the bot's /internal/* API. The only caller is the main Runic Gateway
 // server, over the private compose network — never expose this route through
 // the public reverse proxy. Timing-safe compare so response time can't be used
 // to brute-force the shared secret one byte at a time.

bot/src/server.js

@@ -4,6 +4,7 @@ const app = require('./app')
 const bootstrap = require('./bootstrap')
 const createLogger = require('./utils/logger')
 const discordManager = require('./discord/discordManager')
+const brand = require('./brand')
 const pkg = require('../package.json')
 
 const log = createLogger('server')
@@ -11,7 +12,7 @@ const PORT = Number(process.env.PORT) || 4100
 const HOST = '0.0.0.0'
 
 async function start() {
-  log.info(`starting UOMysticmoon bot v${pkg.version}`, {
+  log.info(`starting ${brand.name} bot v${pkg.version}`, {
     node: process.version,
     logFile: createLogger.logFilePath || 'disabled (console only)',
   })

bot/src/utils/duration.js

@@ -7,7 +7,7 @@ const MAX_TIMEOUT_MS = 28 * 86_400_000
 
 function parseDuration(input) {
   if (!input) return null
-  const match = /^(\d+)\s*(s|m|h|d)$/i.exec(input.trim())
+  const match = /^(\d+)\s*([smhd])$/i.exec(input.trim())
   if (!match) return null
   const [, amount, unit] = match
   return Number(amount) * UNIT_MS[unit.toLowerCase()]

brand/README.md

@@ -0,0 +1,15 @@
+# Brand assets (per-instance)
+
+This directory is bind-mounted into the container at `/app/brand` (see
+`docker-compose.yml`). Drop instance branding images here and point the matching
+`BRAND_*` env vars at them, e.g.:
+
+```
+BRAND_LOGO=/brand/logo.png
+BRAND_HERO=/brand/hero.png
+BRAND_FAVICON=/brand/favicon.ico
+```
+
+Leave the vars blank to use the built-in defaults (the hero falls back to a
+neutral built-in image; no logo/favicon is injected). Nothing here is required
+for the app to run — it renders cleanly with an empty `brand/`.

client/index.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UOMysticmoon</title>
-    <meta name="description" content="UOMysticmoon — an independent private Ultima Online shard. News, screenshots, guides, and community notes." />
+    <title>Runic Gateway</title>
+    <meta name="description" content="Runic Gateway — an independent private Ultima Online shard. News, screenshots, guides, and community notes." />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap" rel="stylesheet" />

client/package-lock.json

@@ -1,15 +1,16 @@
 {
-  "name": "uomysticmoon-client",
+  "name": "runic-gateway-client",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "uomysticmoon-client",
+      "name": "runic-gateway-client",
       "version": "1.0.0",
       "dependencies": {
         "@tiptap/extension-image": "^2.27.2",
         "@tiptap/extension-link": "^2.27.2",
+        "@tiptap/extension-text-align": "^2.27.2",
         "@tiptap/react": "^2.27.2",
         "@tiptap/starter-kit": "^2.27.2",
         "diff": "^5.2.2",
@@ -1483,6 +1484,19 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/extension-text-align": {
+      "version": "2.27.2",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.27.2.tgz",
+      "integrity": "sha512-0Pyks6Hu+Q/+9+5/osoSv0SP6jIerdWMYbi13aaZLsJoj3lBj5WNaE11JtAwSFN5sx0IbqhDSlp1zkvRnzgZ8g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/extension-text-style": {
       "version": "2.27.2",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.27.2.tgz",

client/package.json

@@ -1,16 +1,18 @@
 {
-  "name": "uomysticmoon-client",
+  "name": "runic-gateway-client",
   "private": true,
   "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "node --test"
   },
   "dependencies": {
     "@tiptap/extension-image": "^2.27.2",
     "@tiptap/extension-link": "^2.27.2",
+    "@tiptap/extension-text-align": "^2.27.2",
     "@tiptap/react": "^2.27.2",
     "@tiptap/starter-kit": "^2.27.2",
     "diff": "^5.2.2",

client/src/App.jsx

@@ -3,6 +3,7 @@ import { AuthProvider } from './contexts/AuthContext.jsx'
 import { SiteProvider } from './contexts/SiteContext.jsx'
 import MaintenanceGate from './components/MaintenanceGate.jsx'
 import RequireAuth from './components/RequireAuth.jsx'
+import RequirePlayer from './components/RequirePlayer.jsx'
 import RoleGate from './components/RoleGate.jsx'
 
 // Public
@@ -15,32 +16,67 @@ import Newsletter from './routes/public/Newsletter.jsx'
 import NewsletterIssue from './routes/public/NewsletterIssue.jsx'
 import About from './routes/public/About.jsx'
 import Status from './routes/public/Status.jsx'
+import Shard from './routes/public/Shard.jsx'
+import ShardActivity from './routes/public/ShardActivity.jsx'
+import ChampSpawns from './routes/public/ChampSpawns.jsx'
+import Guilds from './routes/public/Guilds.jsx'
+import Governors from './routes/public/Governors.jsx'
+import Houses from './routes/public/Houses.jsx'
 import Wiki from './routes/wiki/Wiki.jsx'
 import WikiArticle from './routes/wiki/WikiArticle.jsx'
+import CmsPage from './routes/public/CmsPage.jsx'
 
 // Admin
 import AdminLogin from './routes/admin/AdminLogin.jsx'
 import AdminLayout from './routes/admin/AdminLayout.jsx'
 import Dashboard from './routes/admin/views/Dashboard.jsx'
 import PostsAdmin from './routes/admin/views/PostsAdmin.jsx'
+import PagesAdmin from './routes/admin/views/PagesAdmin.jsx'
+import PageBuilder from './routes/admin/views/PageBuilder.jsx'
 import WikiAdmin from './routes/admin/views/WikiAdmin.jsx'
 import HeroEditor from './routes/admin/views/HeroEditor.jsx'
 import SettingsAdmin from './routes/admin/views/SettingsAdmin.jsx'
 import ActivityAdmin from './routes/admin/views/ActivityAdmin.jsx'
 import BotActivityAdmin from './routes/admin/views/BotActivityAdmin.jsx'
 import DiscordBotAdmin from './routes/admin/views/DiscordBotAdmin.jsx'
+import ShardAdmin from './routes/admin/views/ShardAdmin.jsx'
+import ShardVisibility from './routes/admin/views/ShardVisibility.jsx'
+import ShardOps from './routes/admin/views/ShardOps.jsx'
+import AdminCharacters from './routes/admin/views/AdminCharacters.jsx'
+import AdminCharacter from './routes/admin/views/AdminCharacter.jsx'
 import AuthProvidersAdmin from './routes/admin/views/AuthProvidersAdmin.jsx'
 import UsersAdmin from './routes/admin/views/UsersAdmin.jsx'
+import UserDetail from './routes/admin/views/UserDetail.jsx'
+import InvitesAdmin from './routes/admin/views/InvitesAdmin.jsx'
+import HousesAdmin from './routes/admin/views/HousesAdmin.jsx'
 import AccountAdmin from './routes/admin/views/AccountAdmin.jsx'
 import Moderation from './routes/admin/views/Moderation.jsx'
 import ModerationUser from './routes/admin/views/ModerationUser.jsx'
+import Appeals from './routes/admin/views/Appeals.jsx'
+
+// Player portal
+import PlayerLogin from './routes/player/PlayerLogin.jsx'
+import PlayerRegister from './routes/player/PlayerRegister.jsx'
+import ForgotPassword from './routes/player/ForgotPassword.jsx'
+import ResetPassword from './routes/player/ResetPassword.jsx'
+import AcceptInvite from './routes/player/AcceptInvite.jsx'
+import PlayerPortalLayout from './routes/player/PlayerPortalLayout.jsx'
+import PlayerCharacters from './routes/player/PlayerCharacters.jsx'
+import PlayerCharacter from './routes/player/PlayerCharacter.jsx'
+import PlayerAccount from './routes/player/PlayerAccount.jsx'
+import PlayerAppeals from './routes/player/PlayerAppeals.jsx'
 
 export default function App() {
   return (
     <AuthProvider>
       <SiteProvider>
         <Routes>
-          {/* Public site — gated by maintenance mode (admins preview through it) */}
+          {/* Landing hero — always public, even in maintenance mode. The hero is
+              itself the pre-launch "coming soon" page, so it sits outside the
+              MaintenanceGate and every visitor sees it regardless of auth/site mode. */}
+          <Route path="/" element={<Portal />} />
+
+          {/* Rest of the public site — gated by maintenance mode (admins preview through it) */}
           <Route
             element={
               <MaintenanceGate>
@@ -48,7 +84,6 @@ export default function App() {
               </MaintenanceGate>
             }
           >
-            <Route path="/" element={<Portal />} />
             <Route path="/site" element={<Website />} />
             <Route path="/site/news" element={<News />} />
             <Route path="/site/screenshots" element={<Screenshots />} />
@@ -57,10 +92,23 @@ export default function App() {
             <Route path="/site/newsletter/:id" element={<NewsletterIssue />} />
             <Route path="/site/about" element={<About />} />
             <Route path="/site/status" element={<Status />} />
+            <Route path="/site/shard" element={<Shard />} />
+            <Route path="/site/shard/activity" element={<ShardActivity />} />
+            <Route path="/site/champs" element={<ChampSpawns />} />
+            <Route path="/site/guilds" element={<Guilds />} />
+            <Route path="/site/governors" element={<Governors />} />
+            <Route path="/site/houses" element={<Houses />} />
             <Route path="/wiki" element={<Wiki />} />
             <Route path="/wiki/:slug" element={<WikiArticle />} />
+            {/* CMS pages: top-level /:slug, matched only after the named routes
+                above (React Router ranks static routes over this dynamic one). */}
+            <Route path="/:slug" element={<CmsPage />} />
           </Route>
 
+          {/* Draft-preview link (token-gated). Outside the maintenance gate so a
+              preview link works regardless of site mode. */}
+          <Route path="/preview/:id/:token" element={<CmsPage preview />} />
+
           {/* Admin */}
           <Route path="/admin/login" element={<AdminLogin />} />
           <Route
@@ -73,6 +121,9 @@ export default function App() {
           >
             <Route index element={<Dashboard />} />
             <Route path="posts" element={<PostsAdmin />} />
+            <Route path="pages" element={<PagesAdmin />} />
+            <Route path="pages/new" element={<PageBuilder />} />
+            <Route path="pages/:id" element={<PageBuilder />} />
             <Route path="wiki" element={<WikiAdmin />} />
             <Route path="hero" element={<HeroEditor />} />
             <Route path="settings" element={<SettingsAdmin />} />
@@ -86,16 +137,58 @@ export default function App() {
             >
               <Route index element={<Moderation />} />
               <Route path="user/:discordId" element={<ModerationUser />} />
+              <Route path="appeals" element={<Appeals />} />
             </Route>
             <Route path="activity" element={<ActivityAdmin />} />
             <Route path="bot-activity" element={<BotActivityAdmin />} />
             <Route path="discord-bot" element={<DiscordBotAdmin />} />
+            <Route path="shard" element={<ShardAdmin />} />
+            <Route path="shard-visibility" element={<ShardVisibility />} />
+            <Route
+              path="shard-ops"
+              element={
+                <RoleGate roles={['admin', 'moderator']}>
+                  <ShardOps />
+                </RoleGate>
+              }
+            />
+            <Route
+              path="houses"
+              element={
+                <RoleGate roles={['admin', 'moderator']}>
+                  <HousesAdmin />
+                </RoleGate>
+              }
+            />
+            <Route path="characters" element={<AdminCharacters />} />
+            <Route path="characters/:serial" element={<AdminCharacter />} />
             <Route path="auth-providers" element={<AuthProvidersAdmin />} />
             <Route path="users" element={<UsersAdmin />} />
+            <Route path="users/:id" element={<UserDetail />} />
+            <Route path="invites" element={<InvitesAdmin />} />
             <Route path="account" element={<AccountAdmin />} />
             <Route path="*" element={<Navigate to="/admin" replace />} />
           </Route>
 
+          {/* Player portal */}
+          <Route path="/account/login" element={<PlayerLogin />} />
+          <Route path="/account/register" element={<PlayerRegister />} />
+          <Route path="/account/forgot" element={<ForgotPassword />} />
+          <Route path="/account/reset/:token" element={<ResetPassword />} />
+          <Route path="/invite/:token" element={<AcceptInvite />} />
+          <Route
+            element={
+              <RequirePlayer>
+                <PlayerPortalLayout />
+              </RequirePlayer>
+            }
+          >
+            <Route path="/player" element={<PlayerCharacters />} />
+            <Route path="/player/char/:serial" element={<PlayerCharacter />} />
+            <Route path="/account" element={<PlayerAccount />} />
+            <Route path="/account/appeals" element={<PlayerAppeals />} />
+          </Route>
+
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </SiteProvider>

client/src/api/client.js

@@ -2,6 +2,10 @@
 // same-origin API (/api/v1) — proxied to the Express server in dev.
 const BASE = '/api/v1'
 
+// Prefix a non-empty query string with "?" (and nothing when it is empty), so
+// callers can append it to a path without a dangling "?".
+const withQs = (s) => (s ? `?${s}` : '')
+
 class ApiError extends Error {
   constructor(status, message, body) {
     super(message)
@@ -44,14 +48,54 @@ export const api = {
   // `extra` carries the honeypot field (and any future login fields).
   login: (username, password, extra = {}) =>
     req('/auth/login', { method: 'POST', body: { username, password, ...extra } }),
-  loginTotp: (challenge, code) =>
-    req('/auth/login/totp', { method: 'POST', body: { challenge, code } }),
+  // Public self-registration (player accounts). `extra` carries the honeypot +
+  // optional email. Returns { user } and sets the session cookie on success.
+  register: (username, password, extra = {}) =>
+    req('/auth/register', { method: 'POST', body: { username, password, ...extra } }),
+  // Email invites (public, token-gated accept).
+  getInvite: (token) => req(`/auth/invite/${encodeURIComponent(token)}`),
+  acceptInvite: (token, username, password, extra = {}) =>
+    req(`/auth/invite/${encodeURIComponent(token)}/accept`, { method: 'POST', body: { username, password, ...extra } }),
+  // Second factor for web login. `extra` carries the optional recoveryCode (an
+  // alternative to code) and the trustDevice/deviceName opt-in. On success the
+  // response may include { trustLimitReached, devices } when trust was requested
+  // but the device cap is reached.
+  loginTotp: (challenge, code, extra = {}) =>
+    req('/auth/login/totp', { method: 'POST', body: { challenge, code, ...extra } }),
+  // Self-service password reset (public, token-gated). forgot always resolves the
+  // same way whether or not the email exists (no enumeration); getPasswordReset
+  // validates a link (200 → { username }, 404 → invalid/expired); resetPassword
+  // sets the new password and revokes all sessions (the user then signs in fresh).
+  forgotPassword: (email) => req('/auth/password/forgot', { method: 'POST', body: { email } }),
+  getPasswordReset: (token) => req(`/auth/password/reset/${encodeURIComponent(token)}`),
+  resetPassword: (token, password) =>
+    req(`/auth/password/reset/${encodeURIComponent(token)}`, { method: 'POST', body: { password } }),
   // Second factor for an SSO login (challenge is held in an httpOnly cookie set by
-  // the callback, so only the code is sent). Returns { user, returnTo }.
-  ssoLoginTotp: (code) => req('/auth/sso/totp', { method: 'POST', body: { code } }),
+  // the callback, so only the code is sent). `extra` carries the trustDevice/
+  // deviceName opt-in, same as the password path. Returns { user, returnTo } — plus
+  // { trustLimitReached, devices } when trust was asked for but the cap is reached.
+  ssoLoginTotp: (code, extra = {}) => req('/auth/sso/totp', { method: 'POST', body: { code, ...extra } }),
   logout: () => req('/auth/logout', { method: 'POST' }),
   // Public SSO provider discovery — drives the login-page provider buttons.
   authProviders: () => req('/auth/providers'),
+  // Active mobile device sessions (role-agnostic self-service under /auth/me).
+  // List the active ones and revoke a single device by its session id.
+  mySessions: () => req('/auth/me/sessions'),
+  revokeMySession: (id) => req(`/auth/me/sessions/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+  // Trusted devices (MFA "Trust this device"), role-agnostic under /auth/me. These
+  // are the browsers/apps allowed to skip the TOTP step at login (distinct from
+  // mySessions, which are live mobile login sessions).
+  myTrustedDevices: () => req('/auth/me/trusted-devices'),
+  trustThisDevice: (deviceName) =>
+    req('/auth/me/trusted-devices', { method: 'POST', body: { deviceName } }),
+  revokeTrustedDevice: (id) =>
+    req(`/auth/me/trusted-devices/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+  revokeAllTrustedDevices: () => req('/auth/me/trusted-devices', { method: 'DELETE' }),
+  // Recovery (backup) codes. status → remaining count; generate → a fresh set,
+  // returned ONCE (password step-up for accounts that have a password).
+  recoveryCodesStatus: () => req('/auth/me/account/recovery-codes/status'),
+  generateRecoveryCodes: (currentPassword) =>
+    req('/auth/me/account/recovery-codes/generate', { method: 'POST', body: { currentPassword } }),
 
   // ----- public -----
   publicSettings: () => req('/public/settings'),
@@ -64,24 +108,73 @@ export const api = {
     if (opts.tag) qs.set('tag', opts.tag)
     if (opts.q) qs.set('q', opts.q)
     const s = qs.toString()
-    return req(`/public/wiki${s ? `?${s}` : ''}`)
+    return req(`/public/wiki${withQs(s)}`)
   },
   wikiCategories: () => req('/public/wiki/categories'),
   wikiTags: () => req('/public/wiki/tags'),
   wikiPage: (slug) => req(`/public/wiki/${slug}`),
+  // CMS pages (block-based). Published-only for the public; a draft-preview link
+  // is fetched by id + token.
+  page: (slug) => req(`/public/pages/${slug}`),
+  pagePreview: (id, token) => req(`/public/pages/${id}/preview/${token}`),
   contact: (payload) => req('/public/contact', { method: 'POST', body: payload }),
 
+  // ----- shard live data (uo-link) -----
+  // Token-free, same-origin reads backed by the ingested feed + a cached live
+  // character round-trip. shardStreamUrl is the SSE endpoint for useShardFeed.
+  shard: {
+    status: () => req('/public/shard/status'),
+    feed: (opts = {}) => {
+      const qs = new URLSearchParams()
+      if (opts.kind) qs.set('kind', opts.kind)
+      if (opts.limit) qs.set('limit', opts.limit)
+      const s = qs.toString()
+      return req(`/public/shard/feed${withQs(s)}`)
+    },
+    economy: (limit) => {
+      const q = limit ? `limit=${limit}` : ''
+      return req(`/public/shard/economy${withQs(q)}`)
+    },
+    online: () => req('/public/shard/online'),
+    idoc: () => req('/public/shard/idoc'),
+    champs: () => req('/public/shard/champs'),
+    // Protocol 2.0 boards.
+    guilds: () => req('/public/shard/guilds'),
+    governors: () => req('/public/shard/governors'),
+    governorHistory: (city, limit) => {
+      const q = limit ? `limit=${limit}` : ''
+      return req(`/public/shard/governors/${encodeURIComponent(city)}/history${withQs(q)}`)
+    },
+    presence: () => req('/public/shard/presence'),
+    houses: () => req('/public/shard/houses'),
+    // Which shard surfaces this caller may reach, plus the audience rung they
+    // resolved to. Drives nav so we never render a link that would 403.
+    features: () => req('/public/shard/features'),
+  },
+  // Full paths (incl. /api/v1) for the browser EventSource — the req() wrapper is
+  // fetch-only, so SSE subscribers build the URL from here. The admin stream
+  // carries every kind (incl. audit/cheat) and needs the staff session cookie.
+  shardStreamUrl: `${BASE}/public/shard/stream`,
+  adminShardStreamUrl: `${BASE}/admin/uo-link/stream`,
+
   // ----- admin -----
   admin: {
     dashboard: () => req('/admin/dashboard'),
     setSiteMode: (mode) => req('/admin/site-mode', { method: 'PUT', body: { mode } }),
-    listPosts: (category) => req(`/admin/posts${category ? `?category=${category}` : ''}`),
+    listPosts: (category) => {
+      const q = category ? `category=${category}` : ''
+      return req(`/admin/posts${withQs(q)}`)
+    },
     getPost: (id) => req(`/admin/posts/${id}`),
     createPost: (data) => req('/admin/posts', { method: 'POST', body: data }),
     updatePost: (id, data) => req(`/admin/posts/${id}`, { method: 'PUT', body: data }),
     deletePost: (id) => req(`/admin/posts/${id}`, { method: 'DELETE' }),
     publishPost: (id, published) =>
       req(`/admin/posts/${id}/publish`, { method: 'PATCH', body: { published } }),
+    // News announcement pipeline (town crier + Discord) status + per-leg retry.
+    getAnnounce: (id) => req(`/admin/posts/${id}/announce`),
+    retryAnnounceLeg: (id, leg) =>
+      req(`/admin/posts/${id}/announce/retry`, { method: 'POST', body: { leg } }),
     uploadImage: (file) => {
       const fd = new FormData()
       fd.append('image', file)
@@ -93,6 +186,15 @@ export const api = {
       fd.append('image', file)
       return req('/admin/uploads', { method: 'POST', body: fd, raw: true })
     },
+    // ----- CMS pages (block-based page builder) -----
+    listPages: () => req('/admin/pages'),
+    getPage: (id) => req(`/admin/pages/${id}`),
+    createPage: (data) => req('/admin/pages', { method: 'POST', body: data }),
+    updatePage: (id, data) => req(`/admin/pages/${id}`, { method: 'PATCH', body: data }),
+    deletePage: (id) => req(`/admin/pages/${id}`, { method: 'DELETE' }),
+    unprotectPage: (id, password) =>
+      req(`/admin/pages/${id}/unprotect`, { method: 'POST', body: { password } }),
+    createPagePreview: (id) => req(`/admin/pages/${id}/preview`, { method: 'POST' }),
     listWiki: (params = '') => req(`/admin/wiki${params}`),
     getWiki: (slug) => req(`/admin/wiki/${slug}`),
     createWiki: (data) => req('/admin/wiki', { method: 'POST', body: data }),
@@ -116,9 +218,37 @@ export const api = {
     botActivity: () => req('/admin/bot-activity'),
     unbanIp: (ip) => req('/admin/bot-activity/unban', { method: 'POST', body: { ip } }),
     listUsers: () => req('/admin/users'),
+    getUser: (id) => req(`/admin/users/${id}`),
     createUser: (data) => req('/admin/users', { method: 'POST', body: data }),
     updateUser: (id, data) => req(`/admin/users/${id}`, { method: 'PUT', body: data }),
     deleteUser: (id) => req(`/admin/users/${id}`, { method: 'DELETE' }),
+    // A user's trusted devices + MFA reset (admin only).
+    userTrustedDevices: (id) => req(`/admin/users/${id}/trusted-devices`),
+    revokeUserTrustedDevice: (id, deviceId) =>
+      req(`/admin/users/${id}/trusted-devices/${deviceId}`, { method: 'DELETE' }),
+    revokeAllUserTrustedDevices: (id) =>
+      req(`/admin/users/${id}/trusted-devices`, { method: 'DELETE' }),
+    resetUserMfa: (id) => req(`/admin/users/${id}/mfa/reset`, { method: 'POST' }),
+    // Email invites.
+    listInvites: () => req('/admin/invites'),
+    createInvite: (email, role, sendEmail = true) =>
+      req('/admin/invites', { method: 'POST', body: { email, role, sendEmail } }),
+    revokeInvite: (id) => req(`/admin/invites/${id}`, { method: 'DELETE' }),
+    // A single user's shard (uo-link) footprint, scoped to their linked accounts.
+    // accounts/sales/houses/online are user-scoped endpoints; roster/vendors/char
+    // reuse the admin-bypass /admin/shard/* endpoints (which already read any
+    // account) so the shared GameAccounts component works unchanged.
+    userShard: (id) => ({
+      accounts: () => req(`/admin/users/${id}/shard/accounts`),
+      roster: (account) => req(`/admin/shard/roster/${encodeURIComponent(account)}`),
+      vendors: (account) => req(`/admin/shard/vendors/${encodeURIComponent(account)}`),
+      char: (serial) => req(`/admin/shard/char/${encodeURIComponent(serial)}`),
+      sales: () => req(`/admin/users/${id}/shard/sales`),
+      houses: () => req(`/admin/users/${id}/shard/houses`),
+      online: () => req(`/admin/users/${id}/shard/online`),
+      standing: () => req(`/admin/users/${id}/shard/standing`),
+      unlink: (account) => req(`/admin/users/${id}/shard/link/${encodeURIComponent(account)}`, { method: 'DELETE' }),
+    }),
 
     // ----- moderation dashboard (admin + moderator) -----
     modSummary: () => req('/admin/moderation/stats/summary'),
@@ -128,7 +258,7 @@ export const api = {
       if (params.limit) qs.set('limit', params.limit)
       if (params.offset) qs.set('offset', params.offset)
       const s = qs.toString()
-      return req(`/admin/moderation/recent${s ? `?${s}` : ''}`)
+      return req(`/admin/moderation/recent${withQs(s)}`)
     },
     modSearch: (q) => req(`/admin/moderation/search?q=${encodeURIComponent(q)}`),
     modMembers: (params = {}) => {
@@ -137,21 +267,21 @@ export const api = {
       if (params.limit) qs.set('limit', params.limit)
       if (params.offset) qs.set('offset', params.offset)
       const s = qs.toString()
-      return req(`/admin/moderation/members${s ? `?${s}` : ''}`)
+      return req(`/admin/moderation/members${withQs(s)}`)
     },
     modFilterHits: (params = {}) => {
       const qs = new URLSearchParams()
       if (params.limit) qs.set('limit', params.limit)
       if (params.offset) qs.set('offset', params.offset)
       const s = qs.toString()
-      return req(`/admin/moderation/filter-hits${s ? `?${s}` : ''}`)
+      return req(`/admin/moderation/filter-hits${withQs(s)}`)
     },
     modSpamHits: (params = {}) => {
       const qs = new URLSearchParams()
       if (params.limit) qs.set('limit', params.limit)
       if (params.offset) qs.set('offset', params.offset)
       const s = qs.toString()
-      return req(`/admin/moderation/spam-hits${s ? `?${s}` : ''}`)
+      return req(`/admin/moderation/spam-hits${withQs(s)}`)
     },
     modUser: (discordId) => req(`/admin/moderation/user/${discordId}`),
     modUserActions: (discordId, params = {}) => {
@@ -160,12 +290,27 @@ export const api = {
       if (params.limit) qs.set('limit', params.limit)
       if (params.offset) qs.set('offset', params.offset)
       const s = qs.toString()
-      return req(`/admin/moderation/user/${discordId}/actions${s ? `?${s}` : ''}`)
+      return req(`/admin/moderation/user/${discordId}/actions${withQs(s)}`)
     },
     modUserNotes: (discordId) => req(`/admin/moderation/user/${discordId}/notes`),
     addModNote: (discordId, data) =>
       req(`/admin/moderation/user/${discordId}/notes`, { method: 'POST', body: data }),
 
+    // ----- moderation appeals (admin + moderator) -----
+    getAppeals: (params = {}) => {
+      const qs = new URLSearchParams()
+      if (params.status) qs.set('status', params.status)
+      if (params.limit) qs.set('limit', params.limit)
+      if (params.offset) qs.set('offset', params.offset)
+      const s = qs.toString()
+      return req(`/admin/moderation/appeals${withQs(s)}`)
+    },
+    getAppeal: (id) => req(`/admin/moderation/appeals/${id}`),
+    claimAppeal: (id) => req(`/admin/moderation/appeals/${id}/claim`, { method: 'POST' }),
+    resolveAppeal: (id, data) =>
+      req(`/admin/moderation/appeals/${id}/resolve`, { method: 'POST', body: data }),
+    getUserAppeals: (discordId) => req(`/admin/moderation/user/${discordId}/appeals`),
+
     // ----- account security (self-service 2FA) -----
     getAccount: () => req('/admin/account'),
     totpSetup: () => req('/admin/account/totp/setup', { method: 'POST' }),
@@ -176,6 +321,19 @@ export const api = {
     linkedIdentities: () => req('/admin/account/identities'),
     unlinkIdentity: (provider) => req(`/admin/account/identities/${provider}`, { method: 'DELETE' }),
 
+    // ----- game account linking (self-service, staff) -----
+    shard: {
+      link: (code) => req('/admin/shard/link', { method: 'POST', body: { code } }),
+      accounts: () => req('/admin/shard/accounts'),
+      roster: (account) => req(`/admin/shard/roster/${encodeURIComponent(account)}`),
+      vendors: (account) => req(`/admin/shard/vendors/${encodeURIComponent(account)}`),
+      char: (serial) => req(`/admin/shard/char/${encodeURIComponent(serial)}`),
+      sales: () => req('/admin/shard/sales'),
+      houses: () => req('/admin/shard/houses'), // full registry (admin/moderator)
+      createAccount: (account, password) =>
+        req('/admin/shard/account', { method: 'POST', body: { account, password } }),
+    },
+
     // ----- auth providers / SSO config (admin only) -----
     listAuthProviders: () => req('/admin/auth/providers'),
     createAuthProvider: (data) => req('/admin/auth/providers', { method: 'POST', body: data }),
@@ -185,6 +343,75 @@ export const api = {
     // ----- Discord bot control (admin only) -----
     getDiscordBotConfig: () => req('/admin/discord-bot/config'),
     saveDiscordBotConfig: (data) => req('/admin/discord-bot/config', { method: 'PUT', body: data }),
+
+    // ----- uo-link sidecar control (admin only) -----
+    getUoLinkConfig: () => req('/admin/uo-link/config'),
+    saveUoLinkConfig: (data) => req('/admin/uo-link/config', { method: 'PUT', body: data }),
+    postTownCrier: (data) => req('/admin/uo-link/towncrier', { method: 'POST', body: data }),
+    deleteTownCrier: (id) => req(`/admin/uo-link/towncrier/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+    // Per-feature shard visibility: who may see which shard surface, and which
+    // sensitive fields within it. Admin only — it decides what ANONYMOUS
+    // visitors get. acct/webId are admin-only always and the API rejects any
+    // attempt to configure them.
+    getShardVisibility: () => req('/admin/shard/visibility'),
+    saveShardVisibility: (features) =>
+      req('/admin/shard/visibility', { method: 'PUT', body: { features } }),
+
+    // ----- in-game staff operations: write plane + support queue (admin/moderator) -----
+    // `actor` is stamped server-side from the session — never sent from here.
+    shardOps: {
+      kick: (data) => req('/admin/shard/kick', { method: 'POST', body: data }),
+      ban: (data) => req('/admin/shard/ban', { method: 'POST', body: data }),
+      unban: (account) => req('/admin/shard/unban', { method: 'POST', body: { account } }),
+      broadcast: (data) => req('/admin/shard/broadcast', { method: 'POST', body: data }),
+      pages: () => req('/admin/shard/pages'),
+      respondPage: (id, data) =>
+        req(`/admin/shard/pages/${encodeURIComponent(id)}/respond`, { method: 'POST', body: data }),
+      closePage: (id) => req(`/admin/shard/pages/${encodeURIComponent(id)}/close`, { method: 'POST' }),
+      audit: (limit) => req(`/admin/shard/audit${limit ? `?limit=${limit}` : ''}`),
+    },
+
+    // ----- Email delivery / Gmail OAuth2 (admin only) -----
+    getEmailConfig: () => req('/admin/email/config'),
+    saveEmailConfig: (data) => req('/admin/email/config', { method: 'PUT', body: data }),
+    emailConnectUrl: () => req('/admin/email/connect/start'),
+    testEmail: (to) => req('/admin/email/test', { method: 'POST', body: { to } }),
+    disconnectEmail: () => req('/admin/email/disconnect', { method: 'POST' }),
+  },
+
+  // ----- player self-service (role: 'player') -----
+  // Mirrors the admin account methods but self-scoped under /player. The change
+  // endpoints re-issue the session cookie server-side, so the caller stays signed in.
+  player: {
+    getAccount: () => req('/player/account'),
+    changeUsername: (username) =>
+      req('/player/account/username', { method: 'PATCH', body: { username } }),
+    changePassword: (newPassword, currentPassword) =>
+      req('/player/account/password', { method: 'PATCH', body: { newPassword, currentPassword } }),
+    totpSetup: () => req('/player/account/totp/setup', { method: 'POST' }),
+    totpEnable: (code) => req('/player/account/totp/enable', { method: 'POST', body: { code } }),
+    totpDisable: (code) => req('/player/account/totp/disable', { method: 'POST', body: { code } }),
+    linkedIdentities: () => req('/player/account/identities'),
+    unlinkIdentity: (provider) => req(`/player/account/identities/${provider}`, { method: 'DELETE' }),
+
+    // ----- game account linking (uo-link) -----
+    shard: {
+      link: (code) => req('/player/shard/link', { method: 'POST', body: { code } }),
+      accounts: () => req('/player/shard/accounts'),
+      roster: (account) => req(`/player/shard/roster/${encodeURIComponent(account)}`),
+      vendors: (account) => req(`/player/shard/vendors/${encodeURIComponent(account)}`),
+      char: (serial) => req(`/player/shard/char/${encodeURIComponent(serial)}`),
+      sales: () => req('/player/shard/sales'),
+      houses: () => req('/player/shard/houses'), // the caller's own houses
+      createAccount: (account, password) =>
+        req('/player/shard/account', { method: 'POST', body: { account, password } }),
+    },
+
+    // ----- moderation appeals (self-service) -----
+    getMyAppeals: () => req('/player/appeals'),
+    getEligibleAppeals: () => req('/player/appeals/eligible'),
+    submitAppeal: (data) => req('/player/appeals', { method: 'POST', body: data }),
+    withdrawAppeal: (id) => req(`/player/appeals/${id}/withdraw`, { method: 'POST' }),
   },
 }
 

client/src/blocks/BlockRenderer.jsx

@@ -0,0 +1,26 @@
+// Renders stored blocks via their registry component. Used by the public page
+// route, the draft preview, and (recursively) the two_column block. Kept
+// separate from the registry so both the renderer and the builder can import it.
+// Import the lookup from the registry directly (not ./index) to avoid a cycle:
+// index → types/twoColumn → BlockRenderer. The page route/builder import ./index,
+// which registers every block before anything renders.
+import { getBlock } from './registry.js'
+
+/**
+ * Render one block. A block with `visible === false` renders nothing (admins
+ * hide blocks without deleting them). An unknown type also renders nothing —
+ * server validation prevents storing one, so this only guards a client/server
+ * registry skew rather than crashing the whole page.
+ */
+export default function BlockRenderer({ block }) {
+  if (!block || block.visible === false) return null
+  const def = getBlock(block.type)
+  if (!def || !def.component) return null
+  const Component = def.component
+  return <Component props={block.props || {}} block={block} />
+}
+
+/** Render an ordered array of blocks (array position = display order). */
+export function BlockList({ blocks }) {
+  return (blocks || []).map((block) => <BlockRenderer key={block.id} block={block} />)
+}

client/src/blocks/editorKit.jsx

@@ -0,0 +1,64 @@
+// Shared form controls for block editors, styled with the existing admin design
+// system (.field-label / .input / .select). Every block's editor is a
+// ({ props, onChange }) component; these keep the seven of them consistent and
+// short. onChange always receives the full next props object.
+
+export function Field({ label, hint, children }) {
+  return (
+    <label style={{ display: 'block' }}>
+      <span className="field-label">{label}</span>
+      {children}
+      {hint && (
+        <span className="sans dim" style={{ display: 'block', fontSize: '0.78rem', marginTop: 4 }}>
+          {hint}
+        </span>
+      )}
+    </label>
+  )
+}
+
+export function TextField({ label, hint, value, onChange, placeholder, maxLength }) {
+  return (
+    <Field label={label} hint={hint}>
+      <input
+        type="text"
+        className="input"
+        value={value ?? ''}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </Field>
+  )
+}
+
+export function TextAreaField({ label, hint, value, onChange, placeholder, rows = 4, maxLength }) {
+  return (
+    <Field label={label} hint={hint}>
+      <textarea
+        className="input"
+        rows={rows}
+        value={value ?? ''}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ resize: 'vertical', fontFamily: 'inherit' }}
+      />
+    </Field>
+  )
+}
+
+// options: array of [value, label] tuples.
+export function SelectField({ label, hint, value, onChange, options }) {
+  return (
+    <Field label={label} hint={hint}>
+      <select className="select" value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
+        {options.map(([v, l]) => (
+          <option key={v} value={v}>
+            {l}
+          </option>
+        ))}
+      </select>
+    </Field>
+  )
+}

client/src/blocks/index.js

@@ -0,0 +1,19 @@
+// Client block registry entrypoint. Importing this module registers every
+// browser-side block definition (renderer + editor + palette entry) exactly
+// once, then re-exports the registry API. The page builder and the public page
+// renderer should import from HERE, not ./registry, so the definitions are
+// loaded before anything reads the registry.
+//
+// Wave 1 definitions are registered below as each block is built (spec build
+// order step 3), one import per block.
+
+export * from './registry'
+
+// ── Wave 1 block definitions (self-register on import) ─────────────────
+import './types/heading.jsx'
+import './types/richText.jsx'
+import './types/image.jsx'
+import './types/twoColumn.jsx'
+import './types/cta.jsx'
+import './types/divider.jsx'
+import './types/quote.jsx'

client/src/blocks/registry.js

@@ -0,0 +1,84 @@
+// Block registry (client side) — mirrors the server registry
+// (server/src/blocks/registry.js) but carries the browser-only concerns: the
+// React renderer, the admin edit form, and the palette icon/label. The page
+// builder's palette, drag-reorder canvas, per-block edit panel, and the public
+// page renderer all read from this registry, so adding a block later is one
+// entry here (plus its server-side schema entry) rather than edits scattered
+// across the builder and renderer.
+//
+// A registered definition looks like:
+//   {
+//     type: 'heading',       // must match the server registry type
+//     version: 1,            // must match the server schema version
+//     label: 'Heading',      // palette display name
+//     icon: 'heading',       // palette icon key
+//     component: HeadingBlock,   // renderer: (props) => JSX
+//     editor: HeadingEditor,     // admin edit form: ({ props, onChange }) => JSX
+//     defaults: () => ({ ... }), // starting props when a block is added
+//     container: false,          // true only for two_column
+//     containerSlots: [],        // ['left','right'] for two_column
+//   }
+//
+// This module only defines the pattern; Wave 1 definitions register via
+// ./index.js as each block is built (spec build order step 3).
+
+const registry = new Map()
+
+// Kept in sync with the server's RESERVED_KEYS — the only top-level keys on a
+// stored block object. Exported so the builder can construct envelopes without
+// hard-coding the shape.
+export const RESERVED_KEYS = ['id', 'type', 'version', 'visible', 'props']
+
+/**
+ * Register a block definition. Throws on a duplicate type — a programmer error
+ * caught at module load, not runtime.
+ * @param {object} def
+ * @returns {object} the stored definition
+ */
+export function registerBlock(def) {
+  if (!def || typeof def.type !== 'string' || def.type.length === 0) {
+    throw new Error('registerBlock: a block definition needs a string `type`')
+  }
+  if (registry.has(def.type)) {
+    throw new Error(`registerBlock: block type already registered: ${def.type}`)
+  }
+  const entry = {
+    type: def.type,
+    version: Number.isInteger(def.version) ? def.version : 1,
+    label: def.label || def.type,
+    icon: def.icon || null,
+    component: def.component || null,
+    editor: def.editor || null,
+    defaults: typeof def.defaults === 'function' ? def.defaults : () => ({}),
+    container: Boolean(def.container),
+    containerSlots: def.containerSlots ? [...def.containerSlots] : [],
+  }
+  registry.set(entry.type, entry)
+  return entry
+}
+
+/** @returns {object|null} the definition for `type`, or null if unknown. */
+export function getBlock(type) {
+  return registry.get(type) || null
+}
+
+/** @returns {boolean} whether `type` is a registered block. */
+export function hasBlock(type) {
+  return registry.has(type)
+}
+
+/** @returns {object[]} all registered definitions (registration order). */
+export function listBlocks() {
+  return [...registry.values()]
+}
+
+/**
+ * Generate a stable block id. Called once when a block is added to the canvas;
+ * never derived from array position, so a reorder keeps ids intact (they are the
+ * React key and the future revision-history join point).
+ * @returns {string}
+ */
+export function makeBlockId() {
+  const rand = Math.random().toString(36).slice(2, 8).toUpperCase()
+  return `b_${rand}`
+}

client/src/blocks/types/cta.jsx

@@ -0,0 +1,63 @@
+// cta block — a call-to-action button/link. Renders as an anchor styled with the
+// existing button system (primary / secondary).
+import { registerBlock } from '../registry'
+import { SelectField, TextField } from '../editorKit.jsx'
+
+const STYLES = [
+  ['primary', 'Primary'],
+  ['secondary', 'Secondary'],
+]
+
+function CtaBlock({ props }) {
+  if (!props.url || !props.text) return null
+  const style = props.style === 'secondary' ? 'secondary' : 'primary'
+  // External links get a safe rel; same-origin relative links don't need it.
+  const external = /^https?:\/\//i.test(props.url)
+  return (
+    <div className="page-cta-wrap">
+      <a
+        className={`btn btn-sq page-cta page-cta--${style}`}
+        href={props.url}
+        {...(external ? { rel: 'noopener noreferrer nofollow' } : {})}
+      >
+        {props.text}
+      </a>
+    </div>
+  )
+}
+
+function CtaEditor({ props, onChange }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <TextField
+        label="Button text"
+        value={props.text}
+        maxLength={100}
+        onChange={(text) => onChange({ ...props, text })}
+      />
+      <TextField
+        label="URL"
+        hint="A full https:// link or a same-site path like /wiki/getting-started."
+        value={props.url}
+        placeholder="https://…"
+        onChange={(url) => onChange({ ...props, url })}
+      />
+      <SelectField
+        label="Style"
+        value={props.style || 'primary'}
+        onChange={(style) => onChange({ ...props, style })}
+        options={STYLES}
+      />
+    </div>
+  )
+}
+
+registerBlock({
+  type: 'cta',
+  version: 1,
+  label: 'Button',
+  icon: '⇥',
+  component: CtaBlock,
+  editor: CtaEditor,
+  defaults: () => ({ text: '', url: '', style: 'primary' }),
+})

client/src/blocks/types/divider.jsx

@@ -0,0 +1,25 @@
+// divider block — a pure spacer / horizontal rule. No props, so its editor is
+// just a note.
+import { registerBlock } from '../registry'
+
+function DividerBlock() {
+  return <hr className="page-divider" />
+}
+
+function DividerEditor() {
+  return (
+    <p className="sans dim" style={{ margin: 0, fontSize: '0.85rem' }}>
+      A divider has no options — it adds a horizontal rule and spacing.
+    </p>
+  )
+}
+
+registerBlock({
+  type: 'divider',
+  version: 1,
+  label: 'Divider',
+  icon: '—',
+  component: DividerBlock,
+  editor: DividerEditor,
+  defaults: () => ({}),
+})

client/src/blocks/types/heading.jsx

@@ -0,0 +1,46 @@
+// heading block — plain-text section heading (h1–h4). Text is rendered as text
+// (React escapes it); use rich_text for inline markup.
+import { registerBlock } from '../registry'
+import { SelectField, TextField } from '../editorKit.jsx'
+
+const LEVELS = [
+  ['h1', 'Heading 1'],
+  ['h2', 'Heading 2'],
+  ['h3', 'Heading 3'],
+  ['h4', 'Heading 4'],
+]
+const VALID = ['h1', 'h2', 'h3', 'h4']
+
+function HeadingBlock({ props }) {
+  const Tag = VALID.includes(props.level) ? props.level : 'h2'
+  return <Tag className="page-heading">{props.text}</Tag>
+}
+
+function HeadingEditor({ props, onChange }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <SelectField
+        label="Level"
+        value={props.level || 'h2'}
+        onChange={(level) => onChange({ ...props, level })}
+        options={LEVELS}
+      />
+      <TextField
+        label="Text"
+        value={props.text}
+        maxLength={200}
+        onChange={(text) => onChange({ ...props, text })}
+      />
+    </div>
+  )
+}
+
+registerBlock({
+  type: 'heading',
+  version: 1,
+  label: 'Heading',
+  icon: 'H',
+  component: HeadingBlock,
+  editor: HeadingEditor,
+  defaults: () => ({ level: 'h2', text: '' }),
+})

client/src/blocks/types/image.jsx

@@ -0,0 +1,100 @@
+// image block — a single image with optional caption and alignment. Upload
+// reuses the shared admin uploader (returns { url }); the block stays URL-based
+// until the Wave 3 asset picker lands.
+import { useState } from 'react'
+import { registerBlock } from '../registry'
+import { api } from '../../api/client.js'
+import { SelectField, TextField } from '../editorKit.jsx'
+
+const ALIGN = [
+  ['left', 'Left'],
+  ['center', 'Center'],
+  ['right', 'Right'],
+  ['full', 'Full width'],
+]
+const VALID = ['left', 'center', 'right', 'full']
+
+function ImageBlock({ props }) {
+  if (!props.src) return null
+  const align = VALID.includes(props.alignment) ? props.alignment : 'center'
+  return (
+    <figure className={`page-image page-image--${align}`}>
+      <img src={props.src} alt={props.alt || ''} />
+      {props.caption && <figcaption>{props.caption}</figcaption>}
+    </figure>
+  )
+}
+
+function ImageEditor({ props, onChange }) {
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState('')
+
+  async function onUpload(e) {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file) return
+    setUploading(true)
+    setError('')
+    try {
+      const { url } = await api.admin.upload(file)
+      onChange({ ...props, src: url })
+    } catch (err) {
+      setError(err.message || 'Upload failed')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div>
+        <span className="field-label">Image</span>
+        <input
+          type="file"
+          accept="image/*"
+          onChange={onUpload}
+          className="sans"
+          style={{ color: 'var(--muted)', fontSize: '0.85rem', display: 'block' }}
+        />
+        {uploading && <span className="sans dim" style={{ fontSize: '0.8rem' }}> uploading…</span>}
+        {error && <span className="sans" style={{ fontSize: '0.8rem', color: '#d98b84' }}>{error}</span>}
+        {props.src && (
+          <img
+            src={props.src}
+            alt=""
+            style={{ display: 'block', marginTop: 10, maxWidth: '100%', borderRadius: 8, border: '1px solid var(--line)' }}
+          />
+        )}
+      </div>
+      <TextField
+        label="Alt text"
+        hint="Describes the image for screen readers and when it fails to load."
+        value={props.alt}
+        maxLength={300}
+        onChange={(alt) => onChange({ ...props, alt })}
+      />
+      <TextField
+        label="Caption (optional)"
+        value={props.caption}
+        maxLength={500}
+        onChange={(caption) => onChange({ ...props, caption })}
+      />
+      <SelectField
+        label="Alignment"
+        value={props.alignment || 'center'}
+        onChange={(alignment) => onChange({ ...props, alignment })}
+        options={ALIGN}
+      />
+    </div>
+  )
+}
+
+registerBlock({
+  type: 'image',
+  version: 1,
+  label: 'Image',
+  icon: '🖼',
+  component: ImageBlock,
+  editor: ImageEditor,
+  defaults: () => ({ src: '', alt: '', caption: '', alignment: 'center' }),
+})

client/src/blocks/types/quote.jsx

@@ -0,0 +1,43 @@
+// quote block — a pull quote with optional attribution.
+import { registerBlock } from '../registry'
+import { TextAreaField, TextField } from '../editorKit.jsx'
+
+function QuoteBlock({ props }) {
+  if (!props.text) return null
+  return (
+    <figure className="page-quote">
+      <blockquote>{props.text}</blockquote>
+      {props.attribution && <figcaption>— {props.attribution}</figcaption>}
+    </figure>
+  )
+}
+
+function QuoteEditor({ props, onChange }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <TextAreaField
+        label="Quote"
+        value={props.text}
+        rows={3}
+        maxLength={1000}
+        onChange={(text) => onChange({ ...props, text })}
+      />
+      <TextField
+        label="Attribution (optional)"
+        value={props.attribution}
+        maxLength={200}
+        onChange={(attribution) => onChange({ ...props, attribution })}
+      />
+    </div>
+  )
+}
+
+registerBlock({
+  type: 'quote',
+  version: 1,
+  label: 'Quote',
+  icon: '❝',
+  component: QuoteBlock,
+  editor: QuoteEditor,
+  defaults: () => ({ text: '', attribution: '' }),
+})

client/src/blocks/types/richText.jsx

@@ -0,0 +1,39 @@
+// rich_text block — HTML from the shared rich-text editor. Rendered inside the
+// same `.prose` styling as wiki/news bodies, sanitized on render as defense in
+// depth (the server also sanitizes on save).
+import { lazy, Suspense } from 'react'
+import DOMPurify from 'dompurify'
+import { registerBlock } from '../registry'
+
+const RichTextEditor = lazy(() => import('../../components/RichTextEditor.jsx'))
+
+function RichTextBlock({ props }) {
+  return (
+    <div
+      className="prose page-rich-text"
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(props.html || '') }}
+    />
+  )
+}
+
+function RichTextEditorForm({ props, onChange }) {
+  return (
+    <Suspense fallback={<span className="spin" />}>
+      <RichTextEditor
+        value={props.html || ''}
+        onChange={(html) => onChange({ ...props, html })}
+        variant="post"
+      />
+    </Suspense>
+  )
+}
+
+registerBlock({
+  type: 'rich_text',
+  version: 1,
+  label: 'Rich text',
+  icon: '¶',
+  component: RichTextBlock,
+  editor: RichTextEditorForm,
+  defaults: () => ({ html: '' }),
+})

client/src/blocks/types/twoColumn.jsx

@@ -0,0 +1,120 @@
+// two_column block — the only container. Holds two ordered arrays of sub-blocks
+// (`left`, `right`). Sub-blocks are leaf blocks only (no nested containers — the
+// one-level cap the server also enforces), so the column editor's palette is the
+// set of non-container registered blocks.
+import { registerBlock, getBlock, listBlocks, makeBlockId } from '../registry'
+import BlockRenderer from '../BlockRenderer.jsx'
+
+// ── Renderer ──────────────────────────────────────────────────────────
+function TwoColumnBlock({ props }) {
+  const left = Array.isArray(props.left) ? props.left : []
+  const right = Array.isArray(props.right) ? props.right : []
+  return (
+    <div className="page-two-column">
+      <div className="page-column">
+        {left.map((b) => (
+          <BlockRenderer key={b.id} block={b} />
+        ))}
+      </div>
+      <div className="page-column">
+        {right.map((b) => (
+          <BlockRenderer key={b.id} block={b} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ── Column editor ─────────────────────────────────────────────────────
+// Manages one side's array: add (from the leaf palette), edit each via its own
+// registry editor, reorder, remove.
+function ColumnEditor({ title, items, onChange }) {
+  const list = Array.isArray(items) ? items : []
+  const palette = listBlocks().filter((b) => !b.container)
+
+  function addBlock(type) {
+    const def = getBlock(type)
+    if (!def) return
+    const block = { id: makeBlockId(), type, version: def.version, visible: true, props: def.defaults() }
+    onChange([...list, block])
+  }
+  function updateAt(i, nextProps) {
+    onChange(list.map((b, j) => (j === i ? { ...b, props: nextProps } : b)))
+  }
+  function removeAt(i) {
+    onChange(list.filter((_, j) => j !== i))
+  }
+  function move(i, dir) {
+    const j = i + dir
+    if (j < 0 || j >= list.length) return
+    const next = [...list]
+    ;[next[i], next[j]] = [next[j], next[i]]
+    onChange(next)
+  }
+
+  return (
+    <div className="pb-column-editor">
+      <div className="pb-column-head">
+        <span className="field-label" style={{ margin: 0 }}>{title}</span>
+        <select
+          className="select pb-add-select"
+          value=""
+          onChange={(e) => {
+            if (e.target.value) addBlock(e.target.value)
+            e.target.value = ''
+          }}
+        >
+          <option value="">+ Add block…</option>
+          {palette.map((b) => (
+            <option key={b.type} value={b.type}>
+              {b.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {list.length === 0 && (
+        <p className="sans dim" style={{ fontSize: '0.8rem', margin: '4px 0' }}>Empty column.</p>
+      )}
+
+      {list.map((block, i) => {
+        const def = getBlock(block.type)
+        const Editor = def?.editor
+        return (
+          <div key={block.id} className="pb-subblock">
+            <div className="pb-subblock-head">
+              <span className="sans dim" style={{ fontSize: '0.78rem' }}>{def?.label || block.type}</span>
+              <div className="pb-subblock-actions">
+                <button type="button" className="pill pb-mini" disabled={i === 0} onClick={() => move(i, -1)} title="Move up">↑</button>
+                <button type="button" className="pill pb-mini" disabled={i === list.length - 1} onClick={() => move(i, 1)} title="Move down">↓</button>
+                <button type="button" className="pill pb-mini" onClick={() => removeAt(i)} title="Remove">✕</button>
+              </div>
+            </div>
+            {Editor && <Editor props={block.props || {}} onChange={(p) => updateAt(i, p)} />}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function TwoColumnEditor({ props, onChange }) {
+  return (
+    <div className="pb-two-column-editor">
+      <ColumnEditor title="Left column" items={props.left} onChange={(left) => onChange({ ...props, left })} />
+      <ColumnEditor title="Right column" items={props.right} onChange={(right) => onChange({ ...props, right })} />
+    </div>
+  )
+}
+
+registerBlock({
+  type: 'two_column',
+  version: 1,
+  label: 'Two columns',
+  icon: '▥',
+  component: TwoColumnBlock,
+  editor: TwoColumnEditor,
+  defaults: () => ({ left: [], right: [] }),
+  container: true,
+  containerSlots: ['left', 'right'],
+})

client/src/components/CharacterSheet.jsx

@@ -0,0 +1,202 @@
+// Reusable character-sheet renderer for the char.profile shape returned by
+// /public/shard/char/:serial. Presentational only — the parent handles loading
+// and errors. Styled with the shared theme vocabulary (panel/grid/stat tiles).
+//
+// `moderation` opts in the in-game kick/ban controls for the character's account;
+// they self-gate to staff (ShardAccountActions), so passing it from a page a
+// player can reach is safe.
+
+import ShardAccountActions from './ShardAccountActions.jsx'
+
+const RESIST_LABELS = { phys: 'Physical', fire: 'Fire', cold: 'Cold', pois: 'Poison', energy: 'Energy' }
+
+// The char.profile `titles` block (Protocol 2.0). fameKarma/skill are already
+// computed display strings; reward entries may be a cliloc NUMBER-as-string or a
+// literal string. Without a cliloc table on the site we can only show literals, so
+// numeric reward entries are skipped rather than shown as a raw number. Returns a
+// de-duped list of human-readable title chips.
+function displayTitles(titles) {
+  if (!titles) return []
+  const out = []
+  if (titles.fameKarma) out.push(titles.fameKarma)
+  if (titles.skill) out.push(titles.skill)
+  const reward = Array.isArray(titles.reward) ? titles.reward : []
+  const sel = typeof titles.selected === 'number' ? titles.selected : -1
+  // Prefer the selected reward title; fall back to the first literal one.
+  const candidate = sel >= 0 && sel < reward.length ? reward[sel] : reward.find((r) => r && !/^\d+$/.test(String(r)))
+  if (candidate && !/^\d+$/.test(String(candidate))) out.push(String(candidate))
+  return [...new Set(out.filter(Boolean))]
+}
+
+function TitleChip({ children, tone = 'var(--muted)' }) {
+  return (
+    <span
+      className="sans"
+      style={{
+        fontSize: '0.72rem', padding: '3px 9px', borderRadius: 999,
+        border: `1px solid ${tone}55`, color: tone, whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function StatTile({ value, label }) {
+  return (
+    <div className="panel" style={{ padding: '14px 12px', textAlign: 'center' }}>
+      <div className="display" style={{ fontSize: '1.35rem', color: 'var(--head)' }}>{value}</div>
+      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.64rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{label}</div>
+    </div>
+  )
+}
+
+function Vital({ label, cur, max }) {
+  const pct = max ? Math.min(100, Math.round((cur / max) * 100)) : 0
+  return (
+    <div className="panel" style={{ padding: '12px 14px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
+        <span className="sans" style={{ color: 'var(--accent)', fontSize: '0.64rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{label}</span>
+        <span className="display" style={{ color: 'var(--head)', fontSize: '0.95rem' }}>{cur ?? '—'}<span className="dim" style={{ fontSize: '0.8rem' }}> / {max ?? '—'}</span></span>
+      </div>
+      <div style={{ height: 6, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
+        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)' }} />
+      </div>
+    </div>
+  )
+}
+
+export default function CharacterSheet({ char, moderation = false }) {
+  if (!char) return null
+  const stats = char.stats || {}
+  const resist = stats.resist || {}
+  // Skills the character actually has, best first.
+  const skills = (char.skills || [])
+    .filter((s) => (s.value || s.base || 0) > 0)
+    .sort((a, b) => (b.value || 0) - (a.value || 0))
+  const equipment = char.equipment || []
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
+      {/* Identity */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
+        <h2 className="display" style={{ margin: 0, fontSize: '1.6rem', color: 'var(--head)' }}>{char.name || 'Unknown'}</h2>
+        {char.title && <span className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem' }}>{char.title}</span>}
+        <span
+          className="sans"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999,
+            border: '1px solid var(--line)', fontSize: '0.74rem',
+            color: char.online ? '#7fd0a4' : 'var(--muted)',
+          }}
+        >
+          <span style={{ width: 8, height: 8, borderRadius: '50%', background: char.online ? '#7fd0a4' : 'var(--dim)' }} />
+          {char.online ? 'Online' : 'Offline'}
+        </span>
+        <span className="sans dim" style={{ fontSize: '0.76rem', marginLeft: 'auto' }}>{char.serial}</span>
+      </div>
+
+      {/* Titles + standing (guild led / governorship) — all optional */}
+      {(displayTitles(char.titles).length > 0 || char.guild || (char.governorOf && char.governorOf.length > 0)) && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: -8 }}>
+          {char.governorOf && char.governorOf.map((city) => (
+            <TitleChip key={`gov-${city}`} tone="#c9a24b">Governor of {city}</TitleChip>
+          ))}
+          {char.guild && (
+            <TitleChip tone="var(--accent)">
+              Guildmaster{char.guild.abbr ? `, [${char.guild.abbr}]` : ''} {char.guild.name}
+            </TitleChip>
+          )}
+          {displayTitles(char.titles).map((t) => <TitleChip key={t}>{t}</TitleChip>)}
+        </div>
+      )}
+
+      {/* Staff moderation for this character's account (self-gates to staff). */}
+      {moderation && char.acct && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '12px 14px', border: '1px solid var(--line-soft)', borderRadius: 10, background: 'rgba(255,255,255,0.02)' }}>
+          <span className="sans dim" style={{ fontSize: '0.76rem' }}>Account <strong style={{ color: 'var(--ink)' }}>{char.acct}</strong></span>
+          <ShardAccountActions account={char.acct} />
+        </div>
+      )}
+
+      {/* Core stats */}
+      <section>
+        <div className="field-label" style={{ marginBottom: 8 }}>Attributes</div>
+        <div className="grid-3" style={{ gap: 12 }}>
+          <StatTile value={stats.str ?? '—'} label="Strength" />
+          <StatTile value={stats.dex ?? '—'} label="Dexterity" />
+          <StatTile value={stats.int ?? '—'} label="Intelligence" />
+        </div>
+        <div className="grid-3" style={{ gap: 12, marginTop: 12 }}>
+          <Vital label="Hits" cur={stats.hits} max={stats.hitsMax} />
+          <Vital label="Mana" cur={stats.mana} max={stats.manaMax} />
+          <Vital label="Stamina" cur={stats.stam} max={stats.stamMax} />
+        </div>
+      </section>
+
+      {/* Resistances */}
+      {Object.keys(resist).length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Resistances</div>
+          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+            {['phys', 'fire', 'cold', 'pois', 'energy'].map((k) => (
+              <div key={k} className="panel" style={{ padding: '10px 16px', textAlign: 'center', minWidth: 84 }}>
+                <div className="display" style={{ color: 'var(--head)', fontSize: '1.1rem' }}>{resist[k] ?? 0}</div>
+                <div className="sans" style={{ color: 'var(--muted)', fontSize: '0.66rem', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{RESIST_LABELS[k]}</div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Skills */}
+      {skills.length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Skills <span className="dim">({skills.length})</span></div>
+          <div className="grid-2" style={{ gap: '8px 18px' }}>
+            {skills.map((s) => {
+              const cap = s.cap || 100
+              const pct = Math.min(100, Math.round(((s.value || 0) / cap) * 100))
+              return (
+                <div key={s.n}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 3 }}>
+                    <span className="sans" style={{ color: 'var(--ink)', fontSize: '0.86rem' }}>{s.n}</span>
+                    <span className="sans" style={{ color: 'var(--head)', fontSize: '0.82rem' }}>{s.value}</span>
+                  </div>
+                  <div style={{ height: 4, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
+                    <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)' }} />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Equipment */}
+      {equipment.length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Equipment</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {equipment.map((it) => (
+              <div key={it.serial} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8 }}>
+                <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 5, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.05)' }} />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div className="sans" style={{ color: 'var(--head)', fontSize: '0.88rem' }}>{it.layer || 'Item'}</div>
+                  <div className="sans dim" style={{ fontSize: '0.74rem' }}>id {it.itemId}{it.hue ? ` · hue ${it.hue}` : ''}</div>
+                </div>
+                {it.mods && Object.keys(it.mods).length > 0 && (
+                  <div className="sans" style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: '55%' }}>
+                    {Object.entries(it.mods).map(([k, v]) => (
+                      <span key={k} className="pill" style={{ fontSize: '0.7rem', padding: '2px 8px' }}>{k} {v}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}

client/src/components/CharacterStats.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react'
+
+// A small stat-tile row for a "My Characters" page: total characters, how many
+// are online right now, and how many game accounts are linked. `scope` is the
+// shard api object (admin or player self-service). Renders nothing until an
+// account is linked, so the empty/link-prompt state below it stands alone.
+//
+// It fetches the same rosters GameAccounts loads; for a personal page that's at
+// most a couple of extra live round-trips, and keeps this presentational bit
+// decoupled from GameAccounts' per-account roster loading.
+
+function Tile({ value, label }) {
+  return (
+    <div className="panel" style={{ padding: 20, textAlign: 'center' }}>
+      <div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>{value}</div>
+      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8 }}>
+        {label}
+      </div>
+    </div>
+  )
+}
+
+// Fold the settled roster results into totals. `complete` is false when any
+// account's roster failed (a partial result — shown as a dash rather than a
+// misleadingly low count).
+function summarizeRosters(rosters) {
+  let chars = 0
+  let online = 0
+  let complete = true
+  for (const r of rosters) {
+    if (r.status !== 'fulfilled') {
+      complete = false
+      continue
+    }
+    const cs = r.value.chars || []
+    chars += cs.length
+    online += cs.filter((c) => c.online).length
+  }
+  return { chars, online, complete }
+}
+
+export default function CharacterStats({ scope }) {
+  const [stats, setStats] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const accounts = await scope.accounts()
+        const linked = accounts.length
+        if (linked === 0) {
+          if (!cancelled) setStats({ linked: 0 })
+          return
+        }
+        // Roster is a live round-trip and can be unavailable (503); tolerate a
+        // partial result so a restarting shard doesn't blank the whole row.
+        const rosters = await Promise.allSettled(accounts.map((a) => scope.roster(a.account)))
+        if (!cancelled) setStats({ linked, ...summarizeRosters(rosters) })
+      } catch {
+        if (!cancelled) setStats({ error: true })
+      }
+    })()
+    return () => { cancelled = true }
+  }, [scope])
+
+  // Hidden until we know an account is linked (or while first loading).
+  if (!stats || stats.error || stats.linked === 0) return null
+
+  // Counts depend on live rosters; show a dash if none came back.
+  const count = (n) => (stats.complete || stats.chars > 0 ? n : '—')
+
+  return (
+    <section className="grid-3" style={{ gap: 14, marginBottom: 26 }}>
+      <Tile value={count(stats.chars)} label="Characters" />
+      <Tile value={count(stats.online)} label="Online now" />
+      <Tile value={stats.linked} label={stats.linked === 1 ? 'Linked account' : 'Linked accounts'} />
+    </section>
+  )
+}

client/src/components/CreateGameAccountForm.jsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+
+// Reusable "create a game account" form (its own username + password — the game
+// client credentials, distinct from the website login). Calls `submit(account,
+// password)` which should POST /player/shard/account; on success calls onCreated.
+// Used by the player portal (self-serve) and the invite-accept page alike.
+export default function CreateGameAccountForm({ submit, onCreated, compact = false }) {
+  const [account, setAccount] = useState('')
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    setMsg(''); setError('')
+    if (!/^[A-Za-z0-9][A-Za-z0-9_.-]{2,29}$/.test(account)) {
+      return setError('Account name must be 3–30 letters, numbers, . _ or -.')
+    }
+    if (password.length < 8) return setError('Password must be at least 8 characters.')
+    setBusy(true)
+    try {
+      await submit(account, password)
+      setMsg(`Game account “${account}” created and linked.`)
+      setAccount(''); setPassword('')
+      if (onCreated) await onCreated()
+    } catch (err) {
+      if (err.status === 409) setError('That account name is already taken.')
+      else if (err.status === 429) setError('The account limit for your network has been reached.')
+      else if (err.status === 403) setError('Game-account signup is not available right now.')
+      else if (err.status === 503) setError('The game server is unavailable — try again shortly.')
+      else setError(err.message || 'Could not create the account right now.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      {!compact && (
+        <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+          Choose the username and password you’ll type into the game client. These are your
+          <strong style={{ color: 'var(--head)' }}> game</strong> credentials — separate from your website login.
+        </p>
+      )}
+      <label style={{ display: 'block', marginBottom: 14 }}>
+        <span className="field-label">Game account name</span>
+        <input
+          type="text" autoComplete="off" value={account}
+          onChange={(e) => setAccount(e.target.value)} className="input" placeholder="e.g. darrow"
+        />
+      </label>
+      <label style={{ display: 'block', marginBottom: 16 }}>
+        <span className="field-label">Game password</span>
+        <input
+          type="password" autoComplete="new-password" value={password}
+          onChange={(e) => setPassword(e.target.value)} className="input"
+        />
+      </label>
+
+      {error && <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
+      {msg && <p className="sans" style={{ margin: '0 0 12px', color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</p>}
+
+      <button type="submit" disabled={busy} className="btn btn-primary btn-sq">
+        {busy ? 'Creating…' : 'Create game account'}
+      </button>
+    </form>
+  )
+}

client/src/components/GameAccounts.jsx

@@ -0,0 +1,231 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Loading, ErrorState } from './PageState.jsx'
+import ShardAccountActions from './ShardAccountActions.jsx'
+import CreateGameAccountForm from './CreateGameAccountForm.jsx'
+import { api } from '../api/client.js'
+
+// Shared game-account linking + character roster, used by both the player portal
+// (/player) and the staff account page (/admin/account). `scope` is the api
+// object with { link, accounts, roster } (player or admin self-service); `charTo`
+// maps a serial to the route for that character's sheet. `readOnly` drops the
+// link forms and self-voice copy for the admin case where staff view *another*
+// user's accounts (no `scope.link`) at /admin/users/:id.
+
+function LinkForm({ scope, onLinked, compact }) {
+  const [code, setCode] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function submit(e) {
+    e.preventDefault()
+    setMsg(''); setError('')
+    if (!code.trim()) return
+    setBusy(true)
+    try {
+      const { account } = await scope.link(code.trim())
+      setMsg(`Linked ${account}.`)
+      setCode('')
+      await onLinked()
+    } catch (err) {
+      setError(err.message || 'Could not link that code.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form onSubmit={submit} style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap', marginTop: compact ? 0 : 6 }}>
+      <label style={{ display: 'block' }}>
+        {!compact && <span className="field-label">Link code</span>}
+        <input
+          type="text"
+          value={code}
+          onChange={(e) => setCode(e.target.value.toUpperCase())}
+          className="input"
+          autoComplete="off"
+          placeholder="AB12CD"
+          style={{ maxWidth: 180, textTransform: 'uppercase', letterSpacing: '0.12em' }}
+        />
+      </label>
+      <button type="submit" disabled={busy || !code.trim()} className="btn btn-primary btn-sq">
+        {busy ? 'Linking…' : 'Link account'}
+      </button>
+      {msg && <span className="sans" style={{ color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</span>}
+      {error && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{error}</span>}
+    </form>
+  )
+}
+
+function AccountRoster({ scope, account, charTo }) {
+  const [roster, setRoster] = useState(null)
+  const [error, setError] = useState('')
+  const [unavailable, setUnavailable] = useState(false)
+
+  const load = useCallback(async () => {
+    setError(''); setUnavailable(false)
+    try {
+      setRoster(await scope.roster(account))
+    } catch (err) {
+      if (err.status === 503) setUnavailable(true)
+      else setError(err.message || 'Could not load this account.')
+    }
+  }, [scope, account])
+  useEffect(() => { load() }, [load])
+
+  if (unavailable) {
+    return (
+      <div>
+        <p className="sans" style={{ margin: '0 0 8px', color: '#e0b070', fontSize: '0.85rem' }}>The game server is restarting — try again shortly.</p>
+        <button className="pill" onClick={load}>Retry</button>
+      </div>
+    )
+  }
+  if (error) return <p className="sans" style={{ margin: 0, color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>
+  if (!roster) return <p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>Loading…</p>
+
+  const chars = roster.chars || []
+  if (chars.length === 0) return <p className="sans dim" style={{ margin: 0, fontSize: '0.84rem' }}>No characters on this account.</p>
+
+  return (
+    <div className="grid-2" style={{ gap: 12 }}>
+      {chars.map((c) => (
+        <Link
+          key={c.serial}
+          to={charTo(c.serial)}
+          style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', border: '1px solid var(--line)', borderRadius: 10, textDecoration: 'none', background: 'rgba(255,255,255,0.02)' }}
+        >
+          <span style={{ flex: 'none', width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(180deg,#2a3a52,#1a2536)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#d8e2ef', fontSize: '1rem', textTransform: 'uppercase' }}>
+            {(c.name || '?').charAt(0)}
+          </span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="display" style={{ color: 'var(--head)', fontSize: '1.02rem' }}>{c.name}</div>
+            <div className="sans" style={{ fontSize: '0.76rem', color: c.online ? '#7fd0a4' : 'var(--muted)' }}>{c.online ? 'Online' : 'Offline'}</div>
+          </div>
+          <span className="sans dim" style={{ fontSize: '1.1rem' }}>›</span>
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+// Compact per-account "Unlink" button for the admin (readOnly) view. Confirms,
+// then calls onUnlink(account) and reloads. Errors surface inline.
+function UnlinkButton({ account, onUnlink }) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  async function go() {
+    if (!window.confirm(`Unlink game account “${account}” from this user? Attribution stops immediately.`)) return
+    setBusy(true); setError('')
+    try {
+      await onUnlink(account)
+    } catch (err) {
+      const byStatus = { 403: 'Protected account — refused.', 404: 'Not linked.' }
+      setError(byStatus[err.status] || err.message || 'Could not unlink.')
+      setBusy(false)
+    }
+  }
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+      <button type="button" onClick={go} disabled={busy} className="pill" style={{ fontSize: '0.72rem', color: '#d98b84', borderColor: '#5b2020' }}>
+        {busy ? 'Unlinking…' : 'Unlink'}
+      </button>
+      {error && <span className="sans" style={{ color: '#d98b84', fontSize: '0.76rem' }}>{error}</span>}
+    </span>
+  )
+}
+
+export default function GameAccounts({ scope, charTo, readOnly = false, moderation = false, onUnlink = null }) {
+  const [accounts, setAccounts] = useState(null)
+  const [error, setError] = useState('')
+  // Whether the site currently offers game-account creation (public flag). Only
+  // relevant for the self-service (non-readOnly) view with a createAccount scope.
+  const [signupOk, setSignupOk] = useState(false)
+
+  const load = useCallback(async () => {
+    setError('')
+    try {
+      setAccounts(await scope.accounts())
+    } catch {
+      setError(readOnly ? 'Could not load this user’s game accounts.' : 'Could not load your game accounts.')
+    }
+  }, [scope, readOnly])
+  useEffect(() => { load() }, [load])
+
+  useEffect(() => {
+    if (readOnly || !scope.createAccount) return
+    let active = true
+    api.publicSettings()
+      .then((s) => active && setSignupOk(Boolean(s?.gameAccountSignup)))
+      .catch(() => {})
+    return () => { active = false }
+  }, [readOnly, scope])
+
+  const canCreate = !readOnly && Boolean(scope.createAccount) && signupOk
+
+  if (error) return <ErrorState message={error} />
+  if (!accounts) return <Loading />
+
+  // No linked accounts. In read-only (admin viewing another user) this is just an
+  // empty state; otherwise it's the link-your-account prompt.
+  if (accounts.length === 0) {
+    if (readOnly) {
+      return (
+        <div className="panel" style={{ padding: 22 }}>
+          <p className="sans dim" style={{ margin: 0, fontSize: '0.88rem' }}>
+            This user has not linked a game account.
+          </p>
+        </div>
+      )
+    }
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div className="panel" style={{ padding: 22 }}>
+          <div className="field-label" style={{ marginBottom: 8 }}>Link your game account</div>
+          <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+            Already play? In game, type <code style={{ color: 'var(--head)' }}>[link</code> to get a
+            one-time code, then enter it below to see your characters, stats, skills and vendors here.
+          </p>
+          <LinkForm scope={scope} onLinked={load} />
+        </div>
+        {canCreate && (
+          <div className="panel" style={{ padding: 22 }}>
+            <div className="field-label" style={{ marginBottom: 8 }}>Create a new game account</div>
+            <CreateGameAccountForm submit={scope.createAccount} onCreated={load} />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Linked — characters grouped by account.
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
+      {accounts.map((a) => (
+        <section key={a.account}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
+            <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
+              {a.account}
+            </div>
+            {onUnlink && <UnlinkButton account={a.account} onUnlink={async (acct) => { await onUnlink(acct); await load() }} />}
+          </div>
+          {moderation && <ShardAccountActions account={a.account} style={{ marginBottom: 12 }} />}
+          <AccountRoster scope={scope} account={a.account} charTo={charTo} />
+        </section>
+      ))}
+      {!readOnly && (
+        <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 20 }}>
+          <div className="field-label" style={{ marginBottom: 10 }}>Link another account</div>
+          <LinkForm scope={scope} onLinked={load} compact />
+          {canCreate && (
+            <div style={{ marginTop: 20 }}>
+              <div className="field-label" style={{ marginBottom: 10 }}>Create another game account</div>
+              <CreateGameAccountForm submit={scope.createAccount} onCreated={load} compact />
+            </div>
+          )}
+        </section>
+      )}
+    </div>
+  )
+}

client/src/components/HeroElement.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import DOMPurify from 'dompurify'
 
 const MOON_IMAGE = '/assets/img/hero-moon.png'
 
@@ -33,10 +34,23 @@ function TextBlock({ props }) {
   const align = props.align || 'center'
   return (
     <div style={{ textAlign: align, textShadow: '0 2px 22px rgba(0,0,0,0.82)' }}>
-      {(props.lines || []).map((line, i) => {
-        const Tag = /^(h1|h2|h3|p|span)$/.test(line.tag) ? line.tag : 'p'
+      {(props.lines || []).map((line) => {
+        const Tag = /^(h1|h2|h3|p|span|div)$/.test(line.tag) ? line.tag : 'p'
+        const key = `${line.tag}:${(line.text || '').slice(0, 40)}`
+        // A rich-text line (e.g. the homepage teaser) carries sanitized HTML;
+        // sanitize again on render as defense in depth. Others render as text.
+        if (line.html) {
           return (
-          <Tag key={i} style={lineStyle(line)}>
+            <Tag
+              key={key}
+              className="hero-rich"
+              style={lineStyle(line)}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(line.text || '') }}
+            />
+          )
+        }
+        return (
+          <Tag key={key} style={lineStyle(line)}>
             {line.text}
           </Tag>
         )
@@ -46,11 +60,11 @@ function TextBlock({ props }) {
 }
 
 function Buttons({ props }) {
-  const justify = props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : 'center'
+  const justify = { left: 'flex-start', right: 'flex-end' }[props.align] || 'center'
   return (
     <div style={{ display: 'flex', flexWrap: 'wrap', gap: props.gap ?? 12, justifyContent: justify }}>
-      {(props.items || []).map((b, i) => (
-        <Link key={i} to={b.to || '#'} className={`btn ${b.variant === 'ghost' ? 'btn-ghost' : 'btn-primary'}`}>
+      {(props.items || []).map((b) => (
+        <Link key={`${b.to || ''}:${b.label || ''}`} to={b.to || '#'} className={`btn ${b.variant === 'ghost' ? 'btn-ghost' : 'btn-primary'}`}>
           {b.label}
         </Link>
       ))}
@@ -147,12 +161,7 @@ export default function HeroElement({
   children,
 }) {
   const anchor = element.anchor || 'center'
-  const transform =
-    anchor === 'center'
-      ? 'translate(-50%, -50%)'
-      : anchor === 'top-right'
-        ? 'translateX(-100%)'
-        : undefined
+  const transform = { center: 'translate(-50%, -50%)', 'top-right': 'translateX(-100%)' }[anchor]
   // text_block/buttons may set a box width (px); kept within the containing block
   // (the hero section live, or the editor canvas) with small side gutters.
   const boxWidth =

client/src/components/PlayersOnline.jsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import { useAsync } from '../lib/useAsync.js'
+import { useShardFeed } from '../lib/useShardFeed.js'
+import { bucketize } from '../data/regionBuckets.js'
+import { api } from '../api/client.js'
+
+// Compact live "Players Online" widget. Loads the presence.online aggregate once,
+// then keeps the total + region breakdown current from the presence.online SSE
+// kind. The raw byRegion map is rolled up into display buckets (see
+// data/regionBuckets.js). NOT a page — drop it into any panel/column.
+const PRESENCE_KINDS = new Set(['presence.online'])
+
+export default function PlayersOnline() {
+  const { loading, error, data } = useAsync(() => api.shard.presence())
+  const { events } = useShardFeed({ filter: PRESENCE_KINDS, max: 4 })
+
+  // The freshest snapshot wins: the newest buffered presence.online event, else
+  // the initial fetch.
+  const snapshot = events[0] || data
+
+  const { total, rows } = useMemo(() => {
+    const count = Number(snapshot?.count) || 0
+    const { rows: bucketRows } = bucketize(snapshot?.byRegion)
+    return { total: count, rows: bucketRows }
+  }, [snapshot])
+
+  return (
+    <section className="panel" style={{ padding: 20 }}>
+      <div
+        className="sans"
+        style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}
+      >
+        <span
+          style={{
+            color: 'var(--accent)',
+            fontSize: '0.7rem',
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+          }}
+        >
+          Players online
+        </span>
+        <span className="display" style={{ fontSize: '1.5rem', color: 'var(--head)', lineHeight: 1 }}>
+          {loading ? '—' : total}
+        </span>
+      </div>
+
+      {error && (
+        <p className="sans dim" style={{ margin: '12px 0 0', fontSize: '0.84rem' }}>
+          Population is unavailable right now.
+        </p>
+      )}
+
+      {!loading && !error && (
+        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {rows.length === 0 ? (
+            <p className="sans dim" style={{ margin: 0, fontSize: '0.84rem' }}>
+              {total > 0 ? 'Locations are settling…' : 'The realm is quiet.'}
+            </p>
+          ) : (
+            rows.map((r) => (
+              <div
+                key={r.id}
+                className="sans"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: 12,
+                  fontSize: '0.9rem',
+                  color: 'var(--ink)',
+                }}
+              >
+                <span>{r.label}</span>
+                {/* tabular figures keep the right-aligned counts in a clean column */}
+                <span className="dim" style={{ fontVariantNumeric: 'tabular-nums' }}>{r.count}</span>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </section>
+  )
+}

client/src/components/RequireAuth.jsx

@@ -1,7 +1,9 @@
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext.jsx'
 
-// Gate for /admin/* — redirects to the login screen when not authenticated.
+// Gate for /admin/* — redirects to the login screen when not authenticated, and
+// bounces a signed-in player to their own portal (the admin API 403s them anyway;
+// this keeps the UI honest and mirrors RequirePlayer).
 export default function RequireAuth({ children }) {
   const { user, loading } = useAuth()
   const location = useLocation()
@@ -16,5 +18,8 @@ export default function RequireAuth({ children }) {
   if (!user) {
     return <Navigate to="/admin/login" state={{ from: location }} replace />
   }
+  if (user.role === 'player') {
+    return <Navigate to="/account" replace />
+  }
   return children
 }

client/src/components/RequirePlayer.jsx

@@ -0,0 +1,23 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext.jsx'
+
+// Gate for the /account player portal. Redirects to the player login when there
+// is no session, or when the signed-in user is not a player (staff manage their
+// own account under /admin/account). Server-side requireRole('player') is the
+// real enforcement; this just keeps the UI honest.
+export default function RequirePlayer({ children }) {
+  const { user, loading } = useAuth()
+  const location = useLocation()
+
+  if (loading) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: 'var(--bg-deep)' }}>
+        <span className="spin" />
+      </div>
+    )
+  }
+  if (!user || user.role !== 'player') {
+    return <Navigate to="/account/login" state={{ from: location }} replace />
+  }
+  return children
+}

client/src/components/RichTextEditor.jsx

@@ -3,6 +3,7 @@ import { useEditor, EditorContent } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
+import TextAlign from '@tiptap/extension-text-align'
 import { api } from '../api/client.js'
 
 // Toolbar button.
@@ -25,6 +26,22 @@ function escapeHtml(s) {
   return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
 }
 
+// Alignment glyph: three lines justified to the given side.
+function AlignIcon({ align }) {
+  const rows = {
+    left: [[2, 14], [2, 10], [2, 12]],
+    center: [[2, 14], [4, 12], [3, 13]],
+    right: [[2, 14], [6, 14], [4, 14]],
+  }[align]
+  return (
+    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+      {rows.map(([x1, x2], i) => (
+        <line key={`${x1}-${x2}`} x1={x1} y1={4 + i * 4} x2={x2} y2={4 + i * 4} />
+      ))}
+    </svg>
+  )
+}
+
 // Toolbar variants:
 //   'full'    — every control, incl. the internal wiki-page link picker (wiki use).
 //   'post'    — full minus the wiki-page picker (no page-list context in posts).
@@ -42,6 +59,11 @@ export default function RichTextEditor({ value, onChange, pages = [], variant =
       StarterKit.configure({ heading: { levels: [2, 3] } }),
       Link.configure({ openOnClick: false, autolink: true }),
       Image.configure({ inline: false }),
+      // Alignment stored as `text-align` on the block node (heading/paragraph),
+      // so it round-trips through save/reload as inline style. Shared here means
+      // every consumer — post editor, and the future rich_text / two_column
+      // blocks — gets it for free.
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
     content: value || '',
     onUpdate: ({ editor }) => onChange(editor.getHTML()),
@@ -131,6 +153,16 @@ export default function RichTextEditor({ value, onChange, pages = [], variant =
               —
             </Btn>
             <span className="rte-sep" />
+            <Btn title="Align left" active={editor.isActive({ textAlign: 'left' })} onClick={() => editor.chain().focus().setTextAlign('left').run()}>
+              <AlignIcon align="left" />
+            </Btn>
+            <Btn title="Align center" active={editor.isActive({ textAlign: 'center' })} onClick={() => editor.chain().focus().setTextAlign('center').run()}>
+              <AlignIcon align="center" />
+            </Btn>
+            <Btn title="Align right" active={editor.isActive({ textAlign: 'right' })} onClick={() => editor.chain().focus().setTextAlign('right').run()}>
+              <AlignIcon align="right" />
+            </Btn>
+            <span className="rte-sep" />
             <Btn title="Link" active={editor.isActive('link')} onClick={setLink}>
               🔗
             </Btn>

client/src/components/ShardAccountActions.jsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext.jsx'
+import { api } from '../api/client.js'
+
+// Compact in-game moderation controls (kick / ban / unban) scoped to a single
+// game account. Reused wherever a linked account or character is shown to staff:
+// the admin user-detail account list and the character sheet. Self-gates on role
+// (admin/moderator) so it is safe to render inside components that players also
+// see — a player never gets the controls, and the API enforces the same gate.
+//
+// `actor` is stamped server-side from the session; nothing here sends it. Kick is
+// reversible (they reconnect) so it acts immediately; Ban reveals an inline
+// confirm with an optional duration + reason before it fires.
+export default function ShardAccountActions({ account, style }) {
+  const { user } = useAuth()
+  const [busy, setBusy] = useState('')
+  const [ok, setOk] = useState('')
+  const [err, setErr] = useState('')
+  const [banOpen, setBanOpen] = useState(false)
+  const [durationSec, setDurationSec] = useState('')
+  const [reason, setReason] = useState('')
+
+  // Only staff who can actually use the write plane see the controls.
+  if (!user || !['admin', 'moderator'].includes(user.role) || !account) return null
+
+  async function run(label, fn, done) {
+    setBusy(label); setOk(''); setErr('')
+    try {
+      const r = await fn()
+      setOk(done(r))
+    } catch (e) {
+      setErr(e.message || 'Action failed.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  const kick = () =>
+    run('kick', () => api.admin.shardOps.kick({ account }), (r) => {
+      const n = r && r.sessions != null ? r.sessions : null
+      const plural = n === 1 ? '' : 's'
+      const sessions = n != null ? ` (${n} session${plural})` : ''
+      return `Kicked${sessions}.`
+    })
+  const unban = () => run('unban', () => api.admin.shardOps.unban(account), () => 'Unbanned.')
+  const ban = () =>
+    run('ban', () =>
+      api.admin.shardOps.ban({
+        account,
+        durationSec: durationSec === '' ? undefined : Number(durationSec),
+        reason: reason.trim() || undefined,
+      }),
+    () => {
+      setBanOpen(false)
+      const when = durationSec ? ` for ${durationSec}s` : ' indefinitely'
+      return `Banned${when}.`
+    })
+
+  const btn = { fontSize: '0.72rem', padding: '4px 10px' }
+
+  return (
+    <div className="sans" style={{ display: 'flex', flexDirection: 'column', gap: 8, ...style }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+        <button onClick={kick} disabled={!!busy} className="btn btn-sq" style={btn}>{busy === 'kick' ? '…' : 'Kick'}</button>
+        <button onClick={() => { setBanOpen((v) => !v); setOk(''); setErr('') }} disabled={!!busy} className="btn btn-sq" style={{ ...btn, borderColor: '#d98b84', color: '#d98b84' }}>Ban…</button>
+        <button onClick={unban} disabled={!!busy} className="btn btn-sq" style={btn}>{busy === 'unban' ? '…' : 'Unban'}</button>
+        {ok && <span style={{ color: '#7fd0a4', fontSize: '0.8rem' }}>{ok}</span>}
+        {err && <span style={{ color: '#d98b84', fontSize: '0.8rem' }}>{err}</span>}
+      </div>
+
+      {banOpen && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 8, padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 8, background: 'rgba(217,139,132,0.06)' }}>
+          <label style={{ display: 'block' }}>
+            <span className="field-label">Duration (sec, blank = permanent)</span>
+            <input type="number" value={durationSec} onChange={(e) => setDurationSec(e.target.value)} className="input" min={0} placeholder="604800" style={{ maxWidth: 150 }} />
+          </label>
+          <label style={{ display: 'block', flex: 1, minWidth: 160 }}>
+            <span className="field-label">Reason (optional)</span>
+            <input type="text" value={reason} onChange={(e) => setReason(e.target.value)} className="input" maxLength={500} placeholder="harassment" autoComplete="off" />
+          </label>
+          <button onClick={ban} disabled={busy === 'ban'} className="btn btn-primary btn-sq" style={{ borderColor: '#d98b84', background: '#d98b84', ...btn }}>
+            {busy === 'ban' ? 'Banning…' : `Confirm ban ${account}`}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/SiteFooter.jsx

@@ -2,27 +2,42 @@ import { Link } from 'react-router-dom'
 import { useSite } from '../contexts/SiteContext.jsx'
 
 export default function SiteFooter() {
-  const { contactEmail } = useSite()
+  const { contactEmail, siteTitle } = useSite()
   return (
     <footer
-      className="sans"
+      className="sans site-footer"
       style={{
         borderTop: '1px solid var(--line)',
         padding: '28px 16px',
         color: 'var(--muted)',
-        textAlign: 'center',
         fontSize: '0.9rem',
         background: 'rgba(9,13,18,0.6)',
       }}
     >
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-        <span>UOMysticmoon is an independent private shard project.</span>
+      <div className="site-footer-inner">
+        <div className="site-footer-badge">
+          <img src="/assets/img/runic-emblem.png" alt="" aria-hidden="true" />
+          <span>
+            Powered by
+            <br />
+            <a
+              href="https://gitea.whitlocktech.com/RunicGateway"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="site-footer-brand-link"
+            >
+              <strong>Runic Gateway</strong>
+            </a>
+          </span>
+        </div>
+        <div className="site-footer-info">
+          <span>{siteTitle} is an independent private shard project.</span>
           <span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
             <a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
               {contactEmail}
             </a>
             &nbsp;·&nbsp;
-          <Link to="/site/status" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+            <Link to="/site/shard" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
               Shard Status
             </Link>
             &nbsp;·&nbsp;
@@ -31,6 +46,7 @@ export default function SiteFooter() {
             </Link>
           </span>
         </div>
+      </div>
     </footer>
   )
 }

client/src/components/SiteHeader.jsx

@@ -1,26 +1,49 @@
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 import MoonDot from './MoonDot.jsx'
+import { useAuth } from '../contexts/AuthContext.jsx'
+import { useSite } from '../contexts/SiteContext.jsx'
+import { useShardFeatures, canSee } from '../lib/useShardFeatures.js'
 
-const NAV = {
-  website: [
+// One consistent top nav for the whole public site. Every page gets the same
+// main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
+//
+// Entries carrying a `feature` are shard surfaces an admin can disable or gate
+// to a higher audience (Admin -> Shard Visibility). They are hidden when this
+// viewer can't reach them, so we never render a link that would 403. The gate
+// itself is server-side; this is only about not advertising a dead end.
+const NAV = [
+  { label: 'Home', to: '/', end: true },
   { label: 'News', to: '/site/news' },
   { label: 'Screenshots', to: '/site/screenshots' },
   { label: 'Five on Friday', to: '/site/five-on-friday' },
   { label: 'Newsletter', to: '/site/newsletter' },
-    { label: 'About', to: '/site/about' },
   { label: 'Wiki', to: '/wiki' },
-  ],
-  wiki: [
-    { label: 'Website', to: '/site' },
-    { label: 'New Player Guide', to: '/wiki/new-player-guide' },
-    { label: 'Maps & Atlas', to: '/wiki/maps-atlas' },
-    { label: 'Systems', to: '/wiki/systems' },
-    { label: 'Rules', to: '/wiki/rules' },
-  ],
-}
+  { label: 'Shard', to: '/site/shard', feature: 'status' },
+  { label: 'Champions', to: '/site/champs', feature: 'champs' },
+  { label: 'Guilds', to: '/site/guilds', feature: 'guilds' },
+  { label: 'Governors', to: '/site/governors', feature: 'governors' },
+  { label: 'Houses', to: '/site/houses', feature: 'houses' },
+  { label: 'About', to: '/site/about' },
+]
+
+const linkStyle = ({ isActive }) => ({
+  background: isActive ? 'var(--accent)' : undefined,
+  color: isActive ? 'var(--bg-deep)' : undefined,
+  borderColor: isActive ? 'var(--accent)' : undefined,
+})
+
+export default function SiteHeader() {
+  const { user, loading } = useAuth()
+  const { siteTitle } = useSite()
+  const shardFeatures = useShardFeatures()
+  const nav = NAV.filter((item) => !item.feature || canSee(shardFeatures, item.feature))
+
+  // Where the auth entry points: staff → admin, player → portal, else sign in.
+  let account
+  if (user && user.role && user.role !== 'player') account = { label: 'Admin', to: '/admin' }
+  else if (user) account = { label: 'My Account', to: '/player' }
+  else account = { label: 'Sign in', to: '/account/login' }
 
-export default function SiteHeader({ section = 'website' }) {
-  const links = NAV[section] || NAV.website
   return (
     <header
       style={{
@@ -34,38 +57,31 @@ export default function SiteHeader({ section = 'website' }) {
     >
       <div
         className="shell"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 20,
-          padding: '14px 0',
-          flexWrap: 'wrap',
-        }}
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '14px 0', flexWrap: 'wrap' }}
       >
         <Link
           to="/"
           className="display"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            fontSize: '1.2rem',
-            letterSpacing: '0.05em',
-            color: 'var(--accent-bright)',
-            textDecoration: 'none',
-            fontWeight: 600,
-          }}
+          style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
         >
           <MoonDot />
-          UOMysticmoon
+          {siteTitle}
         </Link>
         <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
-          {links.map((l) => (
-            <Link key={l.to + l.label} to={l.to} className="pill">
+          {nav.map((l) => (
+            <NavLink key={l.to} to={l.to} end={l.end} className="pill" style={linkStyle}>
               {l.label}
-            </Link>
+            </NavLink>
           ))}
+          {!loading && (
+            <NavLink
+              to={account.to}
+              className="pill"
+              style={{ marginLeft: 6, borderColor: 'var(--accent)', color: 'var(--accent-bright)' }}
+            >
+              {account.label}
+            </NavLink>
+          )}
         </nav>
       </div>
     </header>

client/src/components/VendorSales.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { ago } from '../lib/format.js'
+
+// Owner-private recent player-vendor sales. `fetchSales` is the scope method
+// (api.player.shard.sales / api.admin.shard.sales) — the server only returns
+// sales for accounts linked to the caller.
+export default function VendorSales({ fetchSales }) {
+  const [sales, setSales] = useState(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    let active = true
+    fetchSales()
+      .then((rows) => active && setSales(rows))
+      .catch(() => active && setError('Could not load your vendor sales.'))
+    return () => { active = false }
+  }, [fetchSales])
+
+  if (error) return null
+  if (!sales) return null
+
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
+      <div className="field-label" style={{ marginBottom: 12 }}>Recent vendor sales</div>
+      {sales.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>No vendor sales recorded yet.</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {sales.map((s) => (
+            <li key={`${s.t}-${s.itemType}-${s.price}`} className="sans" style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: '0.9rem', color: 'var(--ink)' }}>
+              <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {s.itemType || 'An item'}{s.amount > 1 ? ` ×${s.amount}` : ''} — {Number(s.price || 0).toLocaleString()}gp
+              </span>
+              <span className="dim" style={{ flex: 'none', fontSize: '0.78rem' }}>{ago(s.t)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

client/src/components/security/RecoveryCodesDisplay.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+// Renders a freshly generated batch of recovery codes ONCE, with copy + download.
+// The backend never returns these again, so the copy stresses saving them now.
+export default function RecoveryCodesDisplay({ codes, onDone }) {
+  const [copied, setCopied] = useState(false)
+  const text = (codes || []).join('\n')
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      /* clipboard blocked — the codes are visible to copy manually */
+    }
+  }
+
+  function download() {
+    const blob = new Blob([`${text}\n`], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'recovery-codes.txt'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 18, marginTop: 8 }}>
+      <p className="sans" style={{ margin: '0 0 12px', color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+        Save these recovery codes somewhere safe. Each can be used <strong>once</strong> to sign in if you
+        lose your authenticator. <strong>They will not be shown again.</strong>
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+          gap: 8,
+          fontFamily: 'monospace',
+          fontSize: '0.95rem',
+          marginBottom: 14,
+        }}
+      >
+        {(codes || []).map((c) => (
+          <div key={c} style={{ padding: '8px 10px', border: '1px solid var(--line-soft)', borderRadius: 6, letterSpacing: '0.06em', textAlign: 'center', color: 'var(--head)' }}>
+            {c}
+          </div>
+        ))}
+      </div>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+        <button onClick={copy} className="pill">{copied ? 'Copied!' : 'Copy'}</button>
+        <button onClick={download} className="pill">Download</button>
+        {onDone && (
+          <button onClick={onDone} className="btn btn-primary btn-sq" style={{ marginLeft: 'auto' }}>
+            I’ve saved them
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/security/RecoveryCodesPanel.jsx

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../../api/client.js'
+import RecoveryCodesDisplay from './RecoveryCodesDisplay.jsx'
+
+// Self-service recovery (backup) codes. Shows how many remain and lets the user
+// regenerate a fresh set (password step-up). Shown only when 2FA is enabled.
+// `hasPassword` decides whether the current-password field is required — an
+// SSO-only account with no password may regenerate while authenticated.
+export default function RecoveryCodesPanel({ hasPassword = true }) {
+  const [remaining, setRemaining] = useState(null)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [codes, setCodes] = useState(null) // freshly generated batch, shown once
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    try {
+      const { remaining: n } = await api.recoveryCodesStatus()
+      setRemaining(n)
+    } catch {
+      /* non-fatal — the panel still offers regeneration */
+    }
+  }, [])
+  useEffect(() => {
+    load()
+  }, [load])
+
+  async function regenerate() {
+    setBusy(true)
+    setError('')
+    try {
+      const { recoveryCodes } = await api.generateRecoveryCodes(hasPassword ? currentPassword : undefined)
+      setCodes(recoveryCodes)
+      setCurrentPassword('')
+      await load()
+    } catch (err) {
+      setError(err.message || 'Could not generate recovery codes.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ marginTop: 40, borderTop: '1px solid var(--line-soft)', paddingTop: 28 }}>
+      <h2 className="display" style={{ marginTop: 0, fontSize: '1.2rem', color: 'var(--head)' }}>
+        Recovery codes
+      </h2>
+      <p className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem', lineHeight: 1.6 }}>
+        Single-use codes that let you sign in if you lose your authenticator. Regenerating replaces any
+        codes you still have.
+      </p>
+
+      {remaining != null && !codes && (
+        <p className="sans" style={{ color: remaining > 0 ? '#7fd0a4' : '#e0b352', fontSize: '0.86rem' }}>
+          {remaining > 0 ? `${remaining} unused code${remaining === 1 ? '' : 's'} remaining.` : 'No unused recovery codes left — regenerate a set.'}
+        </p>
+      )}
+
+      {codes ? (
+        <RecoveryCodesDisplay codes={codes} onDone={() => setCodes(null)} />
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 10 }}>
+          {hasPassword && (
+            <label style={{ display: 'block', maxWidth: 260 }}>
+              <span className="field-label">Current password</span>
+              <input
+                type="password"
+                autoComplete="current-password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                className="input"
+              />
+            </label>
+          )}
+          <div>
+            <button onClick={regenerate} disabled={busy || (hasPassword && !currentPassword)} className="btn btn-sq">
+              {busy ? 'Generating…' : 'Generate new codes'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && <p className="sans" style={{ marginTop: 14, color: '#d98b84', fontSize: '0.86rem' }}>{error}</p>}
+    </div>
+  )
+}

client/src/components/security/TrustLimitModal.jsx

@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { api } from '../../api/client.js'
+
+// Shown when a user tries to trust a device but is already at the trusted-device
+// cap. Styled like the TOTP entry flow (centered card on a dim overlay). The user
+// MUST revoke at least one existing device before they can continue — there is no
+// silent pruning — or they can cancel and leave the device untrusted.
+//
+// Props:
+//   devices    — the existing trusted devices (from the 409 / trustLimitReached payload)
+//   onTrusted  — called after the current device is successfully trusted (post-revoke)
+//   onCancel   — called when the user backs out without trusting this device
+export default function TrustLimitModal({ devices: initialDevices, onTrusted, onCancel }) {
+  const [devices, setDevices] = useState(initialDevices || [])
+  const [revokedAny, setRevokedAny] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  async function revoke(id) {
+    setBusy(true)
+    setError('')
+    try {
+      await api.revokeTrustedDevice(id)
+      setDevices((list) => list.filter((d) => d.id !== id))
+      setRevokedAny(true)
+    } catch {
+      setError('Could not revoke that device. Please try again.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function trustNow() {
+    setBusy(true)
+    setError('')
+    try {
+      await api.trustThisDevice()
+      onTrusted?.()
+    } catch (err) {
+      // Still at the cap somehow (a race) — surface it and let them revoke more.
+      if (err.status === 409 && err.body?.devices) {
+        setDevices(err.body.devices)
+        setError('Still at the limit — revoke another device.')
+      } else {
+        setError('Could not trust this device. Please try again.')
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={overlay} role="dialog" aria-modal="true" aria-label="Trusted-device limit reached">
+      <div style={card}>
+        <h2 className="display" style={{ margin: '0 0 8px', fontSize: '1.15rem', color: 'var(--head)' }}>
+          Trusted-device limit reached
+        </h2>
+        <p className="sans" style={{ margin: '0 0 16px', color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+          You can trust up to {Math.max(devices.length, 1)} devices. Revoke one below to make room, then
+          continue — or cancel to leave this device untrusted.
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16, maxHeight: 240, overflowY: 'auto' }}>
+          {devices.map((d) => (
+            <div key={d.id} style={row}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div className="sans" style={{ color: 'var(--head)', fontSize: '0.88rem' }}>
+                  {d.deviceName || d.platform || 'Device'}
+                </div>
+                <div className="sans dim" style={{ fontSize: '0.74rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {d.userAgent || '—'}
+                </div>
+              </div>
+              <button onClick={() => revoke(d.id)} disabled={busy} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>
+                Revoke
+              </button>
+            </div>
+          ))}
+          {devices.length === 0 && (
+            <p className="sans dim" style={{ fontSize: '0.84rem', margin: 0 }}>All devices revoked. You can trust this one now.</p>
+          )}
+        </div>
+
+        {error && <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.84rem' }}>{error}</p>}
+
+        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+          <button onClick={trustNow} disabled={busy || !revokedAny} className="btn btn-primary btn-sq">
+            {busy ? 'Working…' : 'Trust this device'}
+          </button>
+          <button onClick={onCancel} disabled={busy} className="pill">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const overlay = {
+  position: 'fixed',
+  inset: 0,
+  background: 'rgba(0,0,0,0.6)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 16,
+  zIndex: 1000,
+}
+const card = {
+  width: '100%',
+  maxWidth: 460,
+  background: 'var(--panel, #1a1a1f)',
+  border: '1px solid var(--line)',
+  borderRadius: 12,
+  padding: 24,
+}
+const row = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  padding: '10px 14px',
+  border: '1px solid var(--line)',
+  borderRadius: 8,
+}

client/src/components/security/TrustedDevicesPanel.jsx

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../../api/client.js'
+import TrustLimitModal from './TrustLimitModal.jsx'
+
+// Self-service list of the devices allowed to skip the TOTP step at login (MFA
+// "Trust this device"). Uses the role-agnostic /auth/me/trusted-devices surface, so
+// the same panel serves players and staff. Shown only when 2FA is enabled — trust
+// is meaningless without a second factor to skip.
+function fmtDate(s) {
+  if (!s) return '—'
+  const d = new Date(s)
+  return Number.isNaN(d.getTime()) ? '—' : d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export default function TrustedDevicesPanel() {
+  const [devices, setDevices] = useState(null)
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [capModal, setCapModal] = useState(null) // { devices } when the cap is hit
+
+  const load = useCallback(async () => {
+    try {
+      setDevices(await api.myTrustedDevices())
+    } catch {
+      setError('Could not load your trusted devices.')
+    }
+  }, [])
+  useEffect(() => {
+    load()
+  }, [load])
+
+  async function trustThis() {
+    setBusy(true)
+    setMsg('')
+    setError('')
+    try {
+      await api.trustThisDevice()
+      setMsg('This device is now trusted.')
+      await load()
+    } catch (err) {
+      if (err.status === 409 && err.body?.error === 'trusted_device_limit') {
+        setCapModal({ devices: err.body.devices || [] })
+      } else {
+        setError('Could not trust this device.')
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function revoke(id) {
+    setBusy(true)
+    setMsg('')
+    setError('')
+    try {
+      await api.revokeTrustedDevice(id)
+      await load()
+    } catch {
+      setError('Could not revoke that device.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function revokeAll() {
+    if (!window.confirm('Untrust every device? Each will require the full two-factor step at the next login.')) return
+    setBusy(true)
+    setMsg('')
+    setError('')
+    try {
+      await api.revokeAllTrustedDevices()
+      setMsg('All devices untrusted.')
+      await load()
+    } catch {
+      setError('Could not untrust devices.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!devices) return null
+
+  return (
+    <div style={{ marginTop: 40, borderTop: '1px solid var(--line-soft)', paddingTop: 28 }}>
+      <h2 className="display" style={{ marginTop: 0, fontSize: '1.2rem', color: 'var(--head)' }}>
+        Trusted devices
+      </h2>
+      <p className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem', lineHeight: 1.6 }}>
+        Devices you’ve trusted skip the authenticator step at login (your password is still required).
+        Revoke any you don’t recognize.
+      </p>
+
+      {devices.length > 0 ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '14px 0' }}>
+          {devices.map((d) => (
+            <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div className="sans" style={{ color: 'var(--head)', fontSize: '0.9rem' }}>
+                  {d.deviceName || (d.platform === 'mobile' ? 'Mobile app' : 'Browser')}
+                </div>
+                <div className="sans dim" style={{ fontSize: '0.76rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {d.userAgent || '—'} · last used {fmtDate(d.lastUsedAt)} · expires {fmtDate(d.expiresAt)}
+                </div>
+              </div>
+              <button onClick={() => revoke(d.id)} disabled={busy} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>
+                Revoke
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="sans dim" style={{ fontSize: '0.86rem', margin: '14px 0' }}>No trusted devices yet.</p>
+      )}
+
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+        <button onClick={trustThis} disabled={busy} className="btn btn-sq">Trust this device</button>
+        {devices.length > 0 && (
+          <button onClick={revokeAll} disabled={busy} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>
+            Untrust all
+          </button>
+        )}
+      </div>
+
+      {msg && <p className="sans" style={{ marginTop: 14, color: '#7fd0a4', fontSize: '0.86rem' }}>{msg}</p>}
+      {error && <p className="sans" style={{ marginTop: 14, color: '#d98b84', fontSize: '0.86rem' }}>{error}</p>}
+
+      {capModal && (
+        <TrustLimitModal
+          devices={capModal.devices}
+          onTrusted={() => { setCapModal(null); setMsg('This device is now trusted.'); load() }}
+          onCancel={() => setCapModal(null)}
+        />
+      )}
+    </div>
+  )
+}

client/src/contexts/AuthContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'
 import { api } from '../api/client.js'
 
 const AuthContext = createContext(null)
@@ -30,17 +30,30 @@ export function AuthProvider({ children }) {
     return data
   }, [])
 
-  // Step 2 for TOTP users: exchange the challenge + code for a real session.
-  const loginTotp = useCallback(async (challenge, code) => {
-    const data = await api.loginTotp(challenge, code)
+  // Public self-registration (player). Creates the account, sets the session
+  // cookie, and returns { user }. `extra` carries the honeypot + optional email.
+  const register = useCallback(async (username, password, extra) => {
+    const data = await api.register(username, password, extra)
+    if (data.user) setUser(data.user)
+    return data
+  }, [])
+
+  // Step 2 for TOTP users: exchange the challenge + a second factor (TOTP code or a
+  // recovery code) for a real session. `extra` carries recoveryCode + the
+  // trustDevice/deviceName opt-in. Returns the full payload ({ user,
+  // trustLimitReached?, devices? }) so the caller can handle the device-cap prompt.
+  const loginTotp = useCallback(async (challenge, code, extra) => {
+    const data = await api.loginTotp(challenge, code, extra)
     setUser(data.user)
-    return data.user
+    return data
   }, [])
 
   // Step 2 for SSO logins whose account has 2FA on. The pending challenge lives in
-  // an httpOnly cookie, so only the code is sent. Returns { user, returnTo }.
-  const ssoLoginTotp = useCallback(async (code) => {
-    const data = await api.ssoLoginTotp(code)
+  // an httpOnly cookie, so only the code is sent. `extra` carries the trustDevice/
+  // deviceName opt-in. Returns the full payload ({ user, returnTo,
+  // trustLimitReached?, devices? }) so the caller can handle the device-cap prompt.
+  const ssoLoginTotp = useCallback(async (code, extra) => {
+    const data = await api.ssoLoginTotp(code, extra)
     setUser(data.user)
     return data
   }, [])
@@ -53,8 +66,15 @@ export function AuthProvider({ children }) {
     }
   }, [])
 
+  // Memoized so consumers don't re-render on every provider render (the callbacks
+  // are already stable via useCallback).
+  const value = useMemo(
+    () => ({ user, loading, login, register, loginTotp, ssoLoginTotp, logout, refresh }),
+    [user, loading, login, register, loginTotp, ssoLoginTotp, logout, refresh],
+  )
+
   return (
-    <AuthContext.Provider value={{ user, loading, login, loginTotp, ssoLoginTotp, logout, refresh }}>
+    <AuthContext.Provider value={value}>
       {children}
     </AuthContext.Provider>
   )

client/src/contexts/SiteContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'
 import { api } from '../api/client.js'
 
 const SiteContext = createContext(null)
@@ -23,14 +23,30 @@ export function SiteProvider({ children }) {
     refresh()
   }, [refresh])
 
-  const value = {
+  const brand = useMemo(() => settings.brand || {}, [settings])
+
+  // Apply the instance accent color to the CSS variable the theme is built on,
+  // so branding flows to every `var(--accent)` at runtime (no rebuild).
+  useEffect(() => {
+    if (brand.accent) document.documentElement.style.setProperty('--accent', brand.accent)
+  }, [brand.accent])
+
+  // Memoized so consumers don't re-render on every provider render (brand is a
+  // fresh object each render, which would otherwise churn the context value).
+  const value = useMemo(
+    () => ({
       settings,
       loading,
       refresh,
+      brand,
       mode: settings.site_mode || 'live',
-    siteTitle: settings.site_title || 'UOMysticmoon',
-    contactEmail: settings.contact_email || 'UOMysticmoon@gmail.com',
-  }
+      siteTitle: brand.name || settings.site_title || 'Runic Gateway',
+      siteShortName: brand.shortName || brand.name || settings.site_title || 'Runic Gateway',
+      contactEmail: brand.contactEmail || settings.contact_email || '',
+      heroImage: brand.hero || '/assets/img/runic-emblem.png',
+    }),
+    [settings, loading, refresh, brand],
+  )
 
   return <SiteContext.Provider value={value}>{children}</SiteContext.Provider>
 }

client/src/data/cityCrests.js

@@ -0,0 +1,31 @@
+// Placeholder heraldry for the eight City-Loyalty cities. Each entry is a simple
+// emoji sigil + a ring colour — enough to make the Governors board and the
+// governor badge read as distinct "crests" today, swappable for real artwork
+// later WITHOUT touching any component: drop an `img` (an imported asset URL or a
+// public path) onto an entry and update CityCrest to prefer it.
+//
+// Keyed by the exact `city` string the sidecar sends (see INTEGRATION.md §4:
+// Moonglow, Britain, Jhelom, Yew, Minoc, Trinsic, SkaraBrae, NewMagincia).
+
+export const CITY_CRESTS = {
+  Britain: { sigil: '⚜', color: '#c9a24b', label: 'Britain' },
+  Moonglow: { sigil: '🔮', color: '#7f8fd0', label: 'Moonglow' },
+  Minoc: { sigil: '⚒', color: '#b0763f', label: 'Minoc' },
+  Trinsic: { sigil: '⚓', color: '#5f9bd0', label: 'Trinsic' },
+  Yew: { sigil: '🌳', color: '#5fb98a', label: 'Yew' },
+  Jhelom: { sigil: '⚔', color: '#c76f6f', label: 'Jhelom' },
+  SkaraBrae: { sigil: '🐎', color: '#9a8bbf', label: 'Skara Brae' },
+  NewMagincia: { sigil: '🕊', color: '#cfc3a0', label: 'New Magincia' },
+}
+
+const FALLBACK = { sigil: '🏰', color: '#8c96a5', label: '' }
+
+// Look up a crest by the raw city key, tolerating spacing variants
+// ("Skara Brae" / "New Magincia"). `label` falls back to the given name.
+export function crestFor(city) {
+  if (!city) return FALLBACK
+  const key = String(city).replace(/\s+/g, '')
+  const crest = CITY_CRESTS[city] || CITY_CRESTS[key]
+  if (crest) return crest
+  return { ...FALLBACK, label: String(city) }
+}

client/src/data/regionBuckets.js

@@ -0,0 +1,72 @@
+// Roll the sidecar's raw presence.online `byRegion` map (many named ServUO
+// regions) up into a handful of labelled display buckets for the "Players Online"
+// widget. This is the ONE place to retune the grouping — edit BUCKETS (order +
+// membership) and the widget follows. Anything not matched lands in "Wilderness"
+// so the bucket counts always reconcile to the true total.
+
+// Named cities/towns, matched as a prefix on the (space/apostrophe-stripped)
+// region name so "skara brae", "serpent's hold", etc. all resolve. Kept as a
+// list rather than one giant alternation regex (simpler to read and retune).
+const TOWN_PREFIXES = [
+  'moonglow', 'minoc', 'trinsic', 'jhelom', 'yew', 'skarabrae', 'magincia',
+  'newmagincia', 'vesper', 'nujelm', 'cove', 'ocllo', 'serpenthold', 'serpentshold',
+  'wind', 'delucia', 'papua',
+]
+const normalizeRegion = (r) => String(r).toLowerCase().replace(/['’\s]/g, '')
+
+// Ordered list of buckets. `label` shows in the widget; `match(region)` decides
+// membership. First matching bucket wins; the last bucket is the catch-all.
+export const BUCKETS = [
+  {
+    id: 'britain',
+    label: 'Britain',
+    // Passthrough for the capital + its immediate surrounds.
+    match: (r) => /^britain/i.test(r),
+  },
+  {
+    id: 'towns',
+    label: 'Towns',
+    // The other named cities/towns.
+    match: (r) => {
+      const norm = normalizeRegion(r)
+      return TOWN_PREFIXES.some((t) => norm.startsWith(t))
+    },
+  },
+  {
+    id: 'dungeons',
+    label: 'Dungeons',
+    match: (r) =>
+      /(despise|destard|deceit|shame|hythloth|covetous|wrong|terathan|fire|ice|orc cave|dungeon|abyss|doom|khaldun|wrong|blackthorn|exodus|labyrinth|underworld)/i.test(
+        r,
+      ),
+  },
+  {
+    id: 'housing',
+    label: 'Housing',
+    // House regions expose themselves as named house/townhouse regions.
+    match: (r) => /(house|townhouse|homestead|tent)/i.test(r),
+  },
+  {
+    id: 'wilderness',
+    label: 'Wilderness',
+    // Catch-all: the unnamed "Wilderness" region + anything unmatched above.
+    match: () => true,
+  },
+]
+
+// Given a raw { region: count } map, return [{ id, label, count }] in BUCKETS
+// order, dropping empty buckets, with the summed total also returned.
+export function bucketize(byRegion = {}) {
+  const totals = new Map(BUCKETS.map((b) => [b.id, 0]))
+  let total = 0
+  for (const [region, n] of Object.entries(byRegion || {})) {
+    const count = Number(n) || 0
+    total += count
+    const bucket = BUCKETS.find((b) => b.match(String(region))) || BUCKETS[BUCKETS.length - 1]
+    totals.set(bucket.id, totals.get(bucket.id) + count)
+  }
+  const rows = BUCKETS.map((b) => ({ id: b.id, label: b.label, count: totals.get(b.id) })).filter(
+    (r) => r.count > 0,
+  )
+  return { rows, total }
+}

client/src/lib/heroLayout.js

@@ -1,13 +1,28 @@
 // Shared hero-layout helpers used by the public portal and the admin editor.
 
-export const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'
+// Runic Gateway default hero emblem; the instance hero image (BRAND_HERO)
+// overrides it at runtime, threaded in as `defaultImage` by the portal.
+export const DEFAULT_HERO_IMAGE = '/assets/img/runic-emblem.png'
 
-// The original hand-tuned multi-gradient hero background (used only for the
-// untouched default so the live page is byte-for-byte unchanged until edited).
-export const HERO_BG =
-  "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
-  DEFAULT_HERO_IMAGE +
+// Default hero background: the emblem centered behind the text as a medallion,
+// under a symmetric dark overlay tuned to keep centered hero copy legible.
+// Two layers (overlay gradient + image) so the per-layer background-size in
+// `heroBackground` can contain the square emblem while the overlay stays full-bleed.
+export function heroBgStack(image) {
+  return (
+    'linear-gradient(180deg,rgba(11,15,20,0.62) 0%,rgba(11,15,20,0.48) 38%,rgba(11,15,20,0.52) 58%,rgba(11,15,20,0.86) 100%),' +
+    "url('" +
+    (image || DEFAULT_HERO_IMAGE) +
     "')"
+  )
+}
+
+// Keep the emblem fully visible and centered, capped so it never overflows a
+// narrow viewport; the overlay layer covers.
+export const HERO_DEFAULT_SIZE = 'cover, min(74vh, 640px, 86vw)'
+export const HERO_DEFAULT_POSITION = 'center, center'
+
+export const HERO_BG = heroBgStack(DEFAULT_HERO_IMAGE)
 
 // Single-stop dark overlay driven by the editor's opacity slider.
 export function buildOverlay(opacity) {
@@ -16,15 +31,23 @@ export function buildOverlay(opacity) {
 
 // Background style for a layout. When `isDefault` and no custom image is set, use
 // the exact original gradient stack; otherwise compose the overlay over the image.
-export function heroBackground(layout, { isDefault = false } = {}) {
+export function heroBackground(layout, { isDefault = false, defaultImage } = {}) {
   const bg = layout.background || {}
-  const backgroundImage =
-    isDefault && !bg.image_url
-      ? HERO_BG
-      : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
+  const fallback = defaultImage || DEFAULT_HERO_IMAGE
+  // Untouched default: emblem contained + centered behind the text (per-layer
+  // size/position so the overlay stays full-bleed while the square emblem fits).
+  if (isDefault && !bg.image_url) {
     return {
       backgroundColor: 'var(--bg-deep)',
-    backgroundImage,
+      backgroundImage: heroBgStack(fallback),
+      backgroundPosition: HERO_DEFAULT_POSITION,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: HERO_DEFAULT_SIZE,
+    }
+  }
+  return {
+    backgroundColor: 'var(--bg-deep)',
+    backgroundImage: `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || fallback}')`,
     backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
     backgroundRepeat: 'no-repeat',
     backgroundSize: bg.size || 'cover',
@@ -44,7 +67,7 @@ export function parseLayout(str) {
 // The current hardcoded hero as a HeroLayout, so the page is unchanged until
 // staff publish their own. Font sizes use the existing clamp() strings so the
 // default stays responsive (editor-created text uses px).
-export function defaultLayout(teaser) {
+export function defaultLayout(teaser, name = 'Runic Gateway') {
   return {
     version: 1,
     background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
@@ -62,9 +85,9 @@ export function defaultLayout(teaser) {
           width: 760,
           lines: [
             { text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
-            { text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
+            { text: name, tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
             { text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
-            { text: teaser, tag: 'p', fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
+            { text: teaser, tag: 'div', html: true, fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
           ],
         },
       },

client/src/lib/shardEvents.js

@@ -0,0 +1,128 @@
+// Shared formatting for shard events — used by the public Shard page, the
+// Activity feed, and the admin live feed. One place decides how each kind reads
+// and which category/badge it belongs to.
+
+function nameOf(who) {
+  if (!who) return 'Someone'
+  if (typeof who === 'string') return who
+  return who.name || who.acct || 'Someone'
+}
+
+const n = (v) => Number(v || 0).toLocaleString()
+
+// A one-line human description of each event kind, keyed by kind. Each formatter
+// takes the payload and returns a string. Conditional suffixes are pulled into
+// locals so no template literal is nested inside another.
+const DESCRIBERS = {
+  'vendor.sale': (p) => {
+    const qty = p.amount > 1 ? ` ×${p.amount}` : ''
+    return `${p.itemType || 'An item'}${qty} sold for ${n(p.price)}gp`
+  },
+  'player.death': (p) => {
+    const by = p.killer ? ` by ${nameOf(p.killer)}` : ''
+    return `${nameOf(p.who)} was slain${by}`
+  },
+  'player.murdered': (p) => {
+    const by = p.murderer ? ` by ${nameOf(p.murderer)}` : ''
+    return `${nameOf(p.victim)} was murdered${by}`
+  },
+  'mob.killed': (p) => `${nameOf(p.killer)} killed ${nameOf(p.killed)}`,
+  'skill.gain': (p) => {
+    const base = p.base != null ? ` (${p.base})` : ''
+    return `${nameOf(p.who)} gained ${p.skill}${base}`
+  },
+  'fame.change': (p) => `${nameOf(p.who)}’s fame changed to ${n(p.new)}`,
+  'karma.change': (p) => `${nameOf(p.who)}’s karma changed to ${n(p.new)}`,
+  'quest.complete': (p) => `${nameOf(p.who)} completed “${p.quest}”`,
+  'house.decay': (p) => {
+    const region = p.region ? ` — ${p.region}` : ''
+    return `${p.name || 'A house'} is now ${p.to || p.stage}${region}`
+  },
+  'mob.login': (p) => `${nameOf(p.who)} entered the world`,
+  'mob.logout': (p) => `${nameOf(p.who)} left the world`,
+  'economy.supply': (p) => `Gold supply: ${n(p.gold)} across ${n(p.accounts)} accounts`,
+  'server.hello': (p) => `Shard online — ${n(p.accounts)} accounts, ${n(p.mobiles)} mobiles`,
+  'server.shutdown': () => 'Shard shut down',
+  'server.crashed': (p) => {
+    const err = p.error ? `: ${p.error}` : ''
+    return `Shard crashed${err}`
+  },
+  'champ.update': (p) => {
+    const where = p.name || p.type || 'A champion spawn'
+    if (p.status === 'active' && p.bossUp) {
+      const boss = p.boss ? ` (${p.boss})` : ''
+      return `${where}: boss is up${boss}`
+    }
+    if (p.status === 'active') {
+      const level = p.level != null ? ` — level ${p.level}` : ''
+      return `${where} is active${level}`
+    }
+    if (p.status === 'cooldown') return `${where} is on cooldown`
+    return `${where} is ${p.status || 'idle'}`
+  },
+  'champ.remove': () => `A champion spawn ended`,
+  // Support (help-page) queue + in-game moderation (admin channel only)
+  'page.new': (p) => `New ${p.type || 'help'} page from ${nameOf(p.sender)}`,
+  'page.updated': (p) => {
+    const claimed = p.handled ? ' (claimed)' : ''
+    return `Help page from ${nameOf(p.sender)} updated${claimed}`
+  },
+  'page.closed': (p) => `Help page ${p.pageId || ''} closed`,
+  'admin.audit': (p) => {
+    const on = p.target ? ` on ${p.target}` : ''
+    const origin = p.origin ? ` [${p.origin}]` : ''
+    return `${p.actor || 'Staff'} ${p.action || 'acted'}${on}${origin}`
+  },
+  // Staff / sensitive (admin channel only)
+  'audit.set': (p) =>
+    `${nameOf(p.staff) || 'Staff'} set ${p.prop} on ${p.target || p.targetSerial} (${p.old} → ${p.new})`,
+  'audit.command': (p) => {
+    const args = p.args ? ` ${p.args}` : ''
+    return `${nameOf(p.staff) || 'Staff'} ran ${p.command}${args}`
+  },
+  'cheat.fastwalk': (p) => {
+    const ip = p.ip ? ` (${p.ip})` : ''
+    return `Fast-walk flagged: ${nameOf(p.who)}${ip}`
+  },
+  'account.login.attempt': (p) => {
+    const ip = p.ip ? ` from ${p.ip}` : ''
+    return `Login attempt: ${p.acct}${ip}`
+  },
+  'gold.change': (p) => {
+    const sign = p.delta >= 0 ? '+' : ''
+    return `${p.acct}: gold ${sign}${n(p.delta)} → ${n(p.new)}`
+  },
+}
+
+// A one-line human description of an event. Accepts either a stored event
+// (with .payload) or a raw live frame (fields at top level).
+export function describe(ev) {
+  const fmt = DESCRIBERS[ev.kind]
+  return fmt ? fmt(ev.payload || ev) : ev.kind
+}
+
+// Category grouping for the filter tabs.
+// Vendor sales are intentionally NOT a public category — they are owner-private
+// (a linked player sees their own under the portal). The admin live feed still
+// describes vendor.sale via describe() below.
+export const CATEGORIES = [
+  { id: 'all', label: 'All', kinds: null },
+  { id: 'pvp', label: 'Deaths & PvP', kinds: ['player.death', 'player.murdered', 'mob.killed'] },
+  { id: 'progress', label: 'Progression', kinds: ['skill.gain', 'fame.change', 'karma.change', 'quest.complete'] },
+  { id: 'world', label: 'World', kinds: ['house.decay', 'mob.login', 'mob.logout', 'server.hello', 'server.shutdown', 'server.crashed', 'economy.supply'] },
+]
+
+const CATEGORY_OF = (() => {
+  const m = {}
+  for (const c of CATEGORIES) if (c.kinds) for (const k of c.kinds) m[k] = c.id
+  return m
+})()
+
+export function categoryOf(kind) {
+  return CATEGORY_OF[kind] || 'other'
+}
+
+// Short badge label for a kind (the part after the dot, title-cased-ish).
+export function kindLabel(kind) {
+  return String(kind || '').replace(/[._]/g, ' ')
+}

client/src/lib/useShardFeatures.js

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { api } from '../api/client.js'
+
+// Which shard surfaces the current viewer may reach, from
+// GET /public/shard/features. Admins configure this per feature (Admin → Shard
+// Visibility), so the nav can't be a static list any more.
+//
+// This is PRESENTATION only. The gate is server-side: a disabled feature 404s
+// and an out-of-rung one 403s whether or not the link is rendered. So while the
+// answer is still in flight we return `null` and callers show their default set
+// — better a link that briefly 403s than a nav that flickers in on every load.
+//
+// Cached module-level: the answer is per-viewer but stable for a session, and
+// every consumer would otherwise refetch it on mount.
+let cached = null
+let inFlight = null
+
+export function resetShardFeatures() {
+  cached = null
+  inFlight = null
+}
+
+export function useShardFeatures() {
+  const [features, setFeatures] = useState(cached)
+
+  useEffect(() => {
+    if (cached) return undefined
+    let alive = true
+    inFlight =
+      inFlight ||
+      api.shard
+        .features()
+        .then((data) => {
+          cached = { level: data.level, set: new Set(data.features || []) }
+          return cached
+        })
+        .catch(() => {
+          // A failed lookup must not blank the nav — fall back to "show
+          // everything" and let the server do the gating.
+          cached = null
+          inFlight = null
+          return null
+        })
+    inFlight.then((result) => {
+      if (alive) setFeatures(result)
+    })
+    return () => {
+      alive = false
+    }
+  }, [])
+
+  return features
+}
+
+// Convenience: true when `name` is visible, or when we don't know yet.
+export function canSee(features, name) {
+  return !features || features.set.has(name)
+}

client/src/lib/useShardFeed.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import { api } from '../api/client.js'
+
+// Subscribe to the public shard live-event SSE stream and keep a rolling buffer
+// of the most recent events. The browser talks to our own /public/shard/stream
+// route (plain HTTP EventSource) — never the sidecar's WebSocket — so the token
+// stays server-side and it works through any reverse proxy.
+//
+// EventSource auto-reconnects on drop, so there is no manual retry loop here; a
+// `connected` flag is exposed for a small live/offline indicator. `filter` (a
+// Set of kinds, optional) limits which events are buffered. `max` caps the
+// buffer length.
+export function useShardFeed({ url, filter, max = 40 } = {}) {
+  const [events, setEvents] = useState([])
+  const [connected, setConnected] = useState(false)
+  // Keep the latest filter in a ref so re-renders don't tear down the stream.
+  const filterRef = useRef(filter)
+  filterRef.current = filter
+  const streamUrl = url || api.shardStreamUrl
+
+  useEffect(() => {
+    // EventSource isn't available during SSR / very old browsers — degrade to
+    // "no live feed" rather than throwing.
+    if (typeof window === 'undefined' || typeof window.EventSource === 'undefined') return undefined
+
+    const es = new EventSource(streamUrl, { withCredentials: true })
+
+    es.onopen = () => setConnected(true)
+    es.onerror = () => setConnected(false) // EventSource will retry on its own
+
+    es.onmessage = (msg) => {
+      let event
+      try {
+        event = JSON.parse(msg.data)
+      } catch {
+        return
+      }
+      if (!event || !event.kind) return
+      const f = filterRef.current
+      if (f && !f.has(event.kind)) return
+      setEvents((prev) => {
+        // Tag with a stable-ish local id for React keys (events carry t but can
+        // collide within a ms) and cap the buffer.
+        const next = [{ ...event, _id: `${event.kind}-${event.t}-${prev.length}` }, ...prev]
+        return next.slice(0, max)
+      })
+    }
+
+    return () => es.close()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [max, streamUrl])
+
+  return { events, connected }
+}

client/src/routes/admin/AdminLayout.jsx

@@ -1,42 +1,128 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'
 
-// `roles` (when present) restricts which roles see a nav item. Items without it
-// are shown to admin/editor as before. Moderators are further confined to just
-// their own section + account security (see the redirect effect below).
+// Small inline stroke icons (16px, currentColor) — same style as ProviderIcon.
+// One shared frame keeps them terse; each item just supplies its path(s).
+function Icon({ children, size = 16 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {children}
+    </svg>
+  )
+}
+const IconHome = () => <Icon><path d="M3 10.5 12 3l9 7.5" /><path d="M5 9.5V21h14V9.5" /></Icon>
+const IconPosts = () => <Icon><path d="M5 3h14v18H5z" /><path d="M8 8h8M8 12h8M8 16h5" /></Icon>
+const IconWiki = () => <Icon><path d="M4 4h9a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" /><path d="M20 4h-2a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h2z" /></Icon>
+const IconPages = () => <Icon><path d="M5 3h9l5 5v13H5z" /><path d="M14 3v5h5" /><path d="M8 13h8M8 17h8" /></Icon>
+const IconActivity = () => <Icon><path d="M3 12h4l3 8 4-16 3 8h4" /></Icon>
+const IconShield = () => <Icon><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z" /><path d="M9 12l2 2 4-4" /></Icon>
+const IconUsers = () => <Icon><circle cx="9" cy="8" r="3" /><path d="M3 20a6 6 0 0 1 12 0" /><path d="M16 6a3 3 0 0 1 0 6M17 20a6 6 0 0 0-3-5" /></Icon>
+const IconGear = () => <Icon><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" /></Icon>
+const IconHero = () => <Icon><path d="M3 5h18v14H3z" /><circle cx="8" cy="10" r="1.6" /><path d="M4 18l5-5 3 3 3-4 5 6" /></Icon>
+const IconKey = () => <Icon><circle cx="8" cy="12" r="4" /><path d="M12 12h9M18 12v3M15 12v2" /></Icon>
+const IconBot = () => <Icon><rect x="4" y="8" width="16" height="11" rx="2" /><path d="M12 8V4M8 13h.01M16 13h.01M9 17h6" /></Icon>
+const IconPulse = () => <Icon><path d="M3 12h3l2 6 4-14 2 8h7" /></Icon>
+const IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></Icon>
+const IconShard = () => <Icon><path d="M12 2l7 6-7 14-7-14z" /><path d="M5 8h14" /></Icon>
+
+// Nav is grouped into collapsible categories. A group with no `title` renders
+// its items ungrouped (Dashboard at top, Account at bottom). Each item's `roles`
+// (when present) matches server-side enforcement so the sidebar never shows a
+// link that would 403; an item without `roles` is visible to everyone.
+// Moderators are further confined to just their section + account (see below).
 const NAV = [
-  { to: '/admin', label: 'Dashboard', end: true },
-  { to: '/admin/posts', label: 'Posts' },
-  { to: '/admin/wiki', label: 'Wiki' },
-  { to: '/admin/hero', label: 'Hero Editor' },
-  { to: '/admin/moderation', label: 'Moderation', roles: ['admin', 'moderator'] },
-  { to: '/admin/settings', label: 'Settings' },
-  { to: '/admin/activity', label: 'Activity' },
-  { to: '/admin/bot-activity', label: 'Bot Activity' },
-  { to: '/admin/discord-bot', label: 'Discord Bot' },
-  { to: '/admin/auth-providers', label: 'Authentication' },
-  { to: '/admin/users', label: 'Users' },
-  { to: '/admin/account', label: 'Account' },
+  {
+    items: [
+      { to: '/admin', label: 'Dashboard', end: true, icon: IconHome, roles: ['admin', 'editor', 'moderator'] },
+    ],
+  },
+  {
+    title: 'Content',
+    items: [
+      { to: '/admin/posts', label: 'Posts', icon: IconPosts, roles: ['admin', 'editor'] },
+      { to: '/admin/pages', label: 'Pages', icon: IconPages, roles: ['admin', 'editor'] },
+      { to: '/admin/wiki', label: 'Wiki', icon: IconWiki, roles: ['admin', 'editor'] },
+      { to: '/admin/activity', label: 'Activity', icon: IconActivity, roles: ['admin', 'editor'] },
+    ],
+  },
+  {
+    title: 'Moderation',
+    items: [
+      { to: '/admin/moderation', label: 'Moderation', icon: IconShield, roles: ['admin', 'moderator'] },
+      { to: '/admin/moderation/appeals', label: 'Appeals', icon: IconShield, roles: ['admin', 'moderator'] },
+      { to: '/admin/shard-ops', label: 'In-Game Ops', icon: IconShard, roles: ['admin', 'moderator'] },
+      { to: '/admin/houses', label: 'Houses', icon: IconShard, roles: ['admin', 'moderator'] },
+    ],
+  },
+  {
+    title: 'System',
+    items: [
+      { to: '/admin/users', label: 'Users', icon: IconUsers, roles: ['admin'] },
+      { to: '/admin/invites', label: 'Invites', icon: IconUsers, roles: ['admin'] },
+      { to: '/admin/settings', label: 'Settings', icon: IconGear, roles: ['admin'] },
+      { to: '/admin/hero', label: 'Hero Editor', icon: IconHero, roles: ['admin'] },
+      { to: '/admin/auth-providers', label: 'Authentication', icon: IconKey, roles: ['admin'] },
+      { to: '/admin/discord-bot', label: 'Discord Bot', icon: IconBot, roles: ['admin'] },
+      { to: '/admin/shard', label: 'Shard (uo-link)', icon: IconShard, roles: ['admin'] },
+      { to: '/admin/shard-visibility', label: 'Shard Visibility', icon: IconShard, roles: ['admin'] },
+      { to: '/admin/bot-activity', label: 'Web Bot Activity', icon: IconPulse, roles: ['admin'] },
+    ],
+  },
+  {
+    items: [
+      { to: '/admin/characters', label: 'My Characters', icon: IconShard },
+      { to: '/admin/account', label: 'Account', icon: IconUser },
+    ],
+  },
 ]
 
+const COLLAPSE_KEY = 'admin.nav.collapsed'
+
 const TITLES = {
   '/admin': 'Dashboard',
   '/admin/posts': 'Posts',
+  '/admin/pages': 'Pages',
   '/admin/wiki': 'Wiki Pages',
   '/admin/hero': 'Hero Editor',
   '/admin/moderation': 'Moderation',
+  '/admin/moderation/appeals': 'Appeals',
+  '/admin/shard-ops': 'In-Game Ops',
+  '/admin/houses': 'House Registry',
   '/admin/settings': 'Site Settings',
   '/admin/activity': 'Activity Log',
-  '/admin/bot-activity': 'Bot Activity',
+  '/admin/bot-activity': 'Web Bot Activity',
   '/admin/discord-bot': 'Discord Bot',
+  '/admin/shard': 'Shard (uo-link)',
+  '/admin/shard-visibility': 'Shard Visibility',
+  '/admin/characters': 'My Characters',
   '/admin/auth-providers': 'Authentication',
   '/admin/users': 'Users',
+  '/admin/invites': 'Invites',
   '/admin/account': 'Account Security',
 }
 
+// Fallback page title for dynamic sub-routes not in the exact-match TITLES map.
+function sectionTitle(pathname) {
+  if (pathname.startsWith('/admin/moderation')) return 'Moderation'
+  if (pathname.startsWith('/admin/characters')) return 'My Characters'
+  if (pathname.startsWith('/admin/users/')) return 'User'
+  return 'Admin'
+}
+
 const navBtnBase = {
   textAlign: 'left',
   borderRadius: 8,
@@ -44,36 +130,69 @@ const navBtnBase = {
   fontFamily: 'var(--sans)',
   fontSize: '0.92rem',
   textDecoration: 'none',
-  display: 'block',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
   transition: 'background .15s,color .15s',
 }
 
 export default function AdminLayout() {
   const { user, logout } = useAuth()
-  const { mode } = useSite()
+  const { mode, siteTitle } = useSite()
   const navigate = useNavigate()
   const location = useLocation()
-  const title =
-    TITLES[location.pathname] ||
-    (location.pathname.startsWith('/admin/moderation') ? 'Moderation' : 'Admin')
+  const title = TITLES[location.pathname] || sectionTitle(location.pathname)
   // The hero canvas editor needs room — let it use the full content width.
   const wide = location.pathname === '/admin/hero'
   const modeDot = mode === 'live' ? 'var(--mode-live)' : 'var(--mode-maint)'
 
-  // Moderators only get the moderation section + their own account security.
+  // Moderators only get the moderation section (Discord + in-game ops) + their
+  // own account security.
   const isModerator = user?.role === 'moderator'
-  const navItems = NAV.filter((n) => {
-    if (n.roles && !n.roles.includes(user?.role)) return false
-    if (isModerator) return n.to === '/admin/moderation' || n.to === '/admin/account'
+  const MOD_PATHS = ['/admin/moderation', '/admin/moderation/appeals', '/admin/shard-ops', '/admin/houses', '/admin/account']
+  const visible = (item) => {
+    if (item.roles && !item.roles.includes(user?.role)) return false
+    if (isModerator) return MOD_PATHS.includes(item.to)
     return true
+  }
+  // Drop items the current role can't see, then drop any now-empty group so an
+  // empty category header never renders.
+  const navGroups = NAV
+    .map((g) => ({ ...g, items: g.items.filter(visible) }))
+    .filter((g) => g.items.length > 0)
+
+  // Accordion: track which titled categories are collapsed. Persist across
+  // reloads; default all-open. The group holding the active route auto-opens.
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return JSON.parse(localStorage.getItem(COLLAPSE_KEY)) || {}
+    } catch {
+      return {}
+    }
   })
+  const toggleGroup = (title) => {
+    setCollapsed((prev) => {
+      const next = { ...prev, [title]: !prev[title] }
+      try {
+        localStorage.setItem(COLLAPSE_KEY, JSON.stringify(next))
+      } catch {
+        /* private mode / quota — collapse is non-essential */
+      }
+      return next
+    })
+  }
+  const activeGroupTitle = navGroups.find((g) =>
+    g.title && g.items.some((i) => (i.end ? location.pathname === i.to : location.pathname.startsWith(i.to)))
+  )?.title
 
   // Confine a moderator who deep-links (or is redirected to the index) to a page
   // outside their remit — the API would 403 anyway, so send them to their home.
   useEffect(() => {
     if (!isModerator) return
     const p = location.pathname
-    if (!p.startsWith('/admin/moderation') && p !== '/admin/account') {
+    const allowed =
+      p.startsWith('/admin/moderation') || p.startsWith('/admin/shard-ops') || p === '/admin/account'
+    if (!allowed) {
       navigate('/admin/moderation', { replace: true })
     }
   }, [isModerator, location.pathname, navigate])
@@ -110,7 +229,7 @@ export default function AdminLayout() {
           <MoonDot />
           <div>
             <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
-              UOMysticmoon
+              {siteTitle}
             </div>
             <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
               Admin
@@ -118,12 +237,14 @@ export default function AdminLayout() {
           </div>
         </div>
 
-        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-          {navItems.map((n) => (
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
+          {navGroups.map((group) => {
+            const links = group.items.map((n) => (
               <NavLink
                 key={n.to}
                 to={n.to}
                 end={n.end}
+                className="admin-nav-link"
                 style={({ isActive }) => ({
                   ...navBtnBase,
                   background: isActive ? 'var(--blue)' : 'transparent',
@@ -131,9 +252,56 @@ export default function AdminLayout() {
                   borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
                 })}
               >
-              {n.label}
+                {n.icon && <n.icon />}
+                <span>{n.label}</span>
               </NavLink>
-          ))}
+            ))
+
+            // Untitled groups (Dashboard, Account) render their links directly.
+            if (!group.title) {
+              return (
+                <div key={group.items[0]?.to || 'group'} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {links}
+                </div>
+              )
+            }
+
+            // Titled groups get a collapsible header. The group with the active
+            // route stays open regardless of the stored collapse preference.
+            const isOpen = group.title === activeGroupTitle || !collapsed[group.title]
+            return (
+              <div key={group.title} className="admin-nav-group">
+                <button
+                  type="button"
+                  className="admin-nav-head sans"
+                  onClick={() => toggleGroup(group.title)}
+                  aria-expanded={isOpen}
+                >
+                  <span>{group.title}</span>
+                  <svg
+                    className="admin-nav-chev"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+                    aria-hidden="true"
+                  >
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+                {isOpen && (
+                  <div className="admin-nav-items" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                    {links}
+                  </div>
+                )}
+              </div>
+            )
+          })}
         </nav>
 
         <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>

client/src/routes/admin/AdminLogin.jsx

@@ -2,21 +2,21 @@ import { useEffect, useState } from 'react'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import ProviderIcon from '../../components/ProviderIcon.jsx'
+import TrustLimitModal from '../../components/security/TrustLimitModal.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
 import { api } from '../../api/client.js'
 
 // Friendly copy for the ?sso_error codes the SSO callback can redirect back with.
 const SSO_ERRORS = {
   not_linked: 'That account is not linked to an admin user. Sign in with your password, then link it under Account.',
+  disabled: 'This account is not active. Contact an administrator.',
   denied: 'Sign-in was cancelled.',
   unavailable: 'That sign-in method is not available right now.',
   bad_state: 'Your sign-in session expired. Please try again.',
   error: 'Could not complete sign-in. Please try again.',
 }
 
-const BG =
-  "linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('/assets/img/uomysticmoon-main-hero.png')"
-
 // Hidden anti-bot field. Off-screen via CSS (NOT display:none/hidden, which bots
 // skip) so real users never fill it but naive scripted bots do. Name must match
 // the server's HONEYPOT_FIELD ('company').
@@ -32,9 +32,14 @@ const honeypotStyle = {
 
 export default function AdminLogin() {
   const { user, login, loginTotp, ssoLoginTotp } = useAuth()
+  const { siteTitle, heroImage } = useSite()
+  const BG = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
   const navigate = useNavigate()
   const location = useLocation()
   const dest = location.state?.from?.pathname || '/admin'
+  // A player who signs in here belongs in the player portal, not the admin shell
+  // (the admin API 403s them anyway). Staff go to their intended admin dest.
+  const destFor = (u) => (u && u.role === 'player' ? '/account' : dest)
 
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
@@ -48,15 +53,19 @@ export default function AdminLogin() {
   const [challenge, setChallenge] = useState('')
   const [code, setCode] = useState('')
   const [ssoTotp, setSsoTotp] = useState(false)
+  const [trustDevice, setTrustDevice] = useState(false)
+  const [useRecovery, setUseRecovery] = useState(false)
+  const [trustLimit, setTrustLimit] = useState(null) // { devices, dest } when the cap is hit
 
   // SSO providers to offer (empty if none configured) + any error the callback
   // bounced us back with (?sso_error=...).
   const [providers, setProviders] = useState([])
   const ssoError = SSO_ERRORS[new URLSearchParams(location.search).get('sso_error')] || ''
 
-  // Already signed in → go straight to the panel.
+  // Already signed in → go straight to the right home for the role.
   useEffect(() => {
-    if (user) navigate(dest, { replace: true })
+    if (user) navigate(destFor(user), { replace: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, dest, navigate])
 
   // The SSO callback bounces 2FA accounts back here with ?sso_totp=1 after the IdP
@@ -101,7 +110,7 @@ export default function AdminLogin() {
         setBusy(false)
         return
       }
-      navigate(dest, { replace: true })
+      navigate(destFor(data.user), { replace: true })
     } catch (err) {
       setError(err.status === 401 ? 'Incorrect username or password.' : 'Could not sign in right now.')
       setBusy(false)
@@ -114,19 +123,34 @@ export default function AdminLogin() {
     setBusy(true)
     try {
       if (ssoTotp) {
-        const { returnTo } = await ssoLoginTotp(code)
-        navigate(returnTo || '/admin', { replace: true })
+        // Trust works on the SSO second factor exactly as it does on the password
+        // one — the IdP already proved the first factor.
+        const data = await ssoLoginTotp(code.trim(), { trustDevice })
+        const to = data.returnTo || '/admin'
+        if (data.trustLimitReached) {
+          setTrustLimit({ devices: data.devices || [], dest: to })
+          setBusy(false)
+          return
+        }
+        navigate(to, { replace: true })
       } else {
-        await loginTotp(challenge, code)
-        navigate(dest, { replace: true })
+        const entered = code.trim()
+        const data = await loginTotp(challenge, useRecovery ? '' : entered, {
+          recoveryCode: useRecovery ? entered : undefined,
+          trustDevice,
+        })
+        const to = destFor(data.user)
+        if (data.trustLimitReached) {
+          setTrustLimit({ devices: data.devices || [], dest: to })
+          setBusy(false)
+          return
+        }
+        navigate(to, { replace: true })
       }
     } catch (err) {
       const expired = err.status === 401 && /expired/i.test(err.message)
-      setError(
-        expired
-          ? 'Your verification session expired. Please sign in again.'
-          : 'Invalid verification code.',
-      )
+      const badRecovery = useRecovery ? 'That recovery code is not valid.' : 'Invalid verification code.'
+      setError(expired ? 'Your verification session expired. Please sign in again.' : badRecovery)
       setBusy(false)
       if (expired) {
         setStage('creds')
@@ -135,6 +159,10 @@ export default function AdminLogin() {
     }
   }
 
+  let submitLabel = 'Sign in'
+  if (busy) submitLabel = 'Signing in…'
+  else if (stage === 'totp') submitLabel = 'Verify'
+
   return (
     <main
       style={{
@@ -146,7 +174,8 @@ export default function AdminLogin() {
         backgroundColor: 'var(--bg-deep)',
         backgroundImage: BG,
         backgroundPosition: 'center',
-        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'min(60vh, 520px)',
       }}
     >
       <div style={{ width: '100%', maxWidth: 400 }}>
@@ -155,7 +184,7 @@ export default function AdminLogin() {
             <MoonDot size={15} glow={0.55} />
           </div>
           <h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
-            UOMysticmoon
+            {siteTitle}
           </h1>
           <p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
             Admin Panel
@@ -213,22 +242,42 @@ export default function AdminLogin() {
               </div>
             </>
           ) : (
-            <label style={{ display: 'block', marginBottom: 22 }}>
-              <span className="field-label">Authentication code</span>
+            <>
+              <label style={{ display: 'block', marginBottom: 14 }}>
+                <span className="field-label">{useRecovery ? 'Recovery code' : 'Authentication code'}</span>
                 <input
                   type="text"
-                inputMode="numeric"
+                  inputMode={useRecovery ? 'text' : 'numeric'}
                   autoComplete="one-time-code"
                   autoFocus
-                placeholder="6-digit code"
+                  placeholder={useRecovery ? 'xxxxx-xxxxx' : '6-digit code'}
                   value={code}
                   onChange={(e) => setCode(e.target.value)}
                   className="input"
                 />
                 <span className="sans" style={{ display: 'block', marginTop: 8, color: 'var(--dim)', fontSize: '0.76rem' }}>
-                Enter the code from your authenticator app.
+                  {useRecovery ? 'Enter one of your saved single-use recovery codes.' : 'Enter the code from your authenticator app.'}
                 </span>
               </label>
+              {/* Offered on the SSO second factor too — the trust is on the device,
+                  not on how the first factor was proved. */}
+              <label className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, color: 'var(--muted)', fontSize: '0.84rem' }}>
+                <input type="checkbox" checked={trustDevice} onChange={(e) => setTrustDevice(e.target.checked)} />
+                Trust this device for 30 days (skip the code next time)
+              </label>
+              {/* Recovery codes remain password-login only: the SSO second step
+                  verifies an authenticator code against the staged challenge. */}
+              {!ssoTotp && (
+                <button
+                  type="button"
+                  onClick={() => { setUseRecovery((v) => !v); setCode('') }}
+                  className="sans"
+                  style={{ display: 'block', marginBottom: 22, background: 'none', border: 'none', padding: 0, color: 'var(--accent)', cursor: 'pointer', fontSize: '0.8rem' }}
+                >
+                  {useRecovery ? 'Use an authenticator code instead' : 'Use a recovery code instead'}
+                </button>
+              )}
+            </>
           )}
 
           {(error || (stage === 'creds' && ssoError)) && (
@@ -243,7 +292,7 @@ export default function AdminLogin() {
             className="btn btn-primary"
             style={{ display: 'block', width: '100%', borderRadius: 8, padding: 12, textAlign: 'center' }}
           >
-            {busy ? 'Signing in…' : stage === 'totp' ? 'Verify' : 'Sign in'}
+            {submitLabel}
           </button>
 
           {/* SSO providers — only on the credentials step, only if any are enabled. */}
@@ -294,6 +343,14 @@ export default function AdminLogin() {
           </Link>
         </p>
       </div>
+
+      {trustLimit && (
+        <TrustLimitModal
+          devices={trustLimit.devices}
+          onTrusted={() => navigate(trustLimit.dest, { replace: true })}
+          onCancel={() => navigate(trustLimit.dest, { replace: true })}
+        />
+      )}
     </main>
   )
 }

client/src/routes/admin/views/AccountAdmin.jsx

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Loading, ErrorState } from '../../../components/PageState.jsx'
 import ProviderIcon from '../../../components/ProviderIcon.jsx'
+import RecoveryCodesDisplay from '../../../components/security/RecoveryCodesDisplay.jsx'
+import TrustedDevicesPanel from '../../../components/security/TrustedDevicesPanel.jsx'
+import RecoveryCodesPanel from '../../../components/security/RecoveryCodesPanel.jsx'
 import { api } from '../../../api/client.js'
 
 // Link/unlink external SSO identities to this account. Linking redirects through
@@ -123,10 +126,11 @@ export default function AccountAdmin() {
   const [error, setError] = useState('')
 
   // Enrollment state.
-  const [setup, setSetup] = useState(null) // { qr, otpauthUrl }
+  const [setup, setSetup] = useState(null) // fields qr and otpauthUrl once enrolling
   const [code, setCode] = useState('')
   const [busy, setBusy] = useState(false)
   const [msg, setMsg] = useState('')
+  const [newCodes, setNewCodes] = useState(null) // one-time recovery codes shown after enabling
 
   async function load() {
     try {
@@ -164,9 +168,10 @@ export default function AccountAdmin() {
     setMsg('')
     setError('')
     try {
-      await api.admin.totpEnable(code.trim())
+      const res = await api.admin.totpEnable(code.trim())
       setSetup(null)
       setCode('')
+      setNewCodes(res?.recoveryCodes || null)
       setMsg('Two-factor authentication is now enabled.')
       await load()
     } catch (err) {
@@ -302,6 +307,21 @@ export default function AccountAdmin() {
       {msg && <p className="sans" style={{ marginTop: 16, color: '#7fd0a4', fontSize: '0.86rem' }}>{msg}</p>}
       {error && <p className="sans" style={{ marginTop: 16, color: '#d98b84', fontSize: '0.86rem' }}>{error}</p>}
 
+      {/* One-time recovery codes shown right after enabling 2FA. */}
+      {newCodes && (
+        <div style={{ marginTop: 20 }}>
+          <RecoveryCodesDisplay codes={newCodes} onDone={() => setNewCodes(null)} />
+        </div>
+      )}
+
+      {/* Trusted devices + recovery-code management, only relevant with 2FA on. */}
+      {enabled && (
+        <>
+          <TrustedDevicesPanel />
+          <RecoveryCodesPanel hasPassword={account?.has_password !== false} />
+        </>
+      )}
+
       <LinkedAccounts />
     </section>
   )

client/src/routes/admin/views/AdminCharacter.jsx

@@ -0,0 +1,29 @@
+import { useParams, Link } from 'react-router-dom'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import CharacterSheet from '../../../components/CharacterSheet.jsx'
+import { useAsync } from '../../../lib/useAsync.js'
+import { api } from '../../../api/client.js'
+
+// A staff member's own character sheet inside the admin shell. Owner-checked —
+// the endpoint only returns a sheet for a character on the caller's linked account.
+export default function AdminCharacter() {
+  const { serial } = useParams()
+  const { loading, error, data } = useAsync(() => api.admin.shard.char(serial), [serial])
+  const restarting = error && error.status === 503
+  const forbidden = error && error.status === 403
+
+  return (
+    <div style={{ maxWidth: 760 }}>
+      <p style={{ margin: '0 0 18px' }}>
+        <Link to="/admin/characters" className="sans" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.86rem' }}>
+          ← Back to my characters
+        </Link>
+      </p>
+      {loading && <Loading />}
+      {restarting && <ErrorState message="The game server is restarting — try again shortly." />}
+      {forbidden && <ErrorState message="That character is not on an account linked to you." />}
+      {error && !restarting && !forbidden && <ErrorState message="Could not load that character right now." />}
+      {!loading && !error && data && <CharacterSheet char={data} moderation />}
+    </div>
+  )
+}

client/src/routes/admin/views/AdminCharacters.jsx

@@ -0,0 +1,18 @@
+import CharacterStats from '../../../components/CharacterStats.jsx'
+import GameAccounts from '../../../components/GameAccounts.jsx'
+import VendorSales from '../../../components/VendorSales.jsx'
+import { api } from '../../../api/client.js'
+
+// Staff link their OWN in-game account and view their characters — the same
+// shared component players use, pointed at the staff self-service endpoints.
+// Sits inside the Admin shell, which supplies the "My Characters" page header;
+// stat tiles bring it to parity with the Player Portal's Characters page.
+export default function AdminCharacters() {
+  return (
+    <section style={{ maxWidth: 760 }}>
+      <CharacterStats scope={api.admin.shard} />
+      <GameAccounts scope={api.admin.shard} charTo={(serial) => `/admin/characters/${serial}`} />
+      <VendorSales fetchSales={api.admin.shard.sales} />
+    </section>
+  )
+}

client/src/routes/admin/views/Appeals.jsx

@@ -0,0 +1,288 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Modal from '../../../components/Modal.jsx'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useAsync } from '../../../lib/useAsync.js'
+import { ago, dateTime } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+
+// Staff queue for moderation appeals (bans/mutes appealed by players). Mirrors
+// the Moderation.jsx tile/feed layout: a status-filter segmented control over a
+// flat table, with per-row Claim / Resolve actions. Resolve opens a modal — no
+// browser confirm()/alert() anywhere here.
+
+const STATUS_TABS = [
+  { key: 'open', label: 'Open', param: undefined },
+  { key: 'pending', label: 'Pending', param: 'pending' },
+  { key: 'under_review', label: 'Under review', param: 'under_review' },
+  { key: 'approved', label: 'Approved', param: 'approved' },
+  { key: 'denied', label: 'Denied', param: 'denied' },
+  { key: 'withdrawn', label: 'Withdrawn', param: 'withdrawn' },
+  { key: 'all', label: 'All', param: 'all' },
+]
+
+const STATUS_STYLE = {
+  pending: { color: '#e0b070', background: 'rgba(224,176,112,0.12)', border: '1px solid rgba(224,176,112,0.4)' },
+  under_review: { color: '#7fa8d0', background: 'rgba(127,168,208,0.14)', border: '1px solid rgba(127,168,208,0.4)' },
+  approved: { color: '#7fd0a4', background: 'rgba(95,185,138,0.16)', border: '1px solid rgba(95,185,138,0.4)' },
+  denied: { color: '#d98b84', background: 'rgba(217,139,132,0.16)', border: '1px solid rgba(217,139,132,0.4)' },
+  withdrawn: { color: '#9fb0c6', background: 'rgba(127,153,189,0.14)', border: '1px solid var(--line)' },
+}
+const STATUS_LABEL = {
+  pending: 'Pending',
+  under_review: 'Under review',
+  approved: 'Approved',
+  denied: 'Denied',
+  withdrawn: 'Withdrawn',
+}
+
+function excerpt(text, n = 90) {
+  if (!text) return ''
+  return text.length > n ? `${text.slice(0, n)}…` : text
+}
+
+export default function Appeals() {
+  const navigate = useNavigate()
+  const [tab, setTab] = useState('open')
+  const [tick, setTick] = useState(0)
+  const reload = useCallback(() => setTick((t) => t + 1), [])
+  const [busyId, setBusyId] = useState('')
+  const [resolving, setResolving] = useState(null) // the appeal being resolved
+  const [notice, setNotice] = useState(null) // fields text and tone
+
+  const activeTab = STATUS_TABS.find((t) => t.key === tab) || STATUS_TABS[0]
+  const { loading, error, data } = useAsync(
+    () => api.admin.getAppeals({ status: activeTab.param, limit: 100 }),
+    [tab, tick],
+  )
+
+  const goUser = (id) => navigate(`/admin/moderation/user/${id}`)
+
+  async function claim(appeal) {
+    setBusyId(appeal.id)
+    setNotice(null)
+    try {
+      await api.admin.claimAppeal(appeal.id)
+      reload()
+    } catch (err) {
+      setNotice({ text: err.message || 'Could not claim this appeal.', tone: 'error' })
+    } finally {
+      setBusyId('')
+    }
+  }
+
+  function onResolved(appeal, result) {
+    setResolving(null)
+    const { reversal } = result
+    if (reversal?.attempted && reversal.ok) {
+      setNotice({ text: `Discord ${appeal.action_type} lifted.`, tone: 'ok' })
+    } else if (reversal?.attempted && !reversal.ok) {
+      setNotice({ text: 'Reversal failed — reverse manually in Discord.', tone: 'error' })
+    } else {
+      setNotice(null)
+    }
+    reload()
+  }
+
+  if (loading) return <Loading />
+  if (error) return <ErrorState message="Could not load appeals." />
+
+  const rows = data || []
+
+  return (
+    <section>
+      {/* Status filter */}
+      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
+        {STATUS_TABS.map((t) => (
+          <button
+            key={t.key}
+            onClick={() => setTab(t.key)}
+            className="pill"
+            style={tab === t.key ? activePill : undefined}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {notice && (
+        <p
+          className="sans"
+          style={{ margin: '0 0 14px', color: notice.tone === 'error' ? '#d98b84' : '#7fd0a4', fontSize: '0.85rem' }}
+        >
+          {notice.text}
+        </p>
+      )}
+
+      <div className="panel-flat">
+        <table className="adm-table">
+          <thead>
+            <tr>
+              <th className="adm-th">Target</th>
+              <th className="adm-th">Action</th>
+              <th className="adm-th">Appeal</th>
+              <th className="adm-th">Submitted by</th>
+              <th className="adm-th">Age</th>
+              <th className="adm-th">Status</th>
+              <th className="adm-th">Reversal</th>
+              <th className="adm-th" />
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 && (
+              <tr>
+                <td className="adm-td" colSpan={8} style={muted}>
+                  No appeals match this filter.
+                </td>
+              </tr>
+            )}
+            {rows.map((a) => (
+              <tr key={a.id}>
+                <td className="adm-td">
+                  <span className="link-accent" onClick={() => goUser(a.discord_user_id)}>
+                    {a.action_target_tag || a.discord_user_id}
+                  </span>
+                </td>
+                <td className="adm-td">
+                  <span className={`badge badge-${a.action_type}`}>{a.action_type}</span>
+                </td>
+                <td className="adm-td" style={{ color: 'var(--text)', maxWidth: 320 }}>
+                  {excerpt(a.submitted_text)}
+                </td>
+                <td className="adm-td dim">{a.submitter_username || '—'}</td>
+                <td className="adm-td dim" title={dateTime(a.submitted_at)}>{ago(a.submitted_at)}</td>
+                <td className="adm-td">
+                  <span className="badge" style={STATUS_STYLE[a.status]}>{STATUS_LABEL[a.status] || a.status}</span>
+                </td>
+                <td className="adm-td dim">
+                  {a.reversal_status === 'done' && <span style={{ color: '#7fd0a4' }}>Lifted</span>}
+                  {a.reversal_status === 'failed' && <span style={{ color: '#d98b84' }}>Failed</span>}
+                  {(!a.reversal_status || a.reversal_status === 'none') && '—'}
+                </td>
+                <td className="adm-td" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  {a.status === 'pending' && (
+                    <button
+                      onClick={() => claim(a)}
+                      disabled={busyId === a.id}
+                      className="pill"
+                      style={{ marginRight: 6 }}
+                    >
+                      {busyId === a.id ? 'Claiming…' : 'Claim'}
+                    </button>
+                  )}
+                  {(a.status === 'pending' || a.status === 'under_review') && (
+                    <button onClick={() => setResolving(a)} className="btn btn-primary btn-sq" style={{ padding: '5px 12px', fontSize: '0.82rem' }}>
+                      Resolve
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {resolving && (
+        <ResolveModal appeal={resolving} onClose={() => setResolving(null)} onResolved={onResolved} />
+      )}
+    </section>
+  )
+}
+
+function ResolveModal({ appeal, onClose, onResolved }) {
+  const [status, setStatus] = useState('approved')
+  const [staffResponse, setStaffResponse] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+
+  async function submit() {
+    setBusy(true)
+    setError('')
+    try {
+      const result = await api.admin.resolveAppeal(appeal.id, {
+        status,
+        staff_response: staffResponse.trim() || undefined,
+      })
+      onResolved(appeal, result)
+    } catch (err) {
+      setError(err.message || 'Could not resolve this appeal.')
+      setBusy(false)
+    }
+  }
+
+  const verb = status === 'approved' ? 'approved' : 'denied'
+
+  return (
+    <Modal
+      title={`Resolve appeal — ${appeal.action_target_tag || appeal.discord_user_id}`}
+      onClose={onClose}
+      width={560}
+      footer={
+        <>
+          <button onClick={onClose} disabled={busy} className="pill">
+            Cancel
+          </button>
+          <button onClick={submit} disabled={busy} className="btn btn-primary btn-sq">
+            {busy ? 'Saving…' : `Mark ${verb}`}
+          </button>
+        </>
+      }
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {error && <p className="sans" style={{ margin: 0, color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
+
+        <div>
+          <span className="field-label">Submitted appeal</span>
+          <div
+            className="sans"
+            style={{
+              marginTop: 6,
+              padding: '10px 12px',
+              border: '1px solid var(--line)',
+              borderRadius: 8,
+              color: 'var(--text)',
+              fontSize: '0.86rem',
+              whiteSpace: 'pre-wrap',
+              maxHeight: 200,
+              overflow: 'auto',
+            }}
+          >
+            {appeal.submitted_text}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', gap: 10 }}>
+          <button
+            onClick={() => setStatus('approved')}
+            className="pill"
+            style={status === 'approved' ? { background: 'var(--blue)', color: 'var(--ink)', borderColor: '#7fd0a4' } : undefined}
+          >
+            Approve
+          </button>
+          <button
+            onClick={() => setStatus('denied')}
+            className="pill"
+            style={status === 'denied' ? { background: 'var(--blue)', color: 'var(--ink)', borderColor: '#d98b84' } : undefined}
+          >
+            Deny
+          </button>
+        </div>
+
+        <label>
+          <span className="field-label">Staff response (optional)</span>
+          <textarea
+            className="textarea"
+            placeholder="Message shown to the player…"
+            value={staffResponse}
+            onChange={(e) => setStaffResponse(e.target.value)}
+            rows={4}
+            style={{ width: '100%' }}
+          />
+        </label>
+      </div>
+    </Modal>
+  )
+}
+
+const activePill = { background: 'var(--blue)', color: 'var(--ink)', borderColor: 'var(--accent)' }
+const muted = { color: 'var(--muted)' }

client/src/routes/admin/views/AuthProvidersAdmin.jsx

@@ -44,6 +44,14 @@ function CallbackHint({ id }) {
   )
 }
 
+// Live = enabled and healthy; Incomplete = enabled but missing/invalid config;
+// Disabled otherwise.
+function ProviderStatus({ provider: p }) {
+  if (p.enabled && p.health.valid) return <span className="sans" style={{ color: '#7fd0a4' }}>Live</span>
+  if (p.enabled) return <span className="sans" style={{ color: '#e0b070' }}>Incomplete</span>
+  return <span className="sans dim">Disabled</span>
+}
+
 function Toggle({ checked, onChange, label }) {
   return (
     <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: '0.9rem', color: 'var(--ink)' }}>
@@ -292,13 +300,7 @@ function CustomProviders({ items, onChanged }) {
                   <td className="adm-td" style={{ color: 'var(--head)' }}>{p.name}</td>
                   <td className="adm-td dim">{p.kind}</td>
                   <td className="adm-td">
-                    {p.enabled && p.health.valid ? (
-                      <span className="sans" style={{ color: '#7fd0a4' }}>Live</span>
-                    ) : p.enabled ? (
-                      <span className="sans" style={{ color: '#e0b070' }}>Incomplete</span>
-                    ) : (
-                      <span className="sans dim">Disabled</span>
-                    )}
+                    <ProviderStatus provider={p} />
                   </td>
                   <td className="adm-td" style={{ textAlign: 'right' }}>
                     <span className="link-accent" onClick={() => setEditing(p)}>Edit</span>

client/src/routes/admin/views/BotActivityAdmin.jsx

@@ -115,8 +115,8 @@ export default function BotActivityAdmin() {
                   </td>
                 </tr>
               )}
-              {events.map((ev, i) => (
-                <tr key={`${ev.ts}-${ev.ip}-${i}`}>
+              {events.map((ev) => (
+                <tr key={`${ev.ts}-${ev.ip}-${ev.type}`}>
                   <td className="adm-td dim">{dateTime(ev.ts)}</td>
                   <td className="adm-td" style={{ ...mono, color: 'var(--text)' }}>
                     {ev.ip}

client/src/routes/admin/views/Dashboard.jsx

@@ -4,9 +4,15 @@ import { useAsync } from '../../../lib/useAsync.js'
 import { ago, dateTime } from '../../../lib/format.js'
 import { api } from '../../../api/client.js'
 import { useSite } from '../../../contexts/SiteContext.jsx'
+import { useAuth } from '../../../contexts/AuthContext.jsx'
 
 export default function Dashboard() {
   const { refresh: refreshSite } = useSite()
+  const { user } = useAuth()
+  // PUT /admin/site-mode is adminOnly. The dashboard itself is staff-wide, so the
+  // toggle needs its own gate — same rule the sidebar follows (AdminLayout: never
+  // show a non-admin a control that would 403).
+  const isAdmin = user?.role === 'admin'
   const [tick, setTick] = useState(0)
   const reload = useCallback(() => setTick((t) => t + 1), [])
 
@@ -15,6 +21,7 @@ export default function Dashboard() {
     [tick],
   )
   const [busy, setBusy] = useState(false)
+  const [modeError, setModeError] = useState('')
 
   if (loading) return <Loading />
   if (error) return <ErrorState message="Could not load the dashboard." />
@@ -32,12 +39,21 @@ export default function Dashboard() {
     { value: dash.counts?.users ?? 0, label: 'Users' },
   ]
 
+  // The rejection was previously unhandled: a refused toggle surfaced only as an
+  // unhandled promise rejection in the console while the button silently reverted.
   async function toggle() {
     setBusy(true)
+    setModeError('')
     try {
       await api.admin.setSiteMode(isLive ? 'maintenance' : 'live')
       await refreshSite()
       reload()
+    } catch (err) {
+      setModeError(
+        err.status === 403
+          ? 'Only an administrator can change the site mode.'
+          : 'Could not change the site mode. Try again.',
+      )
     } finally {
       setBusy(false)
     }
@@ -45,6 +61,9 @@ export default function Dashboard() {
 
   const changed = dash.last_change || {}
 
+  let modeLabel = isLive ? 'Switch to Maintenance' : 'Switch to Live'
+  if (busy) modeLabel = 'Saving…'
+
   return (
     <section>
       <div
@@ -75,15 +94,22 @@ export default function Dashboard() {
             {changed.by ? `Changed by ${changed.by}` : 'No changes recorded'}
             {changed.at ? ` · ${dateTime(changed.at)}` : ''}
           </div>
+          {modeError && (
+            <div className="sans" style={{ fontSize: '0.8rem', marginTop: 8, color: 'var(--danger, #d98b8b)' }}>
+              {modeError}
             </div>
+          )}
+        </div>
+        {isAdmin && (
           <button
             onClick={toggle}
             disabled={busy}
             className="sans"
             style={{ border: '1px solid var(--accent)', borderRadius: 999, padding: '11px 24px', background: 'rgba(127,153,189,0.14)', color: '#d8e2ef', fontWeight: 600, fontSize: '0.9rem', cursor: 'pointer' }}
           >
-          {busy ? 'Saving…' : isLive ? 'Switch to Maintenance' : 'Switch to Live'}
+            {modeLabel}
           </button>
+        )}
       </div>
 
       <div className="grid-4" style={{ gap: 14, marginBottom: 28 }}>

client/src/routes/admin/views/EmailDelivery.jsx

@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../../../api/client.js'
+import { useSite } from '../../../contexts/SiteContext.jsx'
+
+// Email delivery panel (Gmail over OAuth2), rendered as a section on the Settings
+// page. Sending is authorized by an in-app "Connect Gmail" consent flow that
+// captures a refresh token server-side — the token is write-only over the API
+// (stored encrypted, never returned). Reuses the Google SSO OAuth client, so it
+// requires the Google provider to be configured on the Authentication page first.
+
+const STATUS_COLOR = {
+  connected: '#7fd0a4',
+  error: '#d98b84',
+  unconfigured: 'var(--muted)',
+}
+
+// Human-friendly text for the ?email_error=<code> the callback may redirect with.
+const ERROR_TEXT = {
+  denied: 'Google sign-in was cancelled or denied.',
+  bad_state: 'The connect session expired. Please try again.',
+  no_client: 'The Google OAuth client is not configured.',
+  no_refresh_token:
+    'Google did not return a refresh token. Remove this app under your Google Account → Security → Third-party access, then reconnect.',
+  no_email: 'Could not read the Gmail address from Google.',
+  error: 'Could not connect the Gmail account. Please try again.',
+}
+
+function StatusPanel({ config }) {
+  const color = STATUS_COLOR[config.status] || 'var(--muted)'
+  return (
+    <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span style={{ width: 9, height: 9, borderRadius: '50%', background: color, boxShadow: `0 0 8px ${color}` }} />
+        <span className="sans" style={{ fontSize: '0.9rem', color: 'var(--ink)', textTransform: 'capitalize' }}>
+          {config.status || 'unconfigured'}
+        </span>
+      </div>
+      {config.senderEmail && (
+        <p className="sans" style={{ margin: 0, fontSize: '0.85rem', color: 'var(--ink)' }}>
+          Sending as <strong>{config.senderEmail}</strong>
+        </p>
+      )}
+      {config.statusDetail && (
+        <p className="sans" style={{ margin: 0, fontSize: '0.82rem', color: 'var(--muted)' }}>{config.statusDetail}</p>
+      )}
+      {config.lastVerifiedAt && (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.78rem' }}>
+          Last verified: {new Date(config.lastVerifiedAt).toLocaleString()}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default function EmailDelivery() {
+  const { siteTitle } = useSite()
+  const [config, setConfig] = useState(null)
+  const [error, setError] = useState('')
+  const [senderName, setSenderName] = useState('')
+  const [enabled, setEnabled] = useState(false)
+  const [busy, setBusy] = useState('')
+  const [msg, setMsg] = useState('')
+  const [actionError, setActionError] = useState('')
+  const [banner, setBanner] = useState(null) // fields kind ('ok' or 'err') and text
+
+  const load = useCallback(async (seedForm = false) => {
+    try {
+      const c = await api.admin.getEmailConfig()
+      setConfig(c)
+      if (seedForm) {
+        setSenderName(c.senderName || '')
+        setEnabled(c.enabled)
+      }
+      return c
+    } catch {
+      setError('Could not load email settings.')
+      return null
+    }
+  }, [])
+
+  // On mount, surface the outcome of a just-completed connect redirect, strip the
+  // query params so a refresh doesn't replay the banner, then load config.
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    if (params.has('email_connected')) {
+      setBanner({ kind: 'ok', text: 'Gmail account connected.' })
+    } else if (params.has('email_error')) {
+      setBanner({ kind: 'err', text: ERROR_TEXT[params.get('email_error')] || 'Could not connect email.' })
+    }
+    if (params.has('email_connected') || params.has('email_error')) {
+      params.delete('email_connected')
+      params.delete('email_error')
+      const qs = params.toString()
+      window.history.replaceState({}, '', window.location.pathname + (qs ? `?${qs}` : ''))
+    }
+    load(true)
+  }, [load])
+
+  async function connect() {
+    setBusy('connect')
+    setActionError('')
+    try {
+      const { url } = await api.admin.emailConnectUrl()
+      window.location.href = url
+    } catch (err) {
+      setActionError(err.message || 'Could not start the connect flow.')
+      setBusy('')
+    }
+  }
+
+  async function save() {
+    setBusy('save')
+    setMsg('')
+    setActionError('')
+    try {
+      const saved = await api.admin.saveEmailConfig({ senderName, enabled })
+      setConfig(saved)
+      setMsg('Saved.')
+    } catch (err) {
+      setActionError(err.message || 'Could not save.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function sendTest() {
+    setBusy('test')
+    setMsg('')
+    setActionError('')
+    try {
+      const r = await api.admin.testEmail()
+      setMsg(`Test email sent to ${r.to}.`)
+      await load()
+    } catch (err) {
+      setActionError(err.message || 'Could not send the test email.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function disconnect() {
+    setBusy('disconnect')
+    setMsg('')
+    setActionError('')
+    try {
+      const c = await api.admin.disconnectEmail()
+      setConfig(c)
+      setEnabled(false)
+      setMsg('Disconnected.')
+    } catch (err) {
+      setActionError(err.message || 'Could not disconnect.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  if (error) return <p className="sans" style={{ color: '#d98b84' }}>{error}</p>
+  if (!config) return null
+
+  const connected = config.hasRefreshToken
+
+  return (
+    <section style={{ maxWidth: 620, display: 'flex', flexDirection: 'column', gap: 16, marginTop: 40, borderTop: '1px solid var(--line-soft)', paddingTop: 30 }}>
+      <div>
+        <h2 className="display" style={{ margin: 0, fontSize: '1.2rem', color: 'var(--head)' }}>Email delivery</h2>
+        <p className="sans dim" style={{ margin: '6px 0 0', fontSize: '0.82rem' }}>
+          Sends the contact form through Gmail over OAuth2, delivered to the
+          <strong> Contact email</strong> above. Reuses the Google authentication
+          client — configure that on the Authentication page first.
+        </p>
+      </div>
+
+      {banner && (
+        <div
+          className="sans"
+          style={{
+            fontSize: '0.85rem',
+            borderRadius: 8,
+            padding: '10px 12px',
+            border: `1px solid ${banner.kind === 'ok' ? '#3f6b52' : '#7a4440'}`,
+            color: banner.kind === 'ok' ? '#7fd0a4' : '#d98b84',
+          }}
+        >
+          {banner.text}
+        </div>
+      )}
+
+      <StatusPanel config={config} />
+
+      {!config.googleConfigured && (
+        <p className="sans" style={{ margin: 0, fontSize: '0.82rem', color: '#e0b070' }}>
+          The Google authentication provider needs a client ID and secret before
+          you can connect a Gmail account.
+        </p>
+      )}
+
+      {!connected ? (
+        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+          <button onClick={connect} disabled={busy === 'connect' || !config.googleConfigured} className="btn btn-primary btn-sq">
+            {busy === 'connect' ? 'Redirecting…' : 'Connect Gmail'}
+          </button>
+        </div>
+      ) : (
+        <>
+          <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: '0.9rem', color: 'var(--ink)' }}>
+            <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
+            Enable email sending
+          </label>
+
+          <label style={{ display: 'block' }}>
+            <span className="field-label">From display name (optional)</span>
+            <input
+              type="text"
+              value={senderName}
+              onChange={(e) => setSenderName(e.target.value)}
+              className="input"
+              autoComplete="off"
+              placeholder={siteTitle}
+            />
+          </label>
+
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+            <button onClick={save} disabled={busy === 'save'} className="btn btn-primary btn-sq">
+              {busy === 'save' ? 'Saving…' : 'Save changes'}
+            </button>
+            <button onClick={sendTest} disabled={busy === 'test'} className="pill">
+              {busy === 'test' ? 'Sending…' : 'Send test'}
+            </button>
+            <button onClick={connect} disabled={busy === 'connect'} className="pill">
+              Reconnect
+            </button>
+            <button onClick={disconnect} disabled={busy === 'disconnect'} className="pill">
+              Disconnect
+            </button>
+          </div>
+        </>
+      )}
+
+      <div style={{ minHeight: 18 }}>
+        {msg && <span className="sans" style={{ color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</span>}
+        {actionError && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{actionError}</span>}
+      </div>
+    </section>
+  )
+}

client/src/routes/admin/views/HeroEditor.jsx

@@ -23,6 +23,34 @@ function tooLargeToUpload(size) {
   )
 }
 
+// Label for an image-upload button: busy, replace-existing, or first upload.
+function uploadLabel(up, hasSrc) {
+  if (up) return 'Uploading…'
+  return hasSrc ? 'Replace' : 'Upload'
+}
+
+// Shared image-upload behaviour for the element panels that point props.src at
+// the uploaded URL (moon + image). Returns the busy flag and file <input> handler.
+function useImageUpload(onProps) {
+  const [up, setUp] = useState(false)
+  async function onFile(e) {
+    const f = e.target.files?.[0]
+    e.target.value = ''
+    if (!f) return
+    if (tooLargeToUpload(f.size)) return
+    setUp(true)
+    try {
+      const { url } = await api.admin.upload(f)
+      onProps({ src: url })
+    } catch {
+      /* ignore */
+    } finally {
+      setUp(false)
+    }
+  }
+  return { up, onFile }
+}
+
 function newElement(type, z) {
   const base = { id: genId(), type, x: 50, y: 50, z, anchor: 'center' }
   if (type === 'text_block') {
@@ -53,6 +81,23 @@ function scaleFontSize(v, ratio) {
   return v
 }
 
+// The props patch for a resize drag, per element type: image width is a % of the
+// canvas, moon size is px, and a text_block resizes its box and scales every
+// line's font proportionally. `ctx` carries the drag origin + measured geometry.
+function resizePatch(el, ctx) {
+  const { orig, dxPx, dxLogical, rectWidth, baseWidth, baseLines } = ctx
+  if (el.type === 'image') {
+    return { width: Math.round(clamp(orig + (dxPx / rectWidth) * 100, 5, 100)) } // %
+  }
+  if (el.type === 'moon') {
+    return { size: Math.round(clamp(orig + dxLogical, 24, 400)) } // px
+  }
+  const width = Math.round(clamp(orig + dxLogical, 120, 1180))
+  const ratio = baseWidth ? width / baseWidth : 1
+  const lines = baseLines.map((l) => ({ ...l, fontSize: scaleFontSize(l.fontSize, ratio) }))
+  return { width, lines }
+}
+
 export default function HeroEditor() {
   const [layout, setLayout] = useState(null)
   const [live, setLive] = useState(null)
@@ -203,7 +248,9 @@ export default function HeroEditor() {
     if (!dim) return
     const rect = canvasRef.current.getBoundingClientRect()
     const sx = e.clientX
-    const orig = el.props?.[dim] ?? (dim === 'width' && el.type === 'image' ? 40 : dim === 'width' ? 600 : 64)
+    let defaultDim = 64
+    if (dim === 'width') defaultDim = el.type === 'image' ? 40 : 600
+    const orig = el.props?.[dim] ?? defaultDim
     // Snapshot the starting width + lines for text blocks so font scaling is always
     // computed against the drag origin (no rounding drift as the pointer moves).
     const baseWidth = el.type === 'text_block' ? orig : 0
@@ -217,17 +264,7 @@ export default function HeroEditor() {
     const move = (ev) => {
       const dxPx = ev.clientX - sx
       const dxLogical = dxPx / scale // client px → stage px
-      if (el.type === 'image') {
-        updateProps(el.id, { width: Math.round(clamp(orig + (dxPx / rect.width) * 100, 5, 100)) }) // %
-      } else if (el.type === 'moon') {
-        updateProps(el.id, { size: Math.round(clamp(orig + dxLogical, 24, 400)) }) // px
-      } else {
-        // text_block: resize the box and scale every line's font proportionally.
-        const width = Math.round(clamp(orig + dxLogical, 120, 1180))
-        const ratio = baseWidth ? width / baseWidth : 1
-        const lines = baseLines.map((l) => ({ ...l, fontSize: scaleFontSize(l.fontSize, ratio) }))
-        updateProps(el.id, { width, lines })
-      }
+      updateProps(el.id, resizePatch(el, { orig, dxPx, dxLogical, rectWidth: rect.width, baseWidth, baseLines }))
     }
     const up = () => {
       node.removeEventListener('pointermove', move)
@@ -534,24 +571,7 @@ const swatch = { width: '100%', height: 38, padding: 2, border: '1px solid var(-
 
 function MoonPanel({ element, onProps }) {
   const p = element.props || {}
-  const [up, setUp] = useState(false)
-  // Reuses the shared admin upload endpoint (same as the image/background panels);
-  // a successful upload just points props.src at the returned URL.
-  async function onFile(e) {
-    const f = e.target.files?.[0]
-    e.target.value = ''
-    if (!f) return
-    if (tooLargeToUpload(f.size)) return
-    setUp(true)
-    try {
-      const { url } = await api.admin.upload(f)
-      onProps({ src: url })
-    } catch {
-      /* ignore */
-    } finally {
-      setUp(false)
-    }
-  }
+  const { up, onFile } = useImageUpload(onProps)
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
       <div>
@@ -562,7 +582,7 @@ function MoonPanel({ element, onProps }) {
           <p className="sans dim" style={{ margin: '0 0 8px', fontSize: '0.8rem' }}>Using the default moon from the hero artwork.</p>
         )}
         <label className="btn btn-ghost btn-sq" style={{ display: 'inline-block', cursor: 'pointer' }}>
-          {up ? 'Uploading…' : p.src ? 'Replace' : 'Upload'}
+          {uploadLabel(up, !!p.src)}
           <input type="file" accept="image/*" onChange={onFile} hidden disabled={up} />
         </label>
         {p.src && (
@@ -613,29 +633,14 @@ function BadgePanel({ element, onProps }) {
 
 function ImagePanel({ element, onProps }) {
   const p = element.props || {}
-  const [up, setUp] = useState(false)
-  async function onFile(e) {
-    const f = e.target.files?.[0]
-    e.target.value = ''
-    if (!f) return
-    if (tooLargeToUpload(f.size)) return
-    setUp(true)
-    try {
-      const { url } = await api.admin.upload(f)
-      onProps({ src: url })
-    } catch {
-      /* ignore */
-    } finally {
-      setUp(false)
-    }
-  }
+  const { up, onFile } = useImageUpload(onProps)
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
       <div>
         <span className="field-label">Image</span>
         {p.src && <img src={p.src} alt="" style={{ width: '100%', maxHeight: 90, objectFit: 'contain', borderRadius: 6, border: '1px solid var(--line)', marginBottom: 8 }} />}
         <label className="btn btn-ghost btn-sq" style={{ display: 'inline-block', cursor: 'pointer' }}>
-          {up ? 'Uploading…' : p.src ? 'Replace' : 'Upload'}
+          {uploadLabel(up, !!p.src)}
           <input type="file" accept="image/*" onChange={onFile} hidden disabled={up} />
         </label>
       </div>

client/src/routes/admin/views/HousesAdmin.jsx

@@ -0,0 +1,119 @@
+import { useMemo, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useAsync } from '../../../lib/useAsync.js'
+import { useShardFeed } from '../../../lib/useShardFeed.js'
+import { api } from '../../../api/client.js'
+
+// Staff-only FULL house registry (admin + moderator). Owner, price, co-owners and
+// decay — everything the public board hides. Loaded from /admin/shard/houses, kept
+// live from the admin SSE channel (house.update / house.remove).
+const HOUSE_KINDS = new Set(['house.update', 'house.remove', 'house.decay'])
+
+const DECAY_TONE = {
+  LikeNew: '#7fd0a4', Ageless: '#7fd0a4', Slightly: '#a9cf8a', Somewhat: '#d7c56a',
+  Fairly: '#e0a95f', Greatly: '#d9736f', IDOC: '#e05a5a', Collapsed: '#8c96a5',
+}
+
+function DecayBadge({ decay, isIdoc }) {
+  const label = isIdoc ? 'IDOC' : decay
+  if (!label) return null
+  const tone = DECAY_TONE[label] || 'var(--muted)'
+  return (
+    <span className="sans" style={{ flex: 'none', fontSize: '0.68rem', color: tone, border: `1px solid ${tone}66`, borderRadius: 999, padding: '2px 8px' }}>
+      {label}
+    </span>
+  )
+}
+
+function ownerLabel(h) {
+  return h.ownerName || h.ownerAcct || null
+}
+
+function HouseRow({ h }) {
+  const owner = ownerLabel(h)
+  return (
+    <div className="panel" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+          <strong className="display" style={{ fontSize: '1rem', color: 'var(--head)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {h.name || 'An unnamed house'}
+          </strong>
+          <DecayBadge decay={h.decay} isIdoc={h.isIdoc} />
+        </div>
+        <div className="sans dim" style={{ fontSize: '0.78rem', marginTop: 3 }}>
+          {owner ? <>Owned by <span style={{ color: 'var(--ink)' }}>{owner}</span></> : 'No owner'}
+          {(h.coOwners || h.friends) ? ` · ${h.coOwners || 0} co-owners, ${h.friends || 0} friends` : ''}
+        </div>
+        <div className="sans dim" style={{ fontSize: '0.72rem', marginTop: 2 }}>
+          {h.region || h.map || '—'}{h.x != null ? ` (${h.x}, ${h.y})` : ''}
+        </div>
+      </div>
+      {h.price != null && (
+        <div className="sans" style={{ flex: 'none', textAlign: 'right' }}>
+          <div style={{ fontSize: '0.92rem', color: 'var(--head)', fontVariantNumeric: 'tabular-nums' }}>{Number(h.price).toLocaleString()}</div>
+          <div className="dim" style={{ fontSize: '0.64rem', letterSpacing: '0.04em', textTransform: 'uppercase' }}>placement value</div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function HousesAdmin() {
+  const { loading, error, data } = useAsync(() => api.admin.shard.houses())
+  // Full registry deltas ride the admin SSE channel (never the public one).
+  const { events, connected } = useShardFeed({ url: api.adminShardStreamUrl, filter: HOUSE_KINDS, max: 80 })
+  const [q, setQ] = useState('')
+
+  const board = useMemo(() => {
+    const map = new Map()
+    for (const h of data || []) if (h && h.serial) map.set(h.serial, h)
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const ev = events[i]
+      if (!ev.serial) continue
+      if (ev.kind === 'house.update') {
+        map.set(ev.serial, { ...ev, ownerName: ev.owner?.name ?? ev.ownerName, ownerAcct: ev.owner?.acct ?? ev.ownerAcct })
+      } else if (ev.kind === 'house.remove') {
+        map.delete(ev.serial)
+      } else if (ev.kind === 'house.decay') {
+        const cur = map.get(ev.serial) || { serial: ev.serial, name: ev.name, region: ev.region, map: ev.map, x: ev.x, y: ev.y }
+        map.set(ev.serial, { ...cur, isIdoc: String(ev.to).toUpperCase() === 'IDOC' })
+      }
+    }
+    return [...map.values()]
+  }, [data, events])
+
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase()
+    const rows = needle
+      ? board.filter((h) => [h.name, h.region, h.map, ownerLabel(h)].some((v) => v && String(v).toLowerCase().includes(needle)))
+      : board
+    return [...rows].sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+  }, [board, q])
+
+  if (loading) return <Loading />
+  if (error) return <ErrorState message="Could not load the house registry." />
+
+  return (
+    <section>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
+        <p className="sans" style={{ color: 'var(--accent)', fontSize: '0.82rem', margin: 0 }}>
+          {board.length.toLocaleString()} houses
+          <span className="dim" style={{ marginLeft: 10, color: connected ? '#7fd0a4' : 'var(--muted)' }}>{connected ? '● live' : '○ offline'}</span>
+        </p>
+        <input className="input sans" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search by owner, region…" style={{ flex: 'none', width: 230, maxWidth: '55%', fontSize: '0.84rem' }} />
+      </div>
+      {board.length === 0 ? (
+        <div className="panel" style={{ padding: 24, textAlign: 'center' }}>
+          <p className="sans dim" style={{ margin: 0 }}>No houses are being tracked right now.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {filtered.map((h) => <HouseRow key={h.serial} h={h} />)}
+        </div>
+      )}
+      {board.length > 0 && filtered.length === 0 && (
+        <p className="sans dim" style={{ textAlign: 'center', marginTop: 20 }}>No houses match “{q}”.</p>
+      )}
+    </section>
+  )
+}

client/src/routes/admin/views/InvitesAdmin.jsx

@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { dateTime } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+
+// Admin email invites: send an invite at a chosen access level, see recent
+// invites and their status, revoke pending ones. When email delivery isn't
+// configured the create response hands back the accept link to copy manually.
+
+const ROLES = ['player', 'moderator', 'editor', 'admin']
+const ROLE_BADGE = { admin: 'badge-admin', editor: 'badge-editor', moderator: 'badge-moderator', player: 'badge-player' }
+const STATUS_COLOR = { pending: 'var(--accent)', accepted: '#7fd0a4', revoked: 'var(--muted)' }
+
+function CopyLink({ url }) {
+  const [copied, setCopied] = useState(false)
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1800)
+    } catch {
+      /* clipboard blocked — the link is selectable in the box regardless */
+    }
+  }
+  return (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
+      <code
+        onClick={(e) => { const r = document.createRange(); r.selectNodeContents(e.currentTarget); const s = window.getSelection(); s.removeAllRanges(); s.addRange(r) }}
+        style={{ flex: 1, wordBreak: 'break-all', color: 'var(--head)', background: 'var(--panel-flat)', padding: '8px 10px', borderRadius: 6, border: '1px solid var(--line)', cursor: 'text', fontSize: '0.8rem' }}
+      >
+        {url}
+      </code>
+      <button type="button" onClick={copy} className="btn btn-sq" style={{ flex: 'none' }}>
+        {copied ? 'Copied ✓' : 'Copy'}
+      </button>
+    </div>
+  )
+}
+
+function CreateInvite({ onCreated }) {
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState('player')
+  const [sendEmail, setSendEmail] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState(null) // fields emailed, acceptUrl, emailError
+
+  async function submit(e) {
+    e.preventDefault()
+    setError(''); setResult(null)
+    if (!email.trim()) return setError('Enter an email address.')
+    setBusy(true)
+    try {
+      const res = await api.admin.createInvite(email.trim(), role, sendEmail)
+      setResult(res)
+      setEmail('')
+      await onCreated()
+    } catch (err) {
+      setError(err.message || 'Could not create the invite.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const submitLabel = sendEmail ? 'Create & email' : 'Create link'
+
+  let resultText
+  if (result?.emailed) {
+    resultText = 'Invitation emailed. You can also share this single-use link:'
+  } else {
+    const emailNote = result?.emailError ? ` (email not sent: ${result.emailError})` : ''
+    resultText = `Invite created${emailNote}. Share this single-use link:`
+  }
+
+  return (
+    <div className="panel" style={{ padding: 22, marginBottom: 22 }}>
+      <div className="field-label" style={{ marginBottom: 10 }}>Invite someone</div>
+      <form onSubmit={submit} style={{ display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap' }}>
+        <label style={{ flex: '1 1 240px' }}>
+          <span className="field-label">Email</span>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="input" placeholder="person@example.com" />
+        </label>
+        <label>
+          <span className="field-label">Access level</span>
+          <select value={role} onChange={(e) => setRole(e.target.value)} className="select">
+            {ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
+          </select>
+        </label>
+        <button type="submit" disabled={busy} className="btn btn-primary btn-sq">
+          {busy ? 'Creating…' : submitLabel}
+        </button>
+      </form>
+
+      <label className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: '0.85rem', color: 'var(--ink)', cursor: 'pointer' }}>
+        <input type="checkbox" checked={sendEmail} onChange={(e) => setSendEmail(e.target.checked)} />
+        Email the invitation (otherwise just generate a link to share)
+      </label>
+
+      {error && <p className="sans" style={{ margin: '12px 0 0', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
+      {result && (
+        <div style={{ marginTop: 14 }}>
+          <p className="sans" style={{ margin: '0 0 8px', fontSize: '0.84rem', color: result.emailed ? '#7fd0a4' : 'var(--muted)' }}>
+            {resultText}
+          </p>
+          <CopyLink url={result.acceptUrl} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function InvitesAdmin() {
+  const [invites, setInvites] = useState(null)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    setError('')
+    try {
+      setInvites(await api.admin.listInvites())
+    } catch {
+      setError('Could not load invites.')
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  async function revoke(id) {
+    if (!window.confirm('Revoke this pending invitation?')) return
+    try {
+      await api.admin.revokeInvite(id)
+      await load()
+    } catch {
+      /* surfaced by the row staying; keep it simple */
+    }
+  }
+
+  if (error) return <ErrorState message={error} />
+
+  return (
+    <section>
+      <CreateInvite onCreated={load} />
+
+      {!invites ? (
+        <Loading />
+      ) : (
+        <div className="panel-flat">
+          <table className="adm-table">
+            <thead>
+              <tr>
+                <th className="adm-th">Email</th>
+                <th className="adm-th">Role</th>
+                <th className="adm-th">Status</th>
+                <th className="adm-th">Expires</th>
+                <th className="adm-th">Created</th>
+                <th className="adm-th" />
+              </tr>
+            </thead>
+            <tbody>
+              {invites.length === 0 && (
+                <tr><td className="adm-td" colSpan={6} style={{ color: 'var(--muted)' }}>No invites yet.</td></tr>
+              )}
+              {invites.map((iv) => {
+                const status = iv.status === 'pending' && iv.expired ? 'expired' : iv.status
+                return (
+                  <tr key={iv.id}>
+                    <td className="adm-td" style={{ color: 'var(--text)' }}>{iv.email}</td>
+                    <td className="adm-td"><span className={`badge ${ROLE_BADGE[iv.role] || 'badge-editor'}`}>{iv.role}</span></td>
+                    <td className="adm-td" style={{ color: STATUS_COLOR[iv.status] || 'var(--muted)', textTransform: 'capitalize' }}>{status}</td>
+                    <td className="adm-td dim">{dateTime(iv.expiresAt)}</td>
+                    <td className="adm-td dim">{dateTime(iv.createdAt)}</td>
+                    <td className="adm-td" style={{ textAlign: 'right' }}>
+                      {iv.status === 'pending' && (
+                        <button type="button" className="pill" style={{ fontSize: '0.72rem', color: '#d98b84', borderColor: '#5b2020' }} onClick={() => revoke(iv.id)}>
+                          Revoke
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}

client/src/routes/admin/views/ModerationUser.jsx

@@ -35,6 +35,7 @@ export default function ModerationUser() {
         api.admin.modUser(discordId),
         api.admin.modUserActions(discordId, { limit: 200 }),
         api.admin.modUserNotes(discordId),
+        api.admin.getUserAppeals(discordId),
       ]),
     [discordId, tick],
   )
@@ -42,10 +43,19 @@ export default function ModerationUser() {
   if (loading) return <Loading />
   if (error) return <ErrorState message="Could not load this user’s history." />
 
-  const [summary, actions, notes] = data
+  const [summary, actions, notes, appeals] = data
   const counts = summary.counts || {}
   const tabActions = actions.filter((a) => a.action_type === tab)
 
+  let tabBody
+  if (tab === 'notes') {
+    tabBody = <NotesTab discordId={discordId} notes={notes} isAdmin={isAdmin} onAdded={reload} />
+  } else if (tab === 'appeals') {
+    tabBody = <AppealsTab rows={appeals} />
+  } else {
+    tabBody = <ActionTable rows={tabActions} showDuration={tab === 'mute'} />
+  }
+
   return (
     <section>
       <Link to="/admin/moderation" className="link-accent" style={{ fontSize: '0.85rem' }}>
@@ -83,13 +93,12 @@ export default function ModerationUser() {
         <TabButton active={tab === 'notes'} onClick={() => setTab('notes')}>
           Notes ({summary.notes_count || 0})
         </TabButton>
+        <TabButton active={tab === 'appeals'} onClick={() => setTab('appeals')}>
+          Appeals ({appeals.length})
+        </TabButton>
       </div>
 
-      {tab === 'notes' ? (
-        <NotesTab discordId={discordId} notes={notes} isAdmin={isAdmin} onAdded={reload} />
-      ) : (
-        <ActionTable rows={tabActions} showDuration={tab === 'mute'} />
-      )}
+      {tabBody}
     </section>
   )
 }
@@ -164,6 +173,63 @@ function ActionTable({ rows, showDuration }) {
   )
 }
 
+const APPEAL_STATUS_STYLE = {
+  pending: { color: '#e0b070', background: 'rgba(224,176,112,0.12)', border: '1px solid rgba(224,176,112,0.4)' },
+  under_review: { color: '#7fa8d0', background: 'rgba(127,168,208,0.14)', border: '1px solid rgba(127,168,208,0.4)' },
+  approved: { color: '#7fd0a4', background: 'rgba(95,185,138,0.16)', border: '1px solid rgba(95,185,138,0.4)' },
+  denied: { color: '#d98b84', background: 'rgba(217,139,132,0.16)', border: '1px solid rgba(217,139,132,0.4)' },
+  withdrawn: { color: '#9fb0c6', background: 'rgba(127,153,189,0.14)', border: '1px solid var(--line)' },
+}
+const APPEAL_STATUS_LABEL = {
+  pending: 'Pending',
+  under_review: 'Under review',
+  approved: 'Approved',
+  denied: 'Denied',
+  withdrawn: 'Withdrawn',
+}
+
+function AppealsTab({ rows }) {
+  return (
+    <div className="panel-flat">
+      <table className="adm-table">
+        <thead>
+          <tr>
+            <th className="adm-th">Action</th>
+            <th className="adm-th">Appeal</th>
+            <th className="adm-th">Staff response</th>
+            <th className="adm-th">Status</th>
+            <th className="adm-th">Reversal</th>
+            <th className="adm-th">When</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 && (
+            <tr>
+              <td className="adm-td" colSpan={6} style={{ color: 'var(--muted)' }}>No appeals from this user.</td>
+            </tr>
+          )}
+          {rows.map((a) => (
+            <tr key={a.id}>
+              <td className="adm-td"><span className={`badge badge-${a.action_type}`}>{a.action_type}</span></td>
+              <td className="adm-td" style={{ color: 'var(--text)', maxWidth: 260, whiteSpace: 'pre-wrap' }}>{a.submitted_text}</td>
+              <td className="adm-td dim" style={{ maxWidth: 220, whiteSpace: 'pre-wrap' }}>{a.staff_response || '—'}</td>
+              <td className="adm-td">
+                <span className="badge" style={APPEAL_STATUS_STYLE[a.status]}>{APPEAL_STATUS_LABEL[a.status] || a.status}</span>
+              </td>
+              <td className="adm-td dim">
+                {a.reversal_status === 'done' && <span style={{ color: '#7fd0a4' }}>Lifted</span>}
+                {a.reversal_status === 'failed' && <span style={{ color: '#d98b84' }}>Failed</span>}
+                {(!a.reversal_status || a.reversal_status === 'none') && '—'}
+              </td>
+              <td className="adm-td dim" title={dateTime(a.submitted_at)}>{ago(a.submitted_at)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
 function NotesTab({ discordId, notes, isAdmin, onAdded }) {
   const [body, setBody] = useState('')
   const [visibility, setVisibility] = useState('staff_only')

client/src/routes/admin/views/PageBuilder.jsx

@@ -0,0 +1,456 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import Modal from '../../../components/Modal.jsx'
+import { Loading } from '../../../components/PageState.jsx'
+import { api } from '../../../api/client.js'
+import '../../../blocks/index.js' // registers all block types
+import { listBlocks, getBlock, makeBlockId } from '../../../blocks/registry.js'
+import { SelectField, TextField, TextAreaField } from '../../../blocks/editorKit.jsx'
+
+const LAYOUTS = [
+  ['default', 'Default'],
+  ['full_width', 'Full width'],
+  ['landing', 'Landing'],
+]
+const NAV_GROUPS = [
+  ['', 'None'],
+  ['main', 'Main nav'],
+  ['footer', 'Footer'],
+  ['account', 'Account'],
+  ['hidden', 'Hidden'],
+]
+
+const EMPTY = {
+  title: '',
+  slug: '',
+  status: 'draft',
+  blocks: [],
+  metadata: { seoTitle: '', metaDescription: '', ogImage: '', canonicalUrl: '', robots: '' },
+  settings: { layout: 'default', showInNav: false, navGroup: '', navOrder: null, protected: false },
+}
+
+// Map an API page (grouped shape) into local editable form state.
+function toForm(page) {
+  return {
+    title: page.title || '',
+    slug: page.slug || '',
+    status: page.status || 'draft',
+    blocks: Array.isArray(page.blocks) ? page.blocks : [],
+    metadata: { ...EMPTY.metadata, ...cleanNulls(page.metadata) },
+    settings: {
+      layout: page.settings?.layout || 'default',
+      showInNav: Boolean(page.settings?.showInNav),
+      navGroup: page.settings?.navGroup || '',
+      navOrder: page.settings?.navOrder ?? null,
+      protected: Boolean(page.settings?.protected),
+    },
+  }
+}
+
+function cleanNulls(obj) {
+  const out = {}
+  for (const [k, v] of Object.entries(obj || {})) out[k] = v == null ? '' : v
+  return out
+}
+
+export default function PageBuilder() {
+  const { id } = useParams()
+  const isEdit = Boolean(id)
+  const navigate = useNavigate()
+
+  const [form, setForm] = useState(EMPTY)
+  const [protectedNow, setProtectedNow] = useState(false) // server truth, edit mode
+  const [loading, setLoading] = useState(isEdit)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [details, setDetails] = useState([]) // block validation errors
+  const [notice, setNotice] = useState('')
+  const [tab, setTab] = useState('content')
+  const [pwModal, setPwModal] = useState(false)
+  const [dragIndex, setDragIndex] = useState(null)
+
+  const palette = useMemo(() => listBlocks(), [])
+
+  useEffect(() => {
+    if (!isEdit) return
+    let active = true
+    setLoading(true)
+    api.admin
+      .getPage(id)
+      .then((page) => {
+        if (!active) return
+        setForm(toForm(page))
+        setProtectedNow(Boolean(page.settings?.protected))
+        setLoading(false)
+      })
+      .catch((err) => {
+        if (!active) return
+        setError(err.message || 'Could not load the page.')
+        setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [id, isEdit])
+
+  // ── Block operations ────────────────────────────────────────────────
+  const addBlock = useCallback((type) => {
+    const def = getBlock(type)
+    if (!def) return
+    const block = { id: makeBlockId(), type, version: def.version, visible: true, props: def.defaults() }
+    setForm((f) => ({ ...f, blocks: [...f.blocks, block] }))
+  }, [])
+
+  const updateBlock = useCallback((blockId, nextProps) => {
+    setForm((f) => ({
+      ...f,
+      blocks: f.blocks.map((b) => (b.id === blockId ? { ...b, props: nextProps } : b)),
+    }))
+  }, [])
+
+  const toggleVisible = useCallback((blockId) => {
+    setForm((f) => ({
+      ...f,
+      blocks: f.blocks.map((b) => (b.id === blockId ? { ...b, visible: b.visible === false } : b)),
+    }))
+  }, [])
+
+  const removeBlock = useCallback((blockId) => {
+    setForm((f) => ({ ...f, blocks: f.blocks.filter((b) => b.id !== blockId) }))
+  }, [])
+
+  const moveBlock = useCallback((from, to) => {
+    setForm((f) => {
+      if (to < 0 || to >= f.blocks.length) return f
+      const next = [...f.blocks]
+      const [moved] = next.splice(from, 1)
+      next.splice(to, 0, moved)
+      return { ...f, blocks: next }
+    })
+  }, [])
+
+  function onDrop(index) {
+    if (dragIndex === null || dragIndex === index) return setDragIndex(null)
+    moveBlock(dragIndex, index)
+    setDragIndex(null)
+  }
+
+  // ── Form field setters ──────────────────────────────────────────────
+  const setField = (k) => (v) => setForm((f) => ({ ...f, [k]: v }))
+  const setMeta = (k) => (v) => setForm((f) => ({ ...f, metadata: { ...f.metadata, [k]: v } }))
+  const setSetting = (k) => (v) => setForm((f) => ({ ...f, settings: { ...f.settings, [k]: v } }))
+
+  // Serialize local state into an API payload. Empty metadata strings become
+  // null; navGroup '' becomes null.
+  function payload() {
+    const metadata = {}
+    for (const [k, v] of Object.entries(form.metadata)) metadata[k] = v === '' ? null : v
+    const settings = {
+      layout: form.settings.layout,
+      showInNav: Boolean(form.settings.showInNav),
+      navGroup: form.settings.navGroup === '' ? null : form.settings.navGroup,
+      navOrder: form.settings.navOrder === '' || form.settings.navOrder == null ? null : Number(form.settings.navOrder),
+    }
+    return { title: form.title.trim(), status: form.status, blocks: form.blocks, metadata, settings }
+  }
+
+  async function save({ silent } = {}) {
+    setBusy(true)
+    setError('')
+    setDetails([])
+    setNotice('')
+    try {
+      if (isEdit) {
+        await api.admin.updatePage(id, payload())
+        if (!silent) setNotice('Saved.')
+      } else {
+        if (!form.slug.trim()) throw new Error('A slug is required.')
+        const created = await api.admin.createPage({ slug: form.slug.trim(), ...payload() })
+        navigate(`/admin/pages/${created.id}`, { replace: true })
+      }
+    } catch (err) {
+      setError(err.message || 'Could not save the page.')
+      if (err.body?.details) setDetails(err.body.details)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function togglePublish() {
+    const next = form.status === 'published' ? 'draft' : 'published'
+    setForm((f) => ({ ...f, status: next }))
+    // Persist immediately (edit mode) so the status change isn't lost.
+    if (isEdit) {
+      setBusy(true)
+      setError('')
+      try {
+        await api.admin.updatePage(id, { ...payload(), status: next })
+        setNotice(next === 'published' ? 'Published.' : 'Unpublished.')
+      } catch (err) {
+        setError(err.message || 'Could not change status.')
+      } finally {
+        setBusy(false)
+      }
+    }
+  }
+
+  async function protectPage() {
+    setBusy(true)
+    setError('')
+    try {
+      await api.admin.updatePage(id, { settings: { protected: true } })
+      setProtectedNow(true)
+      setForm((f) => ({ ...f, settings: { ...f.settings, protected: true } }))
+      setNotice('Page protected.')
+    } catch (err) {
+      setError(err.message || 'Could not protect the page.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function unprotectPage(password) {
+    setBusy(true)
+    setError('')
+    try {
+      await api.admin.unprotectPage(id, password)
+      setProtectedNow(false)
+      setForm((f) => ({ ...f, settings: { ...f.settings, protected: false } }))
+      setPwModal(false)
+      setNotice('Protection removed.')
+    } catch (err) {
+      setError(err.message || 'Could not unprotect the page.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function preview() {
+    setError('')
+    try {
+      const { token } = await api.admin.createPagePreview(id)
+      window.open(`/preview/${id}/${token}`, '_blank', 'noopener')
+    } catch (err) {
+      setError(err.message || 'Could not create a preview link.')
+    }
+  }
+
+  async function remove() {
+    if (!confirm('Delete this page? This cannot be undone.')) return
+    setBusy(true)
+    setError('')
+    try {
+      await api.admin.deletePage(id)
+      navigate('/admin/pages')
+    } catch (err) {
+      setError(err.message || 'Could not delete the page.')
+      setBusy(false)
+    }
+  }
+
+  if (loading) return <Loading />
+
+  const published = form.status === 'published'
+
+  let saveLabel = isEdit ? 'Save' : 'Create'
+  if (busy) saveLabel = 'Saving…'
+
+  return (
+    <section>
+      {/* Toolbar */}
+      <div className="pb-toolbar">
+        <button className="pill" onClick={() => navigate('/admin/pages')}>← Pages</button>
+        <span className={`badge ${published ? 'badge-pub' : 'badge-draft'}`}>{published ? 'Published' : 'Draft'}</span>
+        <div style={{ flex: 1 }} />
+        {isEdit && (
+          <button className="pill" onClick={preview} disabled={busy}>Preview</button>
+        )}
+        {isEdit && (
+          <button className="pill" onClick={togglePublish} disabled={busy}>
+            {published ? 'Unpublish' : 'Publish'}
+          </button>
+        )}
+        <button className="btn btn-primary btn-sq" onClick={() => save()} disabled={busy}>
+          {saveLabel}
+        </button>
+      </div>
+
+      {error && (
+        <div className="pb-error sans">
+          {error}
+          {details.length > 0 && (
+            <ul style={{ margin: '6px 0 0', paddingLeft: 18 }}>
+              {details.map((d) => <li key={d}>{d}</li>)}
+            </ul>
+          )}
+        </div>
+      )}
+      {notice && <div className="pb-notice sans">{notice}</div>}
+
+      {/* Title + slug */}
+      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', margin: '16px 0' }}>
+        <label style={{ flex: '2 1 320px' }}>
+          <span className="field-label">Title</span>
+          <input className="input" value={form.title} onChange={(e) => setField('title')(e.target.value)} />
+        </label>
+        <label style={{ flex: '1 1 220px' }}>
+          <span className="field-label">Slug {isEdit && '(fixed)'}</span>
+          <input
+            className="input"
+            value={form.slug}
+            disabled={isEdit}
+            placeholder="my-page"
+            onChange={(e) => setField('slug')(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
+          />
+        </label>
+      </div>
+
+      {/* Tabs */}
+      <div className="pb-tabs">
+        <button className={`pb-tab ${tab === 'content' ? 'is-active' : ''}`} onClick={() => setTab('content')}>Content</button>
+        <button className={`pb-tab ${tab === 'settings' ? 'is-active' : ''}`} onClick={() => setTab('settings')}>Settings &amp; SEO</button>
+      </div>
+
+      {tab === 'content' && (
+        <>
+          <div className="pb-palette">
+            <span className="field-label" style={{ margin: '0 6px 0 0' }}>Add block</span>
+            {palette.map((b) => (
+              <button key={b.type} className="pill" onClick={() => addBlock(b.type)} disabled={busy}>
+                <span aria-hidden style={{ marginRight: 6 }}>{b.icon}</span>{b.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="pb-canvas">
+            {form.blocks.length === 0 && (
+              <p className="sans dim" style={{ textAlign: 'center', padding: 30 }}>
+                No blocks yet — add one from the palette above.
+              </p>
+            )}
+            {form.blocks.map((block, i) => {
+              const def = getBlock(block.type)
+              const Editor = def?.editor
+              const hidden = block.visible === false
+              return (
+                <div
+                  key={block.id}
+                  className={`pb-block-card ${hidden ? 'is-hidden' : ''} ${dragIndex === i ? 'is-dragging' : ''}`}
+                  draggable
+                  onDragStart={() => setDragIndex(i)}
+                  onDragOver={(e) => e.preventDefault()}
+                  onDrop={() => onDrop(i)}
+                  onDragEnd={() => setDragIndex(null)}
+                >
+                  <div className="pb-block-head">
+                    <span className="pb-drag" title="Drag to reorder">⠿</span>
+                    <strong className="sans">{def?.label || block.type}</strong>
+                    <div style={{ flex: 1 }} />
+                    <button className="pill pb-mini" title={hidden ? 'Show' : 'Hide'} onClick={() => toggleVisible(block.id)}>
+                      {hidden ? '🙈' : '👁'}
+                    </button>
+                    <button className="pill pb-mini" disabled={i === 0} onClick={() => moveBlock(i, i - 1)} title="Move up">↑</button>
+                    <button className="pill pb-mini" disabled={i === form.blocks.length - 1} onClick={() => moveBlock(i, i + 1)} title="Move down">↓</button>
+                    <button className="pill pb-mini" onClick={() => removeBlock(block.id)} title="Remove">✕</button>
+                  </div>
+                  <div className="pb-block-body">
+                    {Editor ? (
+                      <Editor props={block.props || {}} onChange={(p) => updateBlock(block.id, p)} />
+                    ) : (
+                      <p className="sans dim">Unknown block type: {block.type}</p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+
+      {tab === 'settings' && (
+        <div className="pb-settings">
+          <div className="card" style={{ padding: 18 }}>
+            <p className="card-kicker">SEO &amp; metadata</p>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
+              <TextField label="SEO title" value={form.metadata.seoTitle} maxLength={200} onChange={setMeta('seoTitle')} hint="Overrides the page title in the browser tab / search results." />
+              <TextAreaField label="Meta description" value={form.metadata.metaDescription} rows={2} maxLength={400} onChange={setMeta('metaDescription')} />
+              <TextField label="OG image URL" value={form.metadata.ogImage} maxLength={500} onChange={setMeta('ogImage')} />
+              <TextField label="Canonical URL" value={form.metadata.canonicalUrl} maxLength={500} onChange={setMeta('canonicalUrl')} />
+              <TextField label="Robots" value={form.metadata.robots} maxLength={100} onChange={setMeta('robots')} placeholder="index,follow" />
+            </div>
+          </div>
+
+          <div className="card" style={{ padding: 18 }}>
+            <p className="card-kicker">Layout &amp; navigation</p>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
+              <SelectField label="Layout" value={form.settings.layout} onChange={setSetting('layout')} options={LAYOUTS} />
+              <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <input type="checkbox" checked={form.settings.showInNav} onChange={(e) => setSetting('showInNav')(e.target.checked)} />
+                <span className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem' }}>Show in navigation</span>
+              </label>
+              <SelectField label="Nav group" value={form.settings.navGroup} onChange={setSetting('navGroup')} options={NAV_GROUPS} />
+              <TextField label="Nav order" value={form.settings.navOrder ?? ''} onChange={(v) => setSetting('navOrder')(v === '' ? null : v.replace(/\D/g, ''))} hint="Lower numbers appear first." />
+            </div>
+          </div>
+
+          <div className="card" style={{ padding: 18 }}>
+            <p className="card-kicker">Protection &amp; danger zone</p>
+            <p className="sans dim" style={{ fontSize: '0.85rem', marginTop: 8 }}>
+              A protected page can’t be deleted and its protection can only be removed by re-entering your password.
+            </p>
+            {!isEdit && <p className="sans dim" style={{ fontSize: '0.82rem' }}>Save the page first to manage protection.</p>}
+            {isEdit && (
+              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 10 }}>
+                {protectedNow ? (
+                  <button className="pill" onClick={() => setPwModal(true)} disabled={busy}>🔓 Remove protection…</button>
+                ) : (
+                  <button className="pill" onClick={protectPage} disabled={busy}>🔒 Protect page</button>
+                )}
+                <button className="pill pb-danger" onClick={remove} disabled={busy || protectedNow} title={protectedNow ? 'Unprotect first' : 'Delete'}>
+                  Delete page
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {pwModal && (
+        <UnprotectModal onCancel={() => setPwModal(false)} onConfirm={unprotectPage} busy={busy} error={error} />
+      )}
+    </section>
+  )
+}
+
+function UnprotectModal({ onCancel, onConfirm, busy, error }) {
+  const [pw, setPw] = useState('')
+  return (
+    <Modal
+      title="Confirm your password"
+      onClose={onCancel}
+      width={420}
+      footer={
+        <>
+          <button className="pill" onClick={onCancel} disabled={busy}>Cancel</button>
+          <button className="btn btn-primary btn-sq" onClick={() => onConfirm(pw)} disabled={busy || !pw}>
+            {busy ? 'Verifying…' : 'Remove protection'}
+          </button>
+        </>
+      }
+    >
+      <p className="sans dim" style={{ marginTop: 0, fontSize: '0.88rem' }}>
+        Removing protection is a sensitive change — re-enter your account password to continue.
+      </p>
+      <input
+        type="password"
+        className="input"
+        autoFocus
+        value={pw}
+        onChange={(e) => setPw(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && pw && onConfirm(pw)}
+        placeholder="Password"
+      />
+      {error && <p className="sans" style={{ color: '#d98b84', fontSize: '0.85rem', marginBottom: 0 }}>{error}</p>}
+    </Modal>
+  )
+}