Merge pull request 'chore(org): retarget org paths to RunicGateway' (#66) from chore/org-rename-runicgateway into main

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

.env.example

@@ -1,6 +1,13 @@
 # ─── UOMysticmoon — root environment (used by docker-compose) ───
 # Copy to .env and fill in. NEVER commit the real .env.
 
+# 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
 PORT=3000
@@ -53,13 +60,10 @@ TOTP_CHALLENGE_TTL=5m
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
 
-# Email (optional). If SMTP_HOST is blank, the contact endpoint tells the
+# Email is configured in Admin → Settings → Email (Gmail over OAuth2), not via
-# client to fall back to a mailto: link instead.
+# env. It reuses the Google auth provider's OAuth client and stores an encrypted
-SMTP_HOST=
+# refresh token in the DB. Until it's connected, the contact form falls back to
-SMTP_PORT=587
+# a mailto: link (recipient = the `contact_email` site setting).
-SMTP_USER=
-SMTP_PASS=
-CONTACT_TO=UOMysticmoon@gmail.com
 
 # CORS — only needed for local dev when the Vite dev server is a different origin.
 CLIENT_ORIGIN=http://localhost:5173
@@ -79,3 +83,15 @@ 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

.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,70 @@
+# 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
+
+  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: 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

.gitignore

@@ -31,5 +31,8 @@ Thumbs.db
 .vscode/
 .idea/
 
+# local planning docs (not part of the tracked codebase)
+.plans/
+
 # scratch / temp scripts
 _*.ps1

BACKEND_DESIGN.md

@@ -234,10 +234,13 @@ who"; `activity_log` provides the history feed.
 
 ## 7. Email
 
-`utils/mailer.js` (nodemailer) configured from `SMTP_HOST/PORT/USER/PASS`, sending to
+`utils/mailer.js` (nodemailer) sends through **Gmail over OAuth2 (SMTP XOAUTH2)**, configured in
-`CONTACT_TO` (default UOMysticmoon@gmail.com). No Gmail password in code — env only.
+Admin → Settings → Email — not env. The mailbox is authorized by an in-app "Connect Gmail" consent
-If SMTP is unconfigured, `POST /public/contact` returns `{fallback:"mailto", email}` so the
+flow (`/admin/email/*`) that captures a refresh token, stored AES-GCM-encrypted in the `email_config`
-client renders a `mailto:` link instead. Site mode changes / errors never leak SMTP creds.
+singleton (never returned over the API). The OAuth client id/secret are reused from the `google`
+auth-providers row. Recipient is the `contact_email` site setting. If email is unconfigured/disabled,
+`POST /public/contact` returns `{fallback:"mailto", email}` so the client renders a `mailto:` link
+instead. Errors never leak credentials.
 
 ---
 
@@ -287,11 +290,7 @@ COOKIE_SECURE=true
 COOKIE_NAME=uomm_token
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
-SMTP_HOST=
+# Email: configured in Admin → Settings → Email (Gmail OAuth2), not via env
-SMTP_PORT=587
-SMTP_USER=
-SMTP_PASS=
-CONTACT_TO=UOMysticmoon@gmail.com
 CLIENT_ORIGIN=http://localhost:5173
 ```
 

README.md

@@ -6,6 +6,7 @@ shard — 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.
+- **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).
 
@@ -24,6 +25,7 @@ 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)
@@ -39,7 +41,7 @@ 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 |
 
@@ -90,8 +92,10 @@ UOMSITE/
 
 ### Option A — Docker Compose (full stack)
 
-The simplest way to run everything. The image installs server deps, **builds the React client**,
+`docker-compose.yml` is **production-shaped**: it *pulls* the prebuilt `app` and `bot` images from
-and Express serves it; MariaDB runs in its own container; tables + defaults + the first admin are
+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 +105,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 +115,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`
@@ -207,6 +223,9 @@ 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`.
@@ -251,6 +270,74 @@ not crash).
 
 ---
 
+## 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
 
 Copy `.env.example` (Compose) or `server/.env.example` (local) and fill in. **`.env` is git-ignored.**
@@ -276,11 +363,12 @@ Copy `.env.example` (Compose) or `server/.env.example` (local) and fill in. **`.
 | `TOTP_ISSUER` | `UOMysticmoon` | 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:` |
+| _Email_ | — | configured in Admin → Settings → Email (Gmail OAuth2), not via env; recipient = `contact_email` setting |
-| `CONTACT_TO` | `UOMysticmoon@gmail.com` | contact recipient |
 | `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`) |
 
 ---
 
@@ -343,8 +431,9 @@ Copy `.env.example` (Compose) or `server/.env.example` (local) and fill in. **`.
 
 - `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
+  `.env` git-ignored. Passwords and request bodies are never logged. Email sends through Gmail
-  form falls back to a `mailto:` link when unconfigured.
+  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.
 
 ---
 

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 config = await fetchConfig(siteUrl, key)
-    const res = await fetch(siteUrl, { headers: { 'X-Internal-Key': key } })
+  if (!config) return
-    if (!res.ok) {
+
-      log.error('boot-time config fetch failed', { status: res.status })
-      return
-    }
-    const config = await res.json()
   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

client/package-lock.json

@@ -10,6 +10,7 @@
       "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

@@ -11,6 +11,7 @@
   "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,62 @@ 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 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'
 
+// Player portal
+import PlayerLogin from './routes/player/PlayerLogin.jsx'
+import PlayerRegister from './routes/player/PlayerRegister.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'
+
 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 +79,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 +87,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 +116,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 />} />
@@ -90,12 +136,49 @@ export default function App() {
             <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-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="/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>
+
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </SiteProvider>

client/src/api/client.js

@@ -44,6 +44,14 @@ 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 } }),
+  // 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 } }),
   loginTotp: (challenge, code) =>
     req('/auth/login/totp', { method: 'POST', body: { challenge, code } }),
   // Second factor for an SSO login (challenge is held in an httpOnly cookie set by
@@ -69,8 +77,42 @@ export const api = {
   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${s ? `?${s}` : ''}`)
+    },
+    economy: (limit) => req(`/public/shard/economy${limit ? `?limit=${limit}` : ''}`),
+    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) =>
+      req(`/public/shard/governors/${encodeURIComponent(city)}/history${limit ? `?limit=${limit}` : ''}`),
+    presence: () => req('/public/shard/presence'),
+    houses: () => req('/public/shard/houses'),
+  },
+  // 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'),
@@ -82,6 +124,10 @@ export const api = {
     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 +139,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 +171,30 @@ 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' }),
+    // 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'),
@@ -176,6 +252,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 +274,62 @@ 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' }),
+
+    // ----- 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 } }),
+    },
   },
 }
 

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,72 @@
+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>
+  )
+}
+
+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)))
+        let chars = 0
+        let online = 0
+        let complete = true
+        for (const r of rosters) {
+          if (r.status === 'fulfilled') {
+            const cs = r.value.chars || []
+            chars += cs.length
+            online += cs.filter((c) => c.online).length
+          } else {
+            complete = false
+          }
+        }
+        if (!cancelled) setStats({ linked, chars, online, complete })
+      } 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,230 @@
+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) {
+      setError(err.status === 403 ? 'Protected account — refused.' : err.status === 404 ? 'Not linked.' : (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'
 
@@ -34,7 +35,19 @@ function TextBlock({ props }) {
   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'
+        const Tag = /^(h1|h2|h3|p|span|div)$/.test(line.tag) ? line.tag : 'p'
+        // 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}
+              className="hero-rich"
+              style={lineStyle(line)}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(line.text || '') }}
+            />
+          )
+        }
         return (
           <Tag key={i} style={lineStyle(line)}>
             {line.text}

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={i} 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,84 @@
+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) =>
+      `Kicked${r && r.sessions != null ? ` (${r.sessions} session${r.sessions === 1 ? '' : 's'})` : ''}.`,
+    )
+  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)
+      return `Banned${durationSec ? ` for ${durationSec}s` : ' indefinitely'}.`
+    })
+
+  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/SiteHeader.jsx

@@ -1,26 +1,41 @@
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 import MoonDot from './MoonDot.jsx'
+import { useAuth } from '../contexts/AuthContext.jsx'
 
-const NAV = {
+// One consistent top nav for the whole public site. Every page gets the same
-  website: [
+// main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
+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' },
-  ],
+  { label: 'Shard', to: '/site/shard' },
-  wiki: [
+  { label: 'Champions', to: '/site/champs' },
-    { label: 'Website', to: '/site' },
+  { label: 'Guilds', to: '/site/guilds' },
-    { label: 'New Player Guide', to: '/wiki/new-player-guide' },
+  { label: 'Governors', to: '/site/governors' },
-    { label: 'Maps & Atlas', to: '/wiki/maps-atlas' },
+  { label: 'Houses', to: '/site/houses' },
-    { label: 'Systems', to: '/wiki/systems' },
+  { label: 'About', to: '/site/about' },
-    { label: 'Rules', to: '/wiki/rules' },
+]
-  ],
+
-}
+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()
+
+  // Where the auth entry points: staff → admin, player → portal, else sign in.
+  const account =
+    user && user.role && user.role !== 'player'
+      ? { label: 'Admin', to: '/admin' }
+      : user
+        ? { label: 'My Account', to: '/player' }
+        : { label: 'Sign in', to: '/account/login' }
 
-export default function SiteHeader({ section = 'website' }) {
-  const links = NAV[section] || NAV.website
   return (
     <header
       style={{
@@ -34,38 +49,31 @@ export default function SiteHeader({ section = 'website' }) {
     >
       <div
         className="shell"
-        style={{
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '14px 0', flexWrap: 'wrap' }}
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 20,
-          padding: '14px 0',
-          flexWrap: 'wrap',
-        }}
       >
         <Link
           to="/"
           className="display"
-          style={{
+          style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            fontSize: '1.2rem',
-            letterSpacing: '0.05em',
-            color: 'var(--accent-bright)',
-            textDecoration: 'none',
-            fontWeight: 600,
-          }}
         >
           <MoonDot />
           UOMysticmoon
         </Link>
         <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
-          {links.map((l) => (
+          {NAV.map((l) => (
-            <Link key={l.to + l.label} to={l.to} className="pill">
+            <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, i) => (
+            <li key={`${s.t}-${i}`} 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/contexts/AuthContext.jsx

@@ -30,6 +30,14 @@ export function AuthProvider({ children }) {
     return data
   }, [])
 
+  // 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 + code for a real session.
   const loginTotp = useCallback(async (challenge, code) => {
     const data = await api.loginTotp(challenge, code)
@@ -54,7 +62,7 @@ export function AuthProvider({ children }) {
   }, [])
 
   return (
-    <AuthContext.Provider value={{ user, loading, login, loginTotp, ssoLoginTotp, logout, refresh }}>
+    <AuthContext.Provider value={{ user, loading, login, register, loginTotp, ssoLoginTotp, logout, refresh }}>
       {children}
     </AuthContext.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,62 @@
+// 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.
+
+// 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) =>
+      /^(moonglow|minoc|trinsic|jhelom|yew|skara ?brae|magincia|new ?magincia|vesper|nujelm|cove|ocllo|serpent'?s? hold|wind|delucia|papua)/i.test(
+        r,
+      ),
+  },
+  {
+    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

@@ -64,7 +64,7 @@ export function defaultLayout(teaser) {
             { 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: '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,106 @@
+// 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 an event. Accepts either a stored event
+// (with .payload) or a raw live frame (fields at top level).
+export function describe(ev) {
+  const p = ev.payload || ev
+  switch (ev.kind) {
+    case 'vendor.sale':
+      return `${p.itemType || 'An item'}${p.amount > 1 ? ` ×${p.amount}` : ''} sold for ${n(p.price)}gp`
+    case 'player.death':
+      return `${nameOf(p.who)} was slain${p.killer ? ` by ${nameOf(p.killer)}` : ''}`
+    case 'player.murdered':
+      return `${nameOf(p.victim)} was murdered${p.murderer ? ` by ${nameOf(p.murderer)}` : ''}`
+    case 'mob.killed':
+      return `${nameOf(p.killer)} killed ${nameOf(p.killed)}`
+    case 'skill.gain':
+      return `${nameOf(p.who)} gained ${p.skill}${p.base != null ? ` (${p.base})` : ''}`
+    case 'fame.change':
+      return `${nameOf(p.who)}’s fame changed to ${n(p.new)}`
+    case 'karma.change':
+      return `${nameOf(p.who)}’s karma changed to ${n(p.new)}`
+    case 'quest.complete':
+      return `${nameOf(p.who)} completed “${p.quest}”`
+    case 'house.decay':
+      return `${p.name || 'A house'} is now ${p.to || p.stage}${p.region ? ` — ${p.region}` : ''}`
+    case 'mob.login':
+      return `${nameOf(p.who)} entered the world`
+    case 'mob.logout':
+      return `${nameOf(p.who)} left the world`
+    case 'economy.supply':
+      return `Gold supply: ${n(p.gold)} across ${n(p.accounts)} accounts`
+    case 'server.hello':
+      return `Shard online — ${n(p.accounts)} accounts, ${n(p.mobiles)} mobiles`
+    case 'server.shutdown':
+      return 'Shard shut down'
+    case 'server.crashed':
+      return `Shard crashed${p.error ? `: ${p.error}` : ''}`
+    case 'champ.update': {
+      const where = p.name || p.type || 'A champion spawn'
+      if (p.status === 'active' && p.bossUp) return `${where}: boss is up${p.boss ? ` (${p.boss})` : ''}`
+      if (p.status === 'active') return `${where} is active${p.level != null ? ` — level ${p.level}` : ''}`
+      if (p.status === 'cooldown') return `${where} is on cooldown`
+      return `${where} is ${p.status || 'idle'}`
+    }
+    case 'champ.remove':
+      return `A champion spawn ended`
+    // Support (help-page) queue + in-game moderation (admin channel only)
+    case 'page.new':
+      return `New ${p.type || 'help'} page from ${nameOf(p.sender)}`
+    case 'page.updated':
+      return `Help page from ${nameOf(p.sender)} updated${p.handled ? ' (claimed)' : ''}`
+    case 'page.closed':
+      return `Help page ${p.pageId || ''} closed`
+    case 'admin.audit':
+      return `${p.actor || 'Staff'} ${p.action || 'acted'}${p.target ? ` on ${p.target}` : ''}${p.origin ? ` [${p.origin}]` : ''}`
+    // Staff / sensitive (admin channel only)
+    case 'audit.set':
+      return `${nameOf(p.staff) || 'Staff'} set ${p.prop} on ${p.target || p.targetSerial} (${p.old} → ${p.new})`
+    case 'audit.command':
+      return `${nameOf(p.staff) || 'Staff'} ran ${p.command}${p.args ? ` ${p.args}` : ''}`
+    case 'cheat.fastwalk':
+      return `Fast-walk flagged: ${nameOf(p.who)}${p.ip ? ` (${p.ip})` : ''}`
+    case 'account.login.attempt':
+      return `Login attempt: ${p.acct}${p.ip ? ` from ${p.ip}` : ''}`
+    case 'gold.change':
+      return `${p.acct}: gold ${p.delta >= 0 ? '+' : ''}${n(p.delta)} → ${n(p.new)}`
+    default:
+      return 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/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,39 +1,113 @@
-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
+// Small inline stroke icons (16px, currentColor) — same style as ProviderIcon.
-// are shown to admin/editor as before. Moderators are further confined to just
+// One shared frame keeps them terse; each item just supplies its path(s).
-// their own section + account security (see the redirect effect below).
+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' },
+    items: [
-  { to: '/admin/wiki', label: 'Wiki' },
+      { to: '/admin', label: 'Dashboard', end: true, icon: IconHome, roles: ['admin', 'editor', 'moderator'] },
-  { to: '/admin/hero', label: 'Hero Editor' },
+    ],
-  { to: '/admin/moderation', label: 'Moderation', roles: ['admin', 'moderator'] },
+  },
-  { to: '/admin/settings', label: 'Settings' },
+  {
-  { to: '/admin/activity', label: 'Activity' },
+    title: 'Content',
-  { to: '/admin/bot-activity', label: 'Bot Activity' },
+    items: [
-  { to: '/admin/discord-bot', label: 'Discord Bot' },
+      { to: '/admin/posts', label: 'Posts', icon: IconPosts, roles: ['admin', 'editor'] },
-  { to: '/admin/auth-providers', label: 'Authentication' },
+      { to: '/admin/pages', label: 'Pages', icon: IconPages, roles: ['admin', 'editor'] },
-  { to: '/admin/users', label: 'Users' },
+      { to: '/admin/wiki', label: 'Wiki', icon: IconWiki, roles: ['admin', 'editor'] },
-  { to: '/admin/account', label: 'Account' },
+      { 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/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/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/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/characters': 'My Characters',
   '/admin/auth-providers': 'Authentication',
   '/admin/users': 'Users',
+  '/admin/invites': 'Invites',
   '/admin/account': 'Account Security',
 }
 
@@ -44,7 +118,9 @@ const navBtnBase = {
   fontFamily: 'var(--sans)',
   fontSize: '0.92rem',
   textDecoration: 'none',
-  display: 'block',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
   transition: 'background .15s,color .15s',
 }
 
@@ -55,25 +131,64 @@ export default function AdminLayout() {
   const location = useLocation()
   const title =
     TITLES[location.pathname] ||
-    (location.pathname.startsWith('/admin/moderation') ? 'Moderation' : 'Admin')
+    (location.pathname.startsWith('/admin/moderation')
+      ? 'Moderation'
+      : location.pathname.startsWith('/admin/characters')
+        ? 'My Characters'
+        : location.pathname.startsWith('/admin/users/')
+          ? 'User'
+          : 'Admin')
   // 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) => {
+  const MOD_PATHS = ['/admin/moderation', '/admin/shard-ops', '/admin/houses', '/admin/account']
-    if (n.roles && !n.roles.includes(user?.role)) return false
+  const visible = (item) => {
-    if (isModerator) return n.to === '/admin/moderation' || n.to === '/admin/account'
+    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])
@@ -118,12 +233,14 @@ export default function AdminLayout() {
           </div>
         </div>
 
-        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
-          {navItems.map((n) => (
+          {navGroups.map((group, gi) => {
+            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 +248,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={`g${gi}`} 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

@@ -8,6 +8,7 @@ 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.',
@@ -35,6 +36,9 @@ export default function AdminLogin() {
   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('')
@@ -54,9 +58,10 @@ export default function AdminLogin() {
   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 +106,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)
@@ -117,8 +122,8 @@ export default function AdminLogin() {
         const { returnTo } = await ssoLoginTotp(code)
         navigate(returnTo || '/admin', { replace: true })
       } else {
-        await loginTotp(challenge, code)
+        const u = await loginTotp(challenge, code)
-        navigate(dest, { replace: true })
+        navigate(destFor(u), { replace: true })
       }
     } catch (err) {
       const expired = err.status === 401 && /expired/i.test(err.message)

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/EmailDelivery.jsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../../../api/client.js'
+
+// 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 [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) // { kind: 'ok'|'err', 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="UOMysticmoon"
+            />
+          </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/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,178 @@
+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) // { 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)
+    }
+  }
+
+  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…' : (sendEmail ? 'Create & email' : 'Create link')}
+        </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)' }}>
+            {result.emailed
+              ? 'Invitation emailed. You can also share this single-use link:'
+              : `Invite created${result.emailError ? ` (email not sent: ${result.emailError})` : ''}. Share this single-use link:`}
+          </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/PageBuilder.jsx

@@ -0,0 +1,453 @@
+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'
+
+  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}>
+          {busy ? 'Saving…' : isEdit ? 'Save' : 'Create'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="pb-error sans">
+          {error}
+          {details.length > 0 && (
+            <ul style={{ margin: '6px 0 0', paddingLeft: 18 }}>
+              {details.map((d, i) => <li key={i}>{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(/[^0-9]/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>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useAsync } from '../../../lib/useAsync.js'
+import { shortDate } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+
+// List of CMS pages. Create/edit open the full-page block builder; the builder
+// owns save/delete/publish so this view is read-only navigation.
+export default function PagesAdmin() {
+  const navigate = useNavigate()
+  const [tick] = useState(0)
+  const { loading, error, data } = useAsync(() => api.admin.listPages(), [tick])
+  const pages = data || []
+
+  const openNew = useCallback(() => navigate('/admin/pages/new'), [navigate])
+
+  return (
+    <section>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, marginBottom: 18 }}>
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.85rem' }}>
+          Compose pages from blocks. A published page is live at <code>/its-slug</code>.
+        </p>
+        <button onClick={openNew} className="btn btn-primary btn-sq">
+          + New page
+        </button>
+      </div>
+
+      {loading && <Loading />}
+      {error && <ErrorState message="Could not load pages." />}
+
+      {!loading && !error && (
+        <div className="panel-flat">
+          <table className="adm-table">
+            <thead>
+              <tr>
+                <th className="adm-th">Title</th>
+                <th className="adm-th">Slug</th>
+                <th className="adm-th">Status</th>
+                <th className="adm-th">Updated</th>
+                <th className="adm-th" />
+              </tr>
+            </thead>
+            <tbody>
+              {pages.length === 0 && (
+                <tr>
+                  <td className="adm-td" colSpan={5} style={{ color: 'var(--muted)' }}>
+                    No pages yet — create your first one.
+                  </td>
+                </tr>
+              )}
+              {pages.map((p) => (
+                <tr key={p.id}>
+                  <td className="adm-td" style={{ color: 'var(--head)' }}>
+                    {p.title}
+                    {p.protected && (
+                      <span title="Protected" style={{ marginLeft: 8 }}>🔒</span>
+                    )}
+                  </td>
+                  <td className="adm-td dim">/{p.slug}</td>
+                  <td className="adm-td">
+                    <span className={`badge ${p.status === 'published' ? 'badge-pub' : 'badge-draft'}`}>
+                      {p.status === 'published' ? 'Published' : 'Draft'}
+                    </span>
+                  </td>
+                  <td className="adm-td dim">{shortDate(p.updatedAt)}</td>
+                  <td className="adm-td" style={{ textAlign: 'right' }}>
+                    {p.status === 'published' && (
+                      <a
+                        className="link-accent"
+                        href={`/${p.slug}`}
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{ marginRight: 14 }}
+                      >
+                        View
+                      </a>
+                    )}
+                    <span className="link-accent" onClick={() => navigate(`/admin/pages/${p.id}`)}>
+                      Edit
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useState } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 import Modal from '../../../components/Modal.jsx'
 import { api } from '../../../api/client.js'
 
@@ -105,6 +105,8 @@ export default function PostEditor({ post, onClose, onSaved }) {
       <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
         {error && <p className="sans" style={{ margin: 0, color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
 
+        {isEdit && post.category === 'news' && <AnnouncePanel postId={post.id} />}
+
         <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
           <label style={{ flex: '1 1 200px' }}>
             <span className="field-label">Category</span>
@@ -173,3 +175,94 @@ const delStyle = {
   cursor: 'pointer',
   marginRight: 'auto',
 }
+
+// ── Announcement status panel ────────────────────────────────────────────────
+// Shows the town-crier + Discord delivery state for a published news post and
+// offers a per-leg retry (useful after fixing the sidecar / news channel without
+// re-publishing). Only rendered for news posts in edit mode; renders nothing
+// until the post has actually been announced (no job row yet → nothing to show).
+const LEG_META = {
+  towncrier: { label: 'In-game town crier' },
+  discord: { label: 'Discord #news' },
+}
+const STATUS_STYLE = {
+  done: { color: '#7bbf8f', label: 'delivered' },
+  pending: { color: '#d9b84a', label: 'pending' },
+  failed: { color: '#d98b84', label: 'failed' },
+}
+
+function AnnouncePanel({ postId }) {
+  const [job, setJob] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [retrying, setRetrying] = useState('')
+
+  async function load() {
+    try {
+      setJob(await api.admin.getAnnounce(postId))
+    } catch {
+      setJob(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [postId])
+
+  async function retry(leg) {
+    setRetrying(leg)
+    try {
+      setJob(await api.admin.retryAnnounceLeg(postId, leg))
+    } catch {
+      // leave the current state; the row simply didn't change
+    } finally {
+      setRetrying('')
+    }
+  }
+
+  if (loading || !job) return null
+
+  return (
+    <div style={panelStyle}>
+      <span className="field-label" style={{ marginBottom: 2 }}>Announcement</span>
+      {['towncrier', 'discord'].map((leg) => {
+        const status = job[`${leg}_status`]
+        const err = job[`${leg}_last_error`]
+        const s = STATUS_STYLE[status] || STATUS_STYLE.pending
+        return (
+          <div key={leg} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span className="sans" style={{ fontSize: '0.85rem', minWidth: 140 }}>{LEG_META[leg].label}</span>
+              <span className="sans" style={{ fontSize: '0.8rem', color: s.color, fontWeight: 600 }}>● {s.label}</span>
+              {status !== 'done' && (
+                <button
+                  onClick={() => retry(leg)}
+                  disabled={Boolean(retrying)}
+                  className="pill"
+                  style={{ marginLeft: 'auto', fontSize: '0.75rem', padding: '3px 12px' }}
+                >
+                  {retrying === leg ? 'Retrying…' : 'Retry'}
+                </button>
+              )}
+            </div>
+            {status === 'failed' && err && (
+              <span className="sans" style={{ fontSize: '0.75rem', color: '#d98b84', paddingLeft: 148 }}>{err}</span>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const panelStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  padding: '12px 14px',
+  borderRadius: 8,
+  border: '1px solid var(--line)',
+  background: 'rgba(255,255,255,0.02)',
+}

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

@@ -1,15 +1,52 @@
-import { useEffect, useState } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 import { Loading, ErrorState } from '../../../components/PageState.jsx'
 import { api } from '../../../api/client.js'
 import { useSite } from '../../../contexts/SiteContext.jsx'
+import EmailDelivery from './EmailDelivery.jsx'
+
+// Lazy-loaded so the heavy rich-text editor stays code-split (matches PostEditor).
+const RichTextEditor = lazy(() => import('../../../components/RichTextEditor.jsx'))
 
 // Editable settings shown on this screen (key -> label + control type).
 const FIELDS = [
   { key: 'site_title', label: 'Site title' },
-  { key: 'homepage_teaser', label: 'Homepage teaser', long: true },
+  {
+    key: 'homepage_teaser',
+    label: 'Homepage teaser',
+    rich: true,
+    help: 'Rich text shown under the hero heading on the portal (when no custom hero layout is published).',
+  },
   { key: 'maintenance_message', label: 'Maintenance message', long: true },
   { key: 'status_message', label: 'Status message' },
-  { key: 'contact_email', label: 'Contact email' },
+  {
+    key: 'contact_email',
+    label: 'Contact email',
+    help: 'Where contact-form messages (and test emails) are delivered. Also the address shown when email delivery is unconfigured and the form falls back to a mailto: link.',
+  },
+  {
+    key: 'player_registration',
+    label: 'Player registration',
+    help: 'Who can create a player account, and how. Off by default.',
+    options: [
+      { value: 'disabled', label: 'Disabled — no self-registration' },
+      { value: 'password', label: 'Password — username + password sign-up' },
+      { value: 'sso', label: 'SSO — sign up with a linked provider' },
+      { value: 'both', label: 'Both — password and SSO' },
+    ],
+    fallback: 'disabled',
+  },
+  {
+    key: 'game_account_signup',
+    label: 'Game-account creation',
+    help: 'Whether players can create a GAME account (for the game client) from the site. The game server’s own SignupMode (Bridge.cfg) must agree: website/hybrid accept site-created accounts, game refuses them. When enabled, a “Create a game account” form appears in the player portal.',
+    options: [
+      { value: 'disabled', label: 'Disabled — link an existing account only' },
+      { value: 'website', label: 'Website — the site creates game accounts' },
+      { value: 'hybrid', label: 'Hybrid — site or in-game (recommended)' },
+      { value: 'game', label: 'Game only — created in the game client, not the site' },
+    ],
+    fallback: 'disabled',
+  },
 ]
 
 export default function SettingsAdmin() {
@@ -28,7 +65,7 @@ export default function SettingsAdmin() {
       .then((all) => {
         if (!active) return
         const v = {}
-        FIELDS.forEach((f) => (v[f.key] = all[f.key] ?? ''))
+        FIELDS.forEach((f) => (v[f.key] = all[f.key] ?? f.fallback ?? ''))
         setValues(v)
         setInitial(v)
       })
@@ -42,10 +79,13 @@ export default function SettingsAdmin() {
   if (loading) return <Loading />
   if (error) return <ErrorState message={error} />
 
-  const set = (k) => (e) => {
+  // setRaw takes the next value directly (rich editor onChange), set adapts a
-    setValues((v) => ({ ...v, [k]: e.target.value }))
+  // DOM change event onto it.
+  const setRaw = (k) => (val) => {
+    setValues((v) => ({ ...v, [k]: val }))
     setSaved(false)
   }
+  const set = (k) => (e) => setRaw(k)(e.target.value)
 
   async function save() {
     setBusy(true)
@@ -65,16 +105,38 @@ export default function SettingsAdmin() {
   return (
     <section style={{ maxWidth: 620 }}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-        {FIELDS.map((f) => (
+        {FIELDS.map((f) => {
-          <label key={f.key} style={{ display: 'block' }}>
+          // A rich field can't live inside a <label> (nested toolbar buttons +
+          // contenteditable), so it uses a plain <div> wrapper instead.
+          const Wrap = f.rich ? 'div' : 'label'
+          return (
+          <Wrap key={f.key} style={{ display: 'block' }}>
             <span className="field-label">{f.label}</span>
-            {f.long ? (
+            {f.rich ? (
+              <Suspense fallback={<span className="spin" />}>
+                <RichTextEditor value={values[f.key]} onChange={setRaw(f.key)} variant="post" />
+              </Suspense>
+            ) : f.options ? (
+              <select value={values[f.key]} onChange={set(f.key)} className="select">
+                {f.options.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            ) : f.long ? (
               <textarea value={values[f.key]} onChange={set(f.key)} className="textarea" style={{ minHeight: 90 }} />
             ) : (
               <input type="text" value={values[f.key]} onChange={set(f.key)} className="input" />
             )}
-          </label>
+            {f.help && (
-        ))}
+              <span className="sans dim" style={{ display: 'block', marginTop: 6, fontSize: '0.76rem' }}>
+                {f.help}
+              </span>
+            )}
+          </Wrap>
+          )
+        })}
         <div style={{ display: 'flex', gap: 10, marginTop: 6, alignItems: 'center' }}>
           <button onClick={save} disabled={busy} className="btn btn-primary btn-sq">
             {busy ? 'Saving…' : 'Save changes'}
@@ -86,6 +148,8 @@ export default function SettingsAdmin() {
           {error && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{error}</span>}
         </div>
       </div>
+
+      <EmailDelivery />
     </section>
   )
 }

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

@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useShardFeed } from '../../../lib/useShardFeed.js'
+import { describe, kindLabel } from '../../../lib/shardEvents.js'
+import { ago } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+
+// Full live feed from the admin SSE channel — every kind, incl. staff audit,
+// cheat detection and login attempts that the public channel never carries.
+function AdminLiveFeed() {
+  const { events, connected } = useShardFeed({ url: api.adminShardStreamUrl, max: 60 })
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 22 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>Live feed (all events)</h3>
+        <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)' }}>
+          <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+          {connected ? 'Live' : 'Offline'}
+        </span>
+      </div>
+      {events.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>Waiting for shard events…</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 360, overflowY: 'auto' }}>
+          {events.map((e) => (
+            <li key={e._id} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.85rem' }}>
+              <span className="sans" style={{ flex: 'none', fontSize: '0.6rem', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--accent)', minWidth: 92 }}>{kindLabel(e.kind)}</span>
+              <span className="sans" style={{ flex: 1, minWidth: 0, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{describe(e)}</span>
+              <span className="sans dim" style={{ flex: 'none', fontSize: '0.74rem' }}>{ago(e.t)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+// uo-link sidecar control panel. The auth token is write-only over this API —
+// stored encrypted, never returned — same convention as the Discord bot token.
+// Saving (re)starts the WS ingest client, so Enabled/URL/token changes take
+// effect immediately with no redeploy.
+
+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)' }}>
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+      {label}
+    </label>
+  )
+}
+
+const STATUS_COLOR = {
+  connected: '#7fd0a4',
+  reconnecting: '#e0b070',
+  error: '#d98b84',
+  disconnected: 'var(--muted)',
+}
+
+function StatusPanel({ config }) {
+  const color = STATUS_COLOR[config.status] || 'var(--muted)'
+  const ingest = config.ingest || {}
+  const health = config.health || {}
+  return (
+    <div style={{ border: '1px solid var(--line)', borderRadius: 10, padding: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <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 || 'disconnected'}
+        </span>
+      </div>
+      {config.statusDetail && (
+        <p className="sans" style={{ margin: 0, fontSize: '0.82rem', color: 'var(--muted)' }}>{config.statusDetail}</p>
+      )}
+      <div className="sans dim" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 16px', fontSize: '0.78rem', marginTop: 2 }}>
+        <span>Shard link: <strong style={{ color: 'var(--ink)' }}>{config.pluginConnected ? 'up' : 'down'}</strong></span>
+        <span>WS ingest: <strong style={{ color: 'var(--ink)' }}>{ingest.connected ? 'connected' : 'offline'}</strong></span>
+        <span>Reconnects: <strong style={{ color: 'var(--ink)' }}>{ingest.reconnects ?? 0}</strong></span>
+        <span>SSE clients: <strong style={{ color: 'var(--ink)' }}>{(config.sse?.publicClients ?? 0) + (config.sse?.adminClients ?? 0)}</strong></span>
+        {config.lastEventAt && <span style={{ gridColumn: '1 / -1' }}>Last event: {new Date(config.lastEventAt).toLocaleString()}</span>}
+        {health.uptime && <span style={{ gridColumn: '1 / -1' }}>Sidecar uptime: {health.uptime}</span>}
+      </div>
+    </div>
+  )
+}
+
+// ── Town crier ──────────────────────────────────────────────────────────────
+function TownCrier() {
+  const [id, setId] = useState('')
+  const [text, setText] = useState('')
+  const [durationSec, setDurationSec] = useState(3600)
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function post() {
+    setBusy(true); setMsg(''); setError('')
+    const lines = text.split('\n').map((l) => l.trim()).filter(Boolean)
+    if (!id.trim() || lines.length === 0) {
+      setBusy(false)
+      return setError('An id and at least one line are required.')
+    }
+    try {
+      await api.admin.postTownCrier({ id: id.trim(), lines, durationSec: Number(durationSec) || undefined })
+      setMsg(`Posted “${id.trim()}”.`)
+    } catch (err) {
+      setError(err.message || 'Could not post.')
+    } finally {
+      setBusy(false)
+    }
+  }
+  async function remove() {
+    if (!id.trim()) return setError('Enter the id to remove.')
+    setBusy(true); setMsg(''); setError('')
+    try {
+      await api.admin.deleteTownCrier(id.trim())
+      setMsg(`Removed “${id.trim()}”.`)
+    } catch (err) {
+      setError(err.message || 'Could not remove.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>Town crier</h3>
+      <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.86rem', lineHeight: 1.6 }}>
+        Broadcast a message that every in-game town crier announces until it expires. Re-posting the same id replaces it.
+      </p>
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Message id</span>
+        <input type="text" value={id} onChange={(e) => setId(e.target.value)} className="input" placeholder="news-42" autoComplete="off" style={{ maxWidth: 220 }} />
+      </label>
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Lines (one per line)</span>
+        <textarea value={text} onChange={(e) => setText(e.target.value)} className="input" rows={3} placeholder={'Hear ye!\nMarket tax is now 5%.'} style={{ resize: 'vertical' }} />
+      </label>
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Duration (seconds)</span>
+        <input type="number" value={durationSec} onChange={(e) => setDurationSec(e.target.value)} className="input" min={1} max={86400} style={{ maxWidth: 160 }} />
+      </label>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+        <button onClick={post} disabled={busy} className="btn btn-primary btn-sq">{busy ? 'Working…' : 'Post message'}</button>
+        <button onClick={remove} disabled={busy} className="btn btn-sq" style={{ borderColor: '#d98b84', color: '#d98b84' }}>Remove by id</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>}
+      </div>
+    </section>
+  )
+}
+
+export default function ShardAdmin() {
+  const [config, setConfig] = useState(null)
+  const [error, setError] = useState('')
+  const [baseUrl, setBaseUrl] = useState('')
+  const [wsUrl, setWsUrl] = useState('')
+  const [token, setToken] = useState('')
+  const [protocol, setProtocol] = useState(1)
+  const [enabled, setEnabled] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [saveError, setSaveError] = useState('')
+  const pollRef = useRef(null)
+  const initializedRef = useRef(false)
+
+  const load = useCallback(async () => {
+    try {
+      const c = await api.admin.getUoLinkConfig()
+      setConfig(c)
+      // Seed the editable fields once; later polls only refresh the status panel
+      // so they never clobber what the admin is mid-typing.
+      if (!initializedRef.current) {
+        setBaseUrl(c.baseUrl || '')
+        setWsUrl(c.wsUrl || '')
+        setProtocol(c.protocol || 1)
+        setEnabled(c.enabled)
+        initializedRef.current = true
+      }
+    } catch {
+      setError('Could not load uo-link config.')
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+    pollRef.current = setInterval(load, 5000)
+    return () => clearInterval(pollRef.current)
+  }, [load])
+
+  async function save() {
+    setBusy(true); setMsg(''); setSaveError('')
+    try {
+      const body = { baseUrl, wsUrl, protocol: Number(protocol), enabled }
+      if (token) body.token = token
+      const saved = await api.admin.saveUoLinkConfig(body)
+      setConfig(saved)
+      setToken('')
+      setMsg('Saved.')
+    } catch (err) {
+      setSaveError(err.message || 'Could not save.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (error) return <ErrorState message={error} />
+  if (!config) return <Loading />
+
+  return (
+    <section style={{ maxWidth: 560, display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <h2 className="display" style={{ margin: 0, fontSize: '1.2rem', color: 'var(--head)' }}>Shard (uo-link)</h2>
+
+      <StatusPanel config={config} />
+
+      <Toggle checked={enabled} onChange={setEnabled} label="Enable the shard integration" />
+
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Base URL (REST)</span>
+        <input type="text" value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} className="input" autoComplete="off" placeholder="http://127.0.0.1:8080" />
+      </label>
+
+      <label style={{ display: 'block' }}>
+        <span className="field-label">WebSocket URL (feed)</span>
+        <input type="text" value={wsUrl} onChange={(e) => setWsUrl(e.target.value)} className="input" autoComplete="off" placeholder="ws://127.0.0.1:8080/ws" />
+      </label>
+
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Auth token</span>
+        <input type="password" value={token} onChange={(e) => setToken(e.target.value)} className="input" autoComplete="new-password" placeholder={config.hasToken ? '•••••••• configured — leave blank to keep' : 'Shared secret from sidecar.toml'} />
+      </label>
+
+      <label style={{ display: 'block', maxWidth: 140 }}>
+        <span className="field-label">Protocol</span>
+        <input type="number" value={protocol} onChange={(e) => setProtocol(e.target.value)} className="input" min={1} max={99} />
+      </label>
+
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 4 }}>
+        <button onClick={save} disabled={busy} className="btn btn-primary btn-sq">{busy ? 'Saving…' : 'Save changes'}</button>
+        {msg && <span className="sans" style={{ color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</span>}
+        {saveError && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{saveError}</span>}
+      </div>
+
+      <TownCrier />
+
+      <AdminLiveFeed />
+    </section>
+  )
+}

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

@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useShardFeed } from '../../../lib/useShardFeed.js'
+import { describe } from '../../../lib/shardEvents.js'
+import { ago } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+
+// In-game staff operations: the uo-link write plane (broadcast / kick / ban /
+// unban) and the help-page support queue, plus a live audit log. Open to admins
+// and moderators. The acting staff member (`actor`) is attached server-side from
+// the session — nothing here sends it — so every action is attributable.
+
+function Flash({ ok, err }) {
+  if (ok) return <span className="sans" style={{ color: '#7fd0a4', fontSize: '0.85rem' }}>{ok}</span>
+  if (err) return <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{err}</span>
+  return null
+}
+
+// ── Broadcast ────────────────────────────────────────────────────────────────
+function Broadcast() {
+  const [text, setText] = useState('')
+  const [hue, setHue] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [ok, setOk] = useState('')
+  const [err, setErr] = useState('')
+
+  async function send() {
+    if (!text.trim()) return setErr('Enter a message.')
+    setBusy(true); setOk(''); setErr('')
+    try {
+      await api.admin.shardOps.broadcast({ text: text.trim(), hue: hue === '' ? undefined : Number(hue) })
+      setOk('Broadcast sent.')
+      setText('')
+    } catch (e) {
+      setErr(e.message || 'Could not broadcast.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>Broadcast</h3>
+      <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.86rem' }}>
+        A system message shown to everyone online right now.
+      </p>
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Message</span>
+        <input type="text" value={text} onChange={(e) => setText(e.target.value)} className="input" maxLength={300} placeholder="Server restart in 5 minutes" autoComplete="off" />
+      </label>
+      <label style={{ display: 'block', maxWidth: 140 }}>
+        <span className="field-label">Hue (optional)</span>
+        <input type="number" value={hue} onChange={(e) => setHue(e.target.value)} className="input" min={0} max={3000} placeholder="53" />
+      </label>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+        <button onClick={send} disabled={busy} className="btn btn-primary btn-sq">{busy ? 'Sending…' : 'Broadcast'}</button>
+        <Flash ok={ok} err={err} />
+      </div>
+    </section>
+  )
+}
+
+// ── Account actions (kick / ban / unban) ─────────────────────────────────────
+function AccountActions() {
+  const [account, setAccount] = useState('')
+  const [durationSec, setDurationSec] = useState('')
+  const [reason, setReason] = useState('')
+  const [busy, setBusy] = useState('')
+  const [ok, setOk] = useState('')
+  const [err, setErr] = useState('')
+
+  const acct = account.trim()
+  function guard() {
+    if (!acct) {
+      setErr('Enter an account name.')
+      return false
+    }
+    return true
+  }
+
+  async function run(label, fn, done) {
+    if (!guard()) return
+    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: acct }), (r) => `Kicked ${acct}${r?.sessions != null ? ` (${r.sessions} session${r.sessions === 1 ? '' : 's'})` : ''}.`)
+  const ban = () =>
+    run('ban', () => api.admin.shardOps.ban({ account: acct, durationSec: durationSec === '' ? undefined : Number(durationSec), reason: reason.trim() || undefined }), () => `Banned ${acct}${durationSec ? ` for ${durationSec}s` : ' indefinitely'}.`)
+  const unban = () => run('unban', () => api.admin.shardOps.unban(acct), () => `Unbanned ${acct}.`)
+
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>Account actions</h3>
+      <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.86rem' }}>
+        Kick, ban or unban a game account. Bans work even if the account is offline; the shard refuses to act on staff at or above co-owner.
+      </p>
+      <label style={{ display: 'block' }}>
+        <span className="field-label">Account</span>
+        <input type="text" value={account} onChange={(e) => setAccount(e.target.value)} className="input" placeholder="griefer42" autoComplete="off" style={{ maxWidth: 260 }} />
+      </label>
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+        <label style={{ display: 'block', maxWidth: 200 }}>
+          <span className="field-label">Ban duration (seconds, blank = permanent)</span>
+          <input type="number" value={durationSec} onChange={(e) => setDurationSec(e.target.value)} className="input" min={0} placeholder="604800" />
+        </label>
+        <label style={{ display: 'block', flex: 1, minWidth: 200 }}>
+          <span className="field-label">Ban reason (optional)</span>
+          <input type="text" value={reason} onChange={(e) => setReason(e.target.value)} className="input" maxLength={500} placeholder="harassment" autoComplete="off" />
+        </label>
+      </div>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+        <button onClick={kick} disabled={!!busy} className="btn btn-sq">{busy === 'kick' ? 'Kicking…' : 'Kick'}</button>
+        <button onClick={ban} disabled={!!busy} className="btn btn-sq" style={{ borderColor: '#d98b84', color: '#d98b84' }}>{busy === 'ban' ? 'Banning…' : 'Ban'}</button>
+        <button onClick={unban} disabled={!!busy} className="btn btn-sq">{busy === 'unban' ? 'Unbanning…' : 'Unban'}</button>
+        <Flash ok={ok} err={err} />
+      </div>
+    </section>
+  )
+}
+
+// ── Support (help-page) queue ────────────────────────────────────────────────
+function PageRow({ page, onDone }) {
+  const [message, setMessage] = useState('')
+  const [busy, setBusy] = useState('')
+  const [err, setErr] = useState('')
+
+  async function respond(close) {
+    if (!message.trim()) return setErr('Enter a reply first.')
+    setBusy(close ? 'respond-close' : 'respond'); setErr('')
+    try {
+      await api.admin.shardOps.respondPage(page.pageId, { message: message.trim(), close })
+      onDone()
+    } catch (e) {
+      setErr(e.message || 'Could not send.')
+      setBusy('')
+    }
+  }
+  async function close() {
+    setBusy('close'); setErr('')
+    try {
+      await api.admin.shardOps.closePage(page.pageId)
+      onDone()
+    } catch (e) {
+      setErr(e.message || 'Could not close.')
+      setBusy('')
+    }
+  }
+
+  return (
+    <div className="panel" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+        <div style={{ minWidth: 0 }}>
+          <span className="sans" style={{ fontSize: '0.62rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)' }}>{page.type || 'Page'}</span>
+          <div className="sans" style={{ color: 'var(--head)', fontSize: '0.95rem' }}>
+            {page.sender?.name || page.pageId}
+            {page.handled && <span className="dim" style={{ fontSize: '0.72rem' }}> · claimed{page.handler ? ` by ${page.handler}` : ''}</span>}
+          </div>
+        </div>
+        <span className="sans dim" style={{ flex: 'none', fontSize: '0.74rem' }}>{page.sentMs ? ago(page.sentMs) : ''}</span>
+      </div>
+      {page.message && <p className="sans" style={{ margin: 0, color: 'var(--ink)', fontSize: '0.88rem', lineHeight: 1.5 }}>{page.message}</p>}
+      <div className="sans dim" style={{ fontSize: '0.72rem' }}>
+        {page.map || '—'}{page.x != null ? ` (${page.x}, ${page.y})` : ''}
+      </div>
+      <textarea value={message} onChange={(e) => setMessage(e.target.value)} className="input" rows={2} placeholder="A GM is on the way." style={{ resize: 'vertical' }} />
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+        <button onClick={() => respond(false)} disabled={!!busy} className="btn btn-sq">{busy === 'respond' ? 'Sending…' : 'Reply'}</button>
+        <button onClick={() => respond(true)} disabled={!!busy} className="btn btn-primary btn-sq">{busy === 'respond-close' ? 'Sending…' : 'Reply & close'}</button>
+        <button onClick={close} disabled={!!busy} className="btn btn-sq" style={{ borderColor: '#d98b84', color: '#d98b84' }}>{busy === 'close' ? 'Closing…' : 'Close'}</button>
+        {err && <span className="sans" style={{ color: '#d98b84', fontSize: '0.8rem' }}>{err}</span>}
+      </div>
+    </div>
+  )
+}
+
+function SupportQueue() {
+  const [pages, setPages] = useState(null)
+  const [err, setErr] = useState('')
+  const pollRef = useRef(null)
+
+  const load = useCallback(async () => {
+    try {
+      setPages(await api.admin.shardOps.pages())
+    } catch {
+      setErr('Could not load the support queue.')
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+    pollRef.current = setInterval(load, 7000)
+    return () => clearInterval(pollRef.current)
+  }, [load])
+
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)' }}>Support queue</h3>
+      <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.86rem' }}>
+        Open help pages from players. A reply reaches them in game (or on their next login).
+      </p>
+      {err && <span className="sans" style={{ color: '#d98b84', fontSize: '0.85rem' }}>{err}</span>}
+      {pages == null ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>Loading…</p>
+      ) : pages.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>The queue is empty.</p>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {pages.map((p) => <PageRow key={p.pageId} page={p} onDone={load} />)}
+        </div>
+      )}
+    </section>
+  )
+}
+
+// ── Audit log ────────────────────────────────────────────────────────────────
+// Seeded from the stored admin.audit history, then kept live from the admin SSE
+// channel (which carries every kind — we filter to admin.audit here).
+function AuditLog() {
+  const [seed, setSeed] = useState([])
+  const { events } = useShardFeed({ url: api.adminShardStreamUrl, filter: new Set(['admin.audit']), max: 50 })
+
+  useEffect(() => {
+    api.admin.shardOps
+      .audit(50)
+      .then((rows) => setSeed(rows.map((r) => ({ ...r, _id: `seed-${r.id}` }))))
+      .catch(() => setSeed([]))
+  }, [])
+
+  // Live events on top; fall back to the seed for anything older than the live tail.
+  const oldestLive = events.length ? Math.min(...events.map((e) => e.t || 0)) : Infinity
+  const rows = [...events, ...seed.filter((s) => (s.t || 0) < oldestLive)].slice(0, 60)
+
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 22 }}>
+      <h3 className="display" style={{ margin: 0, fontSize: '1.05rem', color: 'var(--head)', marginBottom: 12 }}>Audit log</h3>
+      {rows.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>No moderation actions recorded yet.</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 320, overflowY: 'auto' }}>
+          {rows.map((e) => (
+            <li key={e._id} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.85rem' }}>
+              <span className="sans" style={{ flex: 1, minWidth: 0, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{describe(e)}</span>
+              <span className="sans dim" style={{ flex: 'none', fontSize: '0.74rem' }}>{ago(e.t)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+export default function ShardOps() {
+  return (
+    <section style={{ maxWidth: 620, display: 'flex', flexDirection: 'column', gap: 22 }}>
+      <Broadcast />
+      <AccountActions />
+      <SupportQueue />
+      <AuditLog />
+    </section>
+  )
+}

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

@@ -0,0 +1,182 @@
+import { useMemo } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useAsync } from '../../../lib/useAsync.js'
+import { dateTime, ago } from '../../../lib/format.js'
+import { api } from '../../../api/client.js'
+import CharacterStats from '../../../components/CharacterStats.jsx'
+import GameAccounts from '../../../components/GameAccounts.jsx'
+import VendorSales from '../../../components/VendorSales.jsx'
+
+// Admin read-only view of one user's shard (uo-link) footprint: linked game
+// accounts + character rosters, currently-online characters, houses (incl.
+// IDOC) and recent vendor sales — everything scoped to that user's accounts.
+// Reached from the Users table's "View" action; Edit stays a separate modal.
+
+const ROLE_BADGE = {
+  admin: 'badge-admin',
+  editor: 'badge-editor',
+  moderator: 'badge-moderator',
+  player: 'badge-player',
+}
+
+function SectionTitle({ children }) {
+  return (
+    <div className="field-label" style={{ marginBottom: 12, marginTop: 4 }}>
+      {children}
+    </div>
+  )
+}
+
+// Currently-online characters on the user's accounts, with where they are. The
+// per-character Online/Offline badge lives in the roster; this adds location.
+function OnlineNow({ scope }) {
+  const { data } = useAsync(() => scope.online(), [scope])
+  if (!data) return null
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
+      <SectionTitle>Online now</SectionTitle>
+      {data.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>No characters online right now.</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {data.map((c) => (
+            <li key={c.serial} className="sans" style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: '0.9rem', color: 'var(--ink)' }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#7fd0a4', boxShadow: '0 0 6px #7fd0a4', flex: 'none' }} />
+                <span style={{ color: 'var(--head)' }}>{c.name || '(unnamed)'}</span>
+              </span>
+              <span className="dim" style={{ flex: 'none', fontSize: '0.8rem' }}>
+                {c.map != null ? `map ${c.map} · ${c.x}, ${c.y}` : '—'}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+// Shard "standing": city governorships held and guilds led by this user's
+// accounts (both reliable current-state lookups). Renders nothing when empty.
+function Standing({ scope }) {
+  const { data } = useAsync(() => scope.standing(), [scope])
+  if (!data) return null
+  const govs = data.governorOf || []
+  const guilds = data.guildsLed || []
+  if (govs.length === 0 && guilds.length === 0) return null
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
+      <SectionTitle>Standing</SectionTitle>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+        {govs.map((g) => (
+          <span key={`gov-${g.city}`} className="sans" style={{ fontSize: '0.78rem', padding: '4px 10px', borderRadius: 999, border: '1px solid #c9a24b55', color: '#c9a24b' }}>
+            Governor of {g.city}
+          </span>
+        ))}
+        {guilds.map((g) => (
+          <span key={`guild-${g.id}`} className="sans" style={{ fontSize: '0.78rem', padding: '4px 10px', borderRadius: 999, border: '1px solid var(--accent)', color: 'var(--accent)' }}>
+            Guildmaster{g.abbr ? `, [${g.abbr}]` : ''} {g.name}
+          </span>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// Houses owned by the user's accounts, IDOC first (flagged).
+function Houses({ scope }) {
+  const { data } = useAsync(() => scope.houses(), [scope])
+  if (!data) return null
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
+      <SectionTitle>Houses</SectionTitle>
+      {data.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.86rem' }}>No houses recorded for this user’s accounts.</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {data.map((h) => (
+            <li
+              key={h.serial}
+              style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline', padding: '12px 14px', border: '1px solid var(--line)', borderRadius: 10, background: 'rgba(255,255,255,0.02)' }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <div className="sans" style={{ color: 'var(--head)', fontSize: '0.95rem' }}>
+                  {h.name || 'Unnamed house'}
+                  {h.isIdoc && <span className="badge" style={{ marginLeft: 8, background: '#5b2020', color: '#f0c8c2' }}>IDOC</span>}
+                </div>
+                <div className="sans dim" style={{ fontSize: '0.78rem', marginTop: 2 }}>
+                  {h.region || (h.map != null ? `map ${h.map}` : 'unknown')}
+                  {h.x != null ? ` · ${h.x}, ${h.y}` : ''}
+                  {h.ownerAcct ? ` · ${h.ownerAcct}` : ''}
+                  {(h.coOwners || h.friends) ? ` · ${h.coOwners || 0} co-owners, ${h.friends || 0} friends` : ''}
+                </div>
+              </div>
+              <div className="sans dim" style={{ flex: 'none', fontSize: '0.78rem', textAlign: 'right' }}>
+                {(h.decay || h.stage) ? <div style={{ color: h.isIdoc ? '#e0928a' : 'var(--muted)' }}>{h.decay || h.stage}</div> : null}
+                {h.price != null ? <div style={{ fontVariantNumeric: 'tabular-nums' }}>{Number(h.price).toLocaleString()} gp</div> : null}
+                {h.lastRefreshed ? <div>refreshed {ago(h.lastRefreshed)}</div> : null}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+function ShardSections({ scope }) {
+  return (
+    <>
+      <CharacterStats scope={scope} />
+      <SectionTitle>Linked accounts &amp; characters</SectionTitle>
+      <GameAccounts scope={scope} readOnly moderation onUnlink={scope.unlink} charTo={(serial) => `/admin/characters/${serial}`} />
+      <Standing scope={scope} />
+      <OnlineNow scope={scope} />
+      <Houses scope={scope} />
+      <VendorSales fetchSales={scope.sales} />
+    </>
+  )
+}
+
+export default function UserDetail() {
+  const { id } = useParams()
+  // Memoize so the child components' effects (keyed on `scope`) don't refetch
+  // on every render.
+  const scope = useMemo(() => api.admin.userShard(id), [id])
+  const { loading, error, data: user } = useAsync(() => api.admin.getUser(id), [id])
+
+  if (loading) return <Loading />
+  if (error) return <ErrorState message="Could not load this user." />
+
+  return (
+    <section>
+      <Link to="/admin/users" className="link-accent" style={{ fontSize: '0.85rem' }}>
+        ← Back to users
+      </Link>
+
+      {/* Header */}
+      <div style={{ padding: 22, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--panel-grad)', margin: '12px 0 24px' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
+          <span className="display" style={{ fontSize: '1.5rem', color: 'var(--head)' }}>
+            {user.username}
+          </span>
+          <span className={`badge ${ROLE_BADGE[user.role] || 'badge-editor'}`}>{user.role}</span>
+          <span
+            className="sans"
+            style={{ fontSize: '0.82rem', color: user.status && user.status !== 'active' ? '#d98b84' : 'var(--muted)' }}
+          >
+            {user.status || 'active'}
+          </span>
+        </div>
+        <div className="sans dim" style={{ display: 'flex', gap: 18, marginTop: 10, flexWrap: 'wrap', fontSize: '0.8rem' }}>
+          {user.email && <span>{user.email}</span>}
+          <span>Last login: {user.last_login_at ? dateTime(user.last_login_at) : 'never'}</span>
+          {user.created_at && <span>Joined: {dateTime(user.created_at)}</span>}
+        </div>
+      </div>
+
+      <ShardSections scope={scope} />
+    </section>
+  )
+}

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

@@ -8,6 +8,8 @@ export default function UserEditor({ user, onClose, onSaved }) {
     username: user?.username || '',
     password: '',
     role: user?.role || 'admin',
+    status: user?.status || 'active',
+    email: user?.email || '',
   })
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState('')
@@ -21,12 +23,19 @@ export default function UserEditor({ user, onClose, onSaved }) {
     setBusy(true)
     setError('')
     try {
+      const email = form.email.trim() || null
       if (isEdit) {
-        const payload = { username: form.username.trim(), role: form.role }
+        const payload = { username: form.username.trim(), role: form.role, status: form.status, email }
         if (form.password) payload.password = form.password
         await api.admin.updateUser(user.id, payload)
       } else {
-        await api.admin.createUser({ username: form.username.trim(), password: form.password, role: form.role })
+        await api.admin.createUser({
+          username: form.username.trim(),
+          password: form.password,
+          role: form.role,
+          status: form.status,
+          email,
+        })
       }
       onSaved()
     } catch (err) {
@@ -75,17 +84,41 @@ export default function UserEditor({ user, onClose, onSaved }) {
           <input type="text" value={form.username} onChange={set('username')} className="input" autoComplete="off" />
         </label>
         <label>
-          <span className="field-label">{isEdit ? 'New password (leave blank to keep)' : 'Password'}</span>
+          <span className="field-label">
+            {isEdit ? 'Reset password (leave blank to keep)' : 'Password'}
+          </span>
           <input type="password" value={form.password} onChange={set('password')} className="input" autoComplete="new-password" />
+          {isEdit && (
+            <span className="sans dim" style={{ display: 'block', marginTop: 6, fontSize: '0.76rem' }}>
+              Setting a new password here is the supported reset for a player who is locked out. It logs
+              their other sessions out.
+            </span>
+          )}
         </label>
         <label>
+          <span className="field-label">Email (optional)</span>
+          <input type="email" value={form.email} onChange={set('email')} className="input" autoComplete="off" placeholder="player@example.com" />
+        </label>
+        <div style={{ display: 'flex', gap: 12 }}>
+          <label style={{ flex: 1 }}>
             <span className="field-label">Role</span>
             <select value={form.role} onChange={set('role')} className="select">
               <option value="admin">admin</option>
               <option value="editor">editor</option>
               <option value="moderator">moderator</option>
+              <option value="player">player</option>
             </select>
           </label>
+          <label style={{ flex: 1 }}>
+            <span className="field-label">Status</span>
+            <select value={form.status} onChange={set('status')} className="select">
+              <option value="active">active</option>
+              <option value="disabled">disabled</option>
+              <option value="banned">banned</option>
+              <option value="pending">pending</option>
+            </select>
+          </label>
+        </div>
       </div>
     </Modal>
   )

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

@@ -1,13 +1,20 @@
 import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Loading, ErrorState } from '../../../components/PageState.jsx'
 import { useAsync } from '../../../lib/useAsync.js'
 import { dateTime } from '../../../lib/format.js'
 import { api } from '../../../api/client.js'
 import UserEditor from './UserEditor.jsx'
 
-const ROLE_BADGE = { admin: 'badge-admin', editor: 'badge-editor', moderator: 'badge-moderator' }
+const ROLE_BADGE = {
+  admin: 'badge-admin',
+  editor: 'badge-editor',
+  moderator: 'badge-moderator',
+  player: 'badge-player',
+}
 
 export default function UsersAdmin() {
+  const navigate = useNavigate()
   const [tick, setTick] = useState(0)
   const reload = useCallback(() => setTick((t) => t + 1), [])
   const { loading, error, data } = useAsync(() => api.admin.listUsers(), [tick])
@@ -18,7 +25,7 @@ export default function UsersAdmin() {
     <section>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
         <p className="sans muted" style={{ margin: 0, fontSize: '0.9rem' }}>
-          Manage admin, editor, and moderator accounts
+          Manage admin, editor, moderator, and player accounts
         </p>
         <button onClick={() => setEditing('new')} className="btn btn-primary btn-sq">
           + Add user
@@ -35,6 +42,7 @@ export default function UsersAdmin() {
               <tr>
                 <th className="adm-th">Username</th>
                 <th className="adm-th">Role</th>
+                <th className="adm-th">Status</th>
                 <th className="adm-th">Last login</th>
                 <th className="adm-th" />
               </tr>
@@ -48,11 +56,24 @@ export default function UsersAdmin() {
                   <td className="adm-td">
                     <span className={`badge ${ROLE_BADGE[u.role] || 'badge-editor'}`}>{u.role}</span>
                   </td>
+                  <td className="adm-td">
+                    <span
+                      className="sans"
+                      style={{ fontSize: '0.82rem', color: u.status && u.status !== 'active' ? '#d98b84' : 'var(--muted)' }}
+                    >
+                      {u.status || 'active'}
+                    </span>
+                  </td>
                   <td className="adm-td dim">{u.last_login_at ? dateTime(u.last_login_at) : 'never'}</td>
                   <td className="adm-td" style={{ textAlign: 'right' }}>
+                    <span style={{ display: 'inline-flex', gap: 16, justifyContent: 'flex-end' }}>
+                      <span className="link-accent" onClick={() => navigate(`/admin/users/${u.id}`)}>
+                        View
+                      </span>
                       <span className="link-accent" onClick={() => setEditing(u)}>
                         Edit
                       </span>
+                    </span>
                   </td>
                 </tr>
               ))}

client/src/routes/player/AcceptInvite.jsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+import { api } from '../../api/client.js'
+import PlayerShell, { honeypotStyle } from './PlayerShell.jsx'
+import CreateGameAccountForm from '../../components/CreateGameAccountForm.jsx'
+
+// Public, token-gated invite acceptance (/invite/:token). Validates the invite,
+// lets the invitee set a username + password (their email + role are pre-assigned),
+// creates the account at that role and logs them in. For a player invite it then
+// offers the built-in "create game account" step before sending them to the portal.
+export default function AcceptInvite() {
+  const { token } = useParams()
+  const navigate = useNavigate()
+  const { refresh } = useAuth()
+
+  const [invite, setInvite] = useState(null) // { email, role }
+  const [loadErr, setLoadErr] = useState('')
+  const [signupOk, setSignupOk] = useState(false)
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [company, setCompany] = useState('') // honeypot
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [accepted, setAccepted] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    api.getInvite(token)
+      .then((iv) => active && setInvite(iv))
+      .catch((err) => active && setLoadErr(err.status === 404 ? 'This invitation is invalid or has expired.' : 'Could not load this invitation.'))
+    api.publicSettings()
+      .then((s) => active && setSignupOk(Boolean(s?.gameAccountSignup)))
+      .catch(() => {})
+    return () => { active = false }
+  }, [token])
+
+  const dest = invite && invite.role === 'player' ? '/player' : '/admin'
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    setError('')
+    if (username.trim().length < 3) return setError('Username must be at least 3 characters.')
+    if (password.length < 8) return setError('Password must be at least 8 characters.')
+    setBusy(true)
+    try {
+      await api.acceptInvite(token, username.trim(), password, { company })
+      await refresh() // pull the freshly-issued session into context
+      setAccepted(true)
+      // Staff invites are web-only — no game step; go straight in.
+      if (!(invite.role === 'player' && signupOk)) navigate(dest, { replace: true })
+    } catch (err) {
+      if (err.status === 409) setError('That username is already taken, or the invite was already used.')
+      else if (err.status === 404) setError('This invitation is invalid or has expired.')
+      else if (err.status === 400) setError(err.message || 'Please check your details and try again.')
+      else setError('Could not accept the invitation right now.')
+      setBusy(false)
+    }
+  }
+
+  // ── Loading / invalid ─────────────────────────────────────────────────────
+  if (loadErr) {
+    return (
+      <PlayerShell subtitle="Invitation">
+        <p className="sans" style={{ margin: 0, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.6 }}>{loadErr}</p>
+        <p className="sans" style={{ textAlign: 'center', margin: '16px 0 0' }}>
+          <Link to="/account/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>Go to sign in</Link>
+        </p>
+      </PlayerShell>
+    )
+  }
+  if (!invite) {
+    return (
+      <PlayerShell subtitle="Invitation">
+        <div style={{ display: 'grid', placeItems: 'center', padding: 20 }}><span className="spin" /></div>
+      </PlayerShell>
+    )
+  }
+
+  // ── Accepted: optional game-account step (player invites) ──────────────────
+  if (accepted) {
+    return (
+      <PlayerShell subtitle="Set up your game account">
+        <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.9rem', lineHeight: 1.6 }}>
+          Your account is ready. Create a game account now to play, or skip and do it later from your portal.
+        </p>
+        <CreateGameAccountForm
+          submit={api.player.shard.createAccount}
+          onCreated={() => navigate('/player', { replace: true })}
+        />
+        <p className="sans" style={{ textAlign: 'center', margin: '18px 0 0' }}>
+          <button type="button" onClick={() => navigate('/player', { replace: true })} className="btn" style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer' }}>
+            Skip for now →
+          </button>
+        </p>
+      </PlayerShell>
+    )
+  }
+
+  // ── Accept form ────────────────────────────────────────────────────────────
+  return (
+    <PlayerShell subtitle="Accept your invitation">
+      <p className="sans" style={{ marginTop: 0, marginBottom: 18, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+        You’ve been invited as <strong style={{ color: 'var(--head)' }}>{invite.role}</strong>
+        {invite.email ? <> for <strong style={{ color: 'var(--head)' }}>{invite.email}</strong></> : null}. Choose a username and password to finish.
+      </p>
+      <form onSubmit={onSubmit}>
+        <label style={{ display: 'block', marginBottom: 16 }}>
+          <span className="field-label">Username</span>
+          <input type="text" autoComplete="username" autoFocus value={username} onChange={(e) => setUsername(e.target.value)} className="input" />
+        </label>
+        <label style={{ display: 'block', marginBottom: 22 }}>
+          <span className="field-label">Password</span>
+          <input type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" />
+        </label>
+        <div style={honeypotStyle} aria-hidden="true">
+          <label>
+            Company
+            <input type="text" name="company" tabIndex={-1} autoComplete="off" value={company} onChange={(e) => setCompany(e.target.value)} />
+          </label>
+        </div>
+
+        {error && <p className="sans" style={{ margin: '0 0 14px', color: '#d98b84', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}
+
+        <button type="submit" disabled={busy} className="btn btn-primary" style={{ display: 'block', width: '100%', borderRadius: 8, padding: 12, textAlign: 'center' }}>
+          {busy ? 'Creating…' : 'Accept & create account'}
+        </button>
+      </form>
+    </PlayerShell>
+  )
+}

client/src/routes/player/PlayerAccount.jsx

@@ -0,0 +1,354 @@
+import { useCallback, useEffect, useState } from 'react'
+import ProviderIcon from '../../components/ProviderIcon.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+import { api } from '../../api/client.js'
+
+// ── Change username ────────────────────────────────────────────────────────
+function ChangeUsername({ account, onChanged }) {
+  const [username, setUsername] = useState(account.username)
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function save(e) {
+    e.preventDefault()
+    setMsg('')
+    setError('')
+    if (username.trim().length < 3) return setError('Username must be at least 3 characters.')
+    setBusy(true)
+    try {
+      const { username: next } = await api.player.changeUsername(username.trim())
+      setMsg('Username updated.')
+      await onChanged(next)
+    } catch (err) {
+      if (err.status === 409) setError('That username is already taken.')
+      else setError(err.message || 'Could not change your username.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Section title="Username">
+      <form onSubmit={save} style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320 }}>
+        <label>
+          <span className="field-label">Username</span>
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" autoComplete="username" />
+        </label>
+        <div>
+          <button type="submit" disabled={busy || username.trim() === account.username} className="btn btn-primary btn-sq">
+            {busy ? 'Saving…' : 'Change username'}
+          </button>
+        </div>
+        <Note msg={msg} error={error} />
+      </form>
+    </Section>
+  )
+}
+
+// ── Change / set password ──────────────────────────────────────────────────
+function ChangePassword({ account }) {
+  const hasPassword = account.has_password
+  const [current, setCurrent] = useState('')
+  const [next, setNext] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function save(e) {
+    e.preventDefault()
+    setMsg('')
+    setError('')
+    if (next.length < 8) return setError('New password must be at least 8 characters.')
+    if (hasPassword && !current) return setError('Enter your current password.')
+    setBusy(true)
+    try {
+      await api.player.changePassword(next, hasPassword ? current : undefined)
+      setMsg(hasPassword ? 'Password changed.' : 'Password set. You can now sign in with it.')
+      setCurrent('')
+      setNext('')
+    } catch (err) {
+      setError(err.message || 'Could not change your password.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Section title={hasPassword ? 'Password' : 'Set a password'}>
+      {!hasPassword && (
+        <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+          Your account was created through a linked provider and has no password yet. Set one to also be
+          able to sign in with a username and password.
+        </p>
+      )}
+      <form onSubmit={save} style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320 }}>
+        {hasPassword && (
+          <label>
+            <span className="field-label">Current password</span>
+            <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)} className="input" autoComplete="current-password" />
+          </label>
+        )}
+        <label>
+          <span className="field-label">New password</span>
+          <input type="password" value={next} onChange={(e) => setNext(e.target.value)} className="input" autoComplete="new-password" />
+        </label>
+        <div>
+          <button type="submit" disabled={busy} className="btn btn-primary btn-sq">
+            {busy ? 'Saving…' : hasPassword ? 'Change password' : 'Set password'}
+          </button>
+        </div>
+        <Note msg={msg} error={error} />
+      </form>
+    </Section>
+  )
+}
+
+// ── Two-factor (TOTP) ──────────────────────────────────────────────────────
+function TwoFactor({ account, reload }) {
+  const enabled = account.totp_enabled
+  const [setup, setSetup] = useState(null)
+  const [code, setCode] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+
+  async function begin() {
+    setBusy(true); setMsg(''); setError('')
+    try {
+      setSetup(await api.player.totpSetup())
+      setCode('')
+    } catch (err) {
+      setError(err.message || 'Could not start setup.')
+    } finally {
+      setBusy(false)
+    }
+  }
+  async function confirm() {
+    setBusy(true); setMsg(''); setError('')
+    try {
+      await api.player.totpEnable(code.trim())
+      setSetup(null); setCode(''); setMsg('Two-factor is now enabled.')
+      await reload()
+    } catch (err) {
+      setError(err.message || 'Could not enable two-factor.')
+    } finally {
+      setBusy(false)
+    }
+  }
+  async function disable() {
+    setBusy(true); setMsg(''); setError('')
+    try {
+      await api.player.totpDisable(code.trim())
+      setCode(''); setMsg('Two-factor has been disabled.')
+      await reload()
+    } catch (err) {
+      setError(err.message || 'Could not disable two-factor.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Section title="Two-factor authentication">
+      <div className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, border: '1px solid var(--line)', fontSize: '0.82rem', color: enabled ? '#7fd0a4' : 'var(--muted)', marginBottom: 18 }}>
+        <span style={{ width: 9, height: 9, borderRadius: '50%', background: enabled ? '#7fd0a4' : 'var(--dim)' }} />
+        {enabled ? 'Enabled' : 'Not enabled'}
+      </div>
+
+      {!enabled && !setup && (
+        <div>
+          <button onClick={begin} disabled={busy} className="btn btn-primary btn-sq">
+            {busy ? 'Preparing…' : 'Set up two-factor'}
+          </button>
+        </div>
+      )}
+
+      {!enabled && setup && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.88rem' }}>
+            Scan this QR code with your authenticator app, then enter the current 6-digit code.
+          </p>
+          <img src={setup.qr} alt="TOTP QR code" width={180} height={180} style={{ borderRadius: 8, background: '#fff', padding: 8, alignSelf: 'flex-start' }} />
+          <label style={{ display: 'block', maxWidth: 220 }}>
+            <span className="field-label">Verification code</span>
+            <input type="text" inputMode="numeric" autoComplete="one-time-code" placeholder="6-digit code" value={code} onChange={(e) => setCode(e.target.value)} className="input" />
+          </label>
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+            <button onClick={confirm} disabled={busy || !code.trim()} className="btn btn-primary btn-sq">
+              {busy ? 'Enabling…' : 'Confirm & enable'}
+            </button>
+            <button onClick={() => setSetup(null)} disabled={busy} className="pill">Cancel</button>
+          </div>
+        </div>
+      )}
+
+      {enabled && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.88rem' }}>
+            Enter a current code from your authenticator to turn two-factor off.
+          </p>
+          <label style={{ display: 'block', maxWidth: 220 }}>
+            <span className="field-label">Verification code</span>
+            <input type="text" inputMode="numeric" autoComplete="one-time-code" placeholder="6-digit code" value={code} onChange={(e) => setCode(e.target.value)} className="input" />
+          </label>
+          <div>
+            <button onClick={disable} disabled={busy || !code.trim()} className="btn btn-sq" style={{ borderColor: '#d98b84', color: '#d98b84' }}>
+              {busy ? 'Disabling…' : 'Disable two-factor'}
+            </button>
+          </div>
+        </div>
+      )}
+      <Note msg={msg} error={error} />
+    </Section>
+  )
+}
+
+// ── Linked SSO identities ──────────────────────────────────────────────────
+function LinkedAccounts() {
+  const [linked, setLinked] = useState(null)
+  const [available, setAvailable] = useState([])
+  const [error, setError] = useState('')
+
+  const banner = (() => {
+    const q = new URLSearchParams(window.location.search)
+    if (q.get('linked')) return { ok: true, text: 'Account linked.' }
+    if (q.get('link_error') === 'in_use') return { ok: false, text: 'That external account is already linked to another user.' }
+    if (q.get('link_error')) return { ok: false, text: 'Could not link that account. Please try again.' }
+    return null
+  })()
+
+  const load = useCallback(async () => {
+    try {
+      const [ids, avail] = await Promise.all([
+        api.player.linkedIdentities(),
+        api.authProviders().catch(() => []),
+      ])
+      setLinked(ids)
+      setAvailable(Array.isArray(avail) ? avail : [])
+    } catch {
+      setError('Could not load linked accounts.')
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  const nameFor = (id) => available.find((p) => p.id === id)?.name || id.charAt(0).toUpperCase() + id.slice(1)
+  const iconFor = (id) => (id === 'google' || id === 'discord' ? id : 'oidc')
+
+  async function unlink(provider) {
+    if (!window.confirm(`Unlink ${nameFor(provider)} from your account?`)) return
+    try {
+      await api.player.unlinkIdentity(provider)
+      await load()
+    } catch (err) {
+      setError(err.message || 'Could not unlink.')
+    }
+  }
+
+  if (error) return <ErrorState message={error} />
+  if (!linked) return null
+
+  const linkedIds = new Set(linked.map((i) => i.provider))
+  const linkable = available.filter((p) => !linkedIds.has(p.id))
+
+  return (
+    <Section title="Linked accounts">
+      <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
+        Link a Google, Discord, or other provider so you can sign in with it.
+      </p>
+      {banner && (
+        <p className="sans" style={{ color: banner.ok ? '#7fd0a4' : '#d98b84', fontSize: '0.86rem' }}>{banner.text}</p>
+      )}
+      {linked.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '14px 0' }}>
+          {linked.map((i) => (
+            <div key={i.provider} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8 }}>
+              <span style={{ display: 'inline-flex', width: 20, height: 20 }}>
+                <ProviderIcon icon={iconFor(i.provider)} size={20} />
+              </span>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div className="sans" style={{ color: 'var(--head)', fontSize: '0.9rem' }}>{nameFor(i.provider)}</div>
+                {i.email && <div className="sans dim" style={{ fontSize: '0.78rem' }}>{i.email}</div>}
+              </div>
+              <button onClick={() => unlink(i.provider)} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>Unlink</button>
+            </div>
+          ))}
+        </div>
+      )}
+      {linkable.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 6 }}>
+          {linkable.map((p) => (
+            <button key={p.id} onClick={() => window.location.assign(`/api/v1/auth/sso/${p.id}/link?returnTo=${encodeURIComponent('/account')}`)} className="btn" style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', width: '100%', maxWidth: 320, borderRadius: 8, padding: 10, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.04)', color: 'var(--ink)' }}>
+              <span style={{ display: 'inline-flex', width: 18, height: 18 }}>
+                <ProviderIcon icon={p.icon} size={18} />
+              </span>
+              Link {p.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {linked.length === 0 && linkable.length === 0 && (
+        <p className="sans dim" style={{ fontSize: '0.86rem' }}>No SSO providers are enabled.</p>
+      )}
+    </Section>
+  )
+}
+
+// ── Shared bits ────────────────────────────────────────────────────────────
+function Section({ title, children }) {
+  return (
+    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 26, marginTop: 26 }}>
+      <h2 className="display" style={{ marginTop: 0, fontSize: '1.15rem', color: 'var(--head)' }}>{title}</h2>
+      {children}
+    </section>
+  )
+}
+function Note({ msg, error }) {
+  if (!msg && !error) return null
+  return <p className="sans" style={{ margin: '4px 0 0', color: error ? '#d98b84' : '#7fd0a4', fontSize: '0.85rem' }}>{error || msg}</p>
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────
+export default function PlayerAccount() {
+  const { refresh } = useAuth()
+  const [account, setAccount] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    try {
+      setAccount(await api.player.getAccount())
+    } catch {
+      setError('Could not load your account.')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+  useEffect(() => { load() }, [load])
+
+  // After a username change: reload local account + refresh the auth context so
+  // the header reflects the new name.
+  const onUsernameChanged = useCallback(async () => {
+    await Promise.all([load(), refresh()])
+  }, [load, refresh])
+
+  return (
+    <div>
+      {loading && <Loading />}
+      {error && <ErrorState message={error} />}
+      {!loading && !error && account && (
+        <>
+          <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.9rem' }}>
+            Signed in as <strong style={{ color: 'var(--head)' }}>{account.username}</strong>
+            {account.email ? ` · ${account.email}` : ''}
+          </p>
+          <ChangeUsername account={account} onChanged={onUsernameChanged} />
+          <ChangePassword account={account} />
+          <TwoFactor account={account} reload={load} />
+          <LinkedAccounts />
+        </>
+      )}
+    </div>
+  )
+}

client/src/routes/player/PlayerCharacter.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 player's character sheet inside the portal. Owner-checked: the endpoint only
+// returns a sheet for a character on an account linked to the caller.
+export default function PlayerCharacter() {
+  const { serial } = useParams()
+  const { loading, error, data } = useAsync(() => api.player.shard.char(serial), [serial])
+  const restarting = error && error.status === 503
+  const forbidden = error && error.status === 403
+
+  return (
+    <div>
+      <p style={{ margin: '0 0 18px' }}>
+        <Link to="/player" className="sans" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.86rem' }}>
+          ← Back to 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} />}
+    </div>
+  )
+}

client/src/routes/player/PlayerCharacters.jsx

@@ -0,0 +1,58 @@
+import GameAccounts from '../../components/GameAccounts.jsx'
+import VendorSales from '../../components/VendorSales.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+
+// The logged-in player's characters. Shows the link prompt when no game account
+// is linked, otherwise their characters grouped by account (shared component),
+// plus their own home status and recent vendor sales.
+
+const DECAY_TONE = {
+  LikeNew: '#7fd0a4', Ageless: '#7fd0a4', Slightly: '#a9cf8a', Somewhat: '#d7c56a',
+  Fairly: '#e0a95f', Greatly: '#d9736f', IDOC: '#e05a5a', Collapsed: '#8c96a5',
+}
+
+// The caller's own houses (home status). Only their own — never anyone else's.
+function MyHouses() {
+  const { data } = useAsync(() => api.player.shard.houses(), [])
+  if (!data || data.length === 0) return null
+  return (
+    <section style={{ marginTop: 30 }}>
+      <div className="field-label" style={{ marginBottom: 12 }}>My houses</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {data.map((h) => {
+          const label = h.isIdoc ? 'IDOC' : (h.decay || h.stage)
+          const tone = h.isIdoc ? '#e05a5a' : (DECAY_TONE[label] || 'var(--muted)')
+          return (
+            <div key={h.serial} className="panel" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div className="display" style={{ fontSize: '1rem', color: 'var(--head)' }}>{h.name || 'An unnamed house'}</div>
+                <div className="sans dim" style={{ fontSize: '0.76rem', marginTop: 2 }}>
+                  {h.region || h.map || '—'}{h.x != null ? ` · ${h.x}, ${h.y}` : ''}
+                </div>
+              </div>
+              {label && (
+                <span className="sans" style={{ flex: 'none', fontSize: '0.68rem', color: tone, border: `1px solid ${tone}66`, borderRadius: 999, padding: '2px 9px' }}>
+                  {label}
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+      <p className="sans dim" style={{ margin: '10px 0 0', fontSize: '0.76rem' }}>
+        Keep an eye on the decay status — refresh a house in game before it reaches IDOC.
+      </p>
+    </section>
+  )
+}
+
+export default function PlayerCharacters() {
+  return (
+    <div>
+      <GameAccounts scope={api.player.shard} charTo={(serial) => `/player/char/${serial}`} />
+      <MyHouses />
+      <VendorSales fetchSales={api.player.shard.sales} />
+    </div>
+  )
+}

client/src/routes/player/PlayerLogin.jsx

@@ -0,0 +1,208 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
+import ProviderIcon from '../../components/ProviderIcon.jsx'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+import { api } from '../../api/client.js'
+import PlayerShell, { honeypotStyle } from './PlayerShell.jsx'
+
+// Friendly copy for the ?sso_error codes the SSO callback can bounce back with.
+const SSO_ERRORS = {
+  not_linked:
+    'That account is not linked to a player. Enable SSO sign-up, or sign in with a password and link it under your 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.',
+}
+
+export default function PlayerLogin() {
+  const { user, login, loginTotp, ssoLoginTotp } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const dest = location.state?.from?.pathname || '/player'
+  // A staff member who signs in here belongs in the admin shell, not the portal.
+  const destFor = (u) => (u && u.role !== 'player' ? '/admin' : dest)
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [company, setCompany] = useState('') // honeypot — must stay empty
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const [stage, setStage] = useState('creds') // 'creds' | 'totp'
+  const [challenge, setChallenge] = useState('')
+  const [code, setCode] = useState('')
+  const [ssoTotp, setSsoTotp] = useState(false)
+
+  const [providers, setProviders] = useState([])
+  const [canRegister, setCanRegister] = useState(false)
+  const ssoError = SSO_ERRORS[new URLSearchParams(location.search).get('sso_error')] || ''
+
+  // Already signed in → go straight to the right home for the role.
+  useEffect(() => {
+    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.
+  useEffect(() => {
+    if (new URLSearchParams(location.search).get('sso_totp')) {
+      setStage('totp')
+      setSsoTotp(true)
+    }
+  }, [location.search])
+
+  // SSO providers (for buttons) + whether password registration is open.
+  useEffect(() => {
+    let active = true
+    api
+      .authProviders()
+      .then((list) => active && setProviders(Array.isArray(list) ? list : []))
+      .catch(() => active && setProviders([]))
+    api
+      .publicSettings()
+      .then((s) => active && setCanRegister(Boolean(s?.registration?.password)))
+      .catch(() => {})
+    return () => {
+      active = false
+    }
+  }, [])
+
+  function startSso(provider) {
+    // Always return into the player portal so the callback lands on /account*.
+    const q = `?returnTo=${encodeURIComponent(dest.startsWith('/account') ? dest : '/account')}`
+    window.location.assign(provider.loginUrl + q)
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    setError('')
+    setBusy(true)
+    try {
+      const data = await login(username, password, { company })
+      if (data.totpRequired) {
+        setChallenge(data.challenge)
+        setStage('totp')
+        setBusy(false)
+        return
+      }
+      navigate(destFor(data.user), { replace: true })
+    } catch (err) {
+      if (err.status === 403) setError('This account is not active. Contact an administrator.')
+      else setError(err.status === 401 ? 'Incorrect username or password.' : 'Could not sign in right now.')
+      setBusy(false)
+    }
+  }
+
+  async function onSubmitTotp(e) {
+    e.preventDefault()
+    setError('')
+    setBusy(true)
+    try {
+      if (ssoTotp) {
+        const { returnTo } = await ssoLoginTotp(code)
+        navigate(returnTo || '/account', { replace: true })
+      } else {
+        const u = await loginTotp(challenge, code)
+        navigate(destFor(u), { 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.')
+      setBusy(false)
+      if (expired) {
+        setStage('creds')
+        setSsoTotp(false)
+      }
+    }
+  }
+
+  return (
+    <PlayerShell
+      subtitle="Player sign-in"
+      footer={
+        canRegister && (
+          <p className="sans" style={{ textAlign: 'center', margin: '16px 0 0', color: 'var(--dim)', fontSize: '0.84rem' }}>
+            New here?{' '}
+            <Link to="/account/register" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+              Create an account
+            </Link>
+          </p>
+        )
+      }
+    >
+      <form onSubmit={stage === 'totp' ? onSubmitTotp : onSubmit}>
+        {stage === 'creds' ? (
+          <>
+            <label style={{ display: 'block', marginBottom: 16 }}>
+              <span className="field-label">Username</span>
+              <input type="text" autoComplete="username" autoFocus value={username} onChange={(e) => setUsername(e.target.value)} className="input" />
+            </label>
+            <label style={{ display: 'block', marginBottom: 22 }}>
+              <span className="field-label">Password</span>
+              <input type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" />
+            </label>
+            <div style={honeypotStyle} aria-hidden="true">
+              <label>
+                Company
+                <input type="text" name="company" tabIndex={-1} autoComplete="off" value={company} onChange={(e) => setCompany(e.target.value)} />
+              </label>
+            </div>
+          </>
+        ) : (
+          <label style={{ display: 'block', marginBottom: 22 }}>
+            <span className="field-label">Authentication code</span>
+            <input type="text" inputMode="numeric" autoComplete="one-time-code" autoFocus placeholder="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.
+            </span>
+          </label>
+        )}
+
+        {(error || (stage === 'creds' && ssoError)) && (
+          <p className="sans" style={{ margin: '0 0 14px', color: '#d98b84', fontSize: '0.85rem', textAlign: 'center', lineHeight: 1.5 }}>
+            {error || ssoError}
+          </p>
+        )}
+
+        <button type="submit" disabled={busy} className="btn btn-primary" style={{ display: 'block', width: '100%', borderRadius: 8, padding: 12, textAlign: 'center' }}>
+          {busy ? 'Signing in…' : stage === 'totp' ? 'Verify' : 'Sign in'}
+        </button>
+
+        {stage === 'creds' && providers.length > 0 && (
+          <div style={{ marginTop: 20 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 16px', color: 'var(--dim)' }}>
+              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
+              <span className="sans" style={{ fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>or</span>
+              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {providers.map((p) => (
+                <button key={p.id} type="button" onClick={() => startSso(p)} className="btn" style={ssoBtnStyle}>
+                  <span style={{ display: 'inline-flex', width: 18, height: 18 }}>
+                    <ProviderIcon icon={p.icon} size={18} />
+                  </span>
+                  Continue with {p.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </form>
+    </PlayerShell>
+  )
+}
+
+const ssoBtnStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 10,
+  width: '100%',
+  borderRadius: 8,
+  padding: 11,
+  border: '1px solid var(--line)',
+  background: 'rgba(255,255,255,0.04)',
+  color: 'var(--ink)',
+}

client/src/routes/player/PlayerPortalLayout.jsx

@@ -0,0 +1,160 @@
+import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
+import MoonDot from '../../components/MoonDot.jsx'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+
+// Shared shell for the logged-in player portal. Uses the same sidebar shell as
+// Admin (icon nav, sticky content header, footer sign-out) so the two logged-in
+// experiences read as one app — the portal just carries fewer nav rows.
+
+// Small inline stroke icons (16px, currentColor) — same frame as AdminLayout.
+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 IconUser = () => <Icon><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></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 NAV = [
+  { to: '/player', label: 'Characters', end: true, icon: IconUser },
+  { to: '/account', label: 'Account', icon: IconGear },
+]
+
+// The sticky content header mirrors the active page. Character sheets live under
+// /player/char/:serial and keep their own in-page back link.
+const TITLES = {
+  '/player': 'Characters',
+  '/account': 'Account',
+}
+
+const navBtnBase = {
+  textAlign: 'left',
+  borderRadius: 8,
+  padding: '10px 14px',
+  fontFamily: 'var(--sans)',
+  fontSize: '0.92rem',
+  textDecoration: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  transition: 'background .15s,color .15s',
+}
+
+export default function PlayerPortalLayout() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const title =
+    TITLES[location.pathname] ||
+    (location.pathname.startsWith('/player/char/') ? 'Character' : 'Player Portal')
+
+  async function signOut() {
+    await logout()
+    navigate('/account/login', { replace: true })
+  }
+
+  return (
+    <div className="admin-grid">
+      {/* Sidebar */}
+      <aside
+        style={{
+          borderRight: '1px solid var(--line)',
+          background: 'var(--bg)',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+        }}
+      >
+        <div style={{ padding: '22px 22px 18px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 10 }}>
+          <MoonDot />
+          <div>
+            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
+              UOMysticmoon
+            </div>
+            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
+              Player Portal
+            </div>
+          </div>
+        </div>
+
+        <nav style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 4, overflowY: 'auto' }}>
+          {NAV.map((n) => (
+            <NavLink
+              key={n.to}
+              to={n.to}
+              end={n.end}
+              className="admin-nav-link"
+              style={({ isActive }) => ({
+                ...navBtnBase,
+                background: isActive ? 'var(--blue)' : 'transparent',
+                color: isActive ? 'var(--ink)' : 'var(--muted)',
+                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+              })}
+            >
+              <n.icon />
+              <span>{n.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+
+        <div style={{ padding: '14px 16px', borderTop: '1px solid var(--line-soft)' }}>
+          <div className="sans" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: '0.78rem', color: 'var(--muted)' }}>
+            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--mode-live)', boxShadow: '0 0 8px var(--mode-live)' }} />
+            Signed in as&nbsp;<strong style={{ color: 'var(--ink)' }}>{user?.username}</strong>
+          </div>
+          <button
+            onClick={signOut}
+            className="sans"
+            style={{ display: 'block', width: '100%', textAlign: 'center', border: '1px solid var(--line)', borderRadius: 8, padding: 9, color: 'var(--muted)', background: 'transparent', fontSize: '0.84rem', cursor: 'pointer' }}
+          >
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <header
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 16,
+            padding: '20px 32px',
+            borderBottom: '1px solid var(--line-soft)',
+            background: 'var(--bg)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <h1 className="display" style={{ margin: 0, fontSize: '1.5rem', color: 'var(--head)' }}>
+            {title}
+          </h1>
+          <a href="/" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.84rem', fontFamily: 'var(--sans)' }}>
+            ← Site
+          </a>
+        </header>
+
+        <div style={{ flex: 1, padding: '30px 32px 60px', maxWidth: 900, width: '100%' }}>
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  )
+}

client/src/routes/player/PlayerRegister.jsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import ProviderIcon from '../../components/ProviderIcon.jsx'
+import { useAuth } from '../../contexts/AuthContext.jsx'
+import { api } from '../../api/client.js'
+import PlayerShell, { honeypotStyle } from './PlayerShell.jsx'
+
+export default function PlayerRegister() {
+  const { user, register } = useAuth()
+  const navigate = useNavigate()
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [email, setEmail] = useState('')
+  const [company, setCompany] = useState('') // honeypot — must stay empty
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  // Which methods are enabled (derived, from /public/settings). null = loading.
+  const [avail, setAvail] = useState(null)
+  const [providers, setProviders] = useState([])
+
+  useEffect(() => {
+    if (user && user.role === 'player') navigate('/player', { replace: true })
+  }, [user, navigate])
+
+  useEffect(() => {
+    let active = true
+    api
+      .publicSettings()
+      .then((s) => active && setAvail(s?.registration || { password: false, sso: false }))
+      .catch(() => active && setAvail({ password: false, sso: false }))
+    api
+      .authProviders()
+      .then((list) => active && setProviders(Array.isArray(list) ? list : []))
+      .catch(() => active && setProviders([]))
+    return () => {
+      active = false
+    }
+  }, [])
+
+  function startSso(provider) {
+    window.location.assign(provider.loginUrl + `?returnTo=${encodeURIComponent('/account')}`)
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    setError('')
+    if (username.trim().length < 3) return setError('Username must be at least 3 characters.')
+    if (password.length < 8) return setError('Password must be at least 8 characters.')
+    setBusy(true)
+    try {
+      await register(username.trim(), password, { email: email.trim() || undefined, company })
+      navigate('/player', { replace: true })
+    } catch (err) {
+      if (err.status === 409) setError('That username is already taken.')
+      else if (err.status === 403) setError('Registration is not open right now.')
+      else if (err.status === 400) setError(err.message || 'Please check your details and try again.')
+      else setError('Could not create your account right now.')
+      setBusy(false)
+    }
+  }
+
+  const closed = avail && !avail.password && !avail.sso
+
+  return (
+    <PlayerShell
+      subtitle="Create a player account"
+      footer={
+        <p className="sans" style={{ textAlign: 'center', margin: '16px 0 0', color: 'var(--dim)', fontSize: '0.84rem' }}>
+          Already have an account?{' '}
+          <Link to="/account/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+            Sign in
+          </Link>
+        </p>
+      }
+    >
+      {avail === null ? (
+        <div style={{ display: 'grid', placeItems: 'center', padding: 20 }}>
+          <span className="spin" />
+        </div>
+      ) : closed ? (
+        <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.9rem', textAlign: 'center', lineHeight: 1.6 }}>
+          Self-registration is currently closed. Please check back later.
+        </p>
+      ) : (
+        <>
+          {avail.password && (
+            <form onSubmit={onSubmit}>
+              <label style={{ display: 'block', marginBottom: 16 }}>
+                <span className="field-label">Username</span>
+                <input type="text" autoComplete="username" autoFocus value={username} onChange={(e) => setUsername(e.target.value)} className="input" />
+              </label>
+              <label style={{ display: 'block', marginBottom: 16 }}>
+                <span className="field-label">Password</span>
+                <input type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" />
+              </label>
+              <label style={{ display: 'block', marginBottom: 22 }}>
+                <span className="field-label">Email (optional)</span>
+                <input type="email" autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} className="input" placeholder="player@example.com" />
+                <span className="sans" style={{ display: 'block', marginTop: 6, color: 'var(--dim)', fontSize: '0.74rem' }}>
+                  Used only for account recovery help. No password-reset emails yet — a forgotten password
+                  is reset by an administrator.
+                </span>
+              </label>
+              <div style={honeypotStyle} aria-hidden="true">
+                <label>
+                  Company
+                  <input type="text" name="company" tabIndex={-1} autoComplete="off" value={company} onChange={(e) => setCompany(e.target.value)} />
+                </label>
+              </div>
+
+              {error && (
+                <p className="sans" style={{ margin: '0 0 14px', color: '#d98b84', fontSize: '0.85rem', textAlign: 'center' }}>
+                  {error}
+                </p>
+              )}
+
+              <button type="submit" disabled={busy} className="btn btn-primary" style={{ display: 'block', width: '100%', borderRadius: 8, padding: 12, textAlign: 'center' }}>
+                {busy ? 'Creating…' : 'Create account'}
+              </button>
+            </form>
+          )}
+
+          {avail.sso && providers.length > 0 && (
+            <div style={{ marginTop: avail.password ? 20 : 0 }}>
+              {avail.password && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 16px', color: 'var(--dim)' }}>
+                  <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
+                  <span className="sans" style={{ fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>or</span>
+                  <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
+                </div>
+              )}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                {providers.map((p) => (
+                  <button key={p.id} type="button" onClick={() => startSso(p)} className="btn" style={ssoBtnStyle}>
+                    <span style={{ display: 'inline-flex', width: 18, height: 18 }}>
+                      <ProviderIcon icon={p.icon} size={18} />
+                    </span>
+                    Sign up with {p.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </PlayerShell>
+  )
+}
+
+const ssoBtnStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 10,
+  width: '100%',
+  borderRadius: 8,
+  padding: 11,
+  border: '1px solid var(--line)',
+  background: 'rgba(255,255,255,0.04)',
+  color: 'var(--ink)',
+}

client/src/routes/player/PlayerShell.jsx

@@ -0,0 +1,72 @@
+import { Link } from 'react-router-dom'
+import MoonDot from '../../components/MoonDot.jsx'
+
+const BG =
+  "linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('/assets/img/uomysticmoon-main-hero.png')"
+
+// Centered card layout shared by the player login / register pages. `subtitle`
+// labels the card; `footer` is optional content under the card (e.g. cross-links).
+export default function PlayerShell({ subtitle, children, footer }) {
+  return (
+    <main
+      style={{
+        minHeight: '100vh',
+        display: 'grid',
+        placeItems: 'center',
+        padding: '40px 18px',
+        overflow: 'hidden',
+        backgroundColor: 'var(--bg-deep)',
+        backgroundImage: BG,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: 400 }}>
+        <div style={{ textAlign: 'center', marginBottom: 26 }}>
+          <div style={{ marginBottom: 14 }}>
+            <MoonDot size={15} glow={0.55} />
+          </div>
+          <h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
+            UOMysticmoon
+          </h1>
+          <p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
+            {subtitle}
+          </p>
+        </div>
+
+        <div
+          style={{
+            border: '1px solid var(--line)',
+            borderRadius: 12,
+            padding: 28,
+            background: 'linear-gradient(180deg,rgba(25,34,49,0.92),rgba(20,26,33,0.92))',
+            backdropFilter: 'blur(6px)',
+            boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
+          }}
+        >
+          {children}
+        </div>
+
+        {footer}
+
+        <p style={{ textAlign: 'center', margin: '20px 0 0' }}>
+          <Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>
+            ← Back to site
+          </Link>
+        </p>
+      </div>
+    </main>
+  )
+}
+
+// Off-screen honeypot styling (matches the admin login): present for bots, never
+// seen or filled by real users. Name must equal the server HONEYPOT_FIELD.
+export const honeypotStyle = {
+  position: 'absolute',
+  left: '-9999px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  opacity: 0,
+  pointerEvents: 'none',
+}

client/src/routes/public/ChampSpawns.jsx

@@ -0,0 +1,203 @@
+import { useMemo } from 'react'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+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'
+
+// The champion-spawn board. Loaded once from /public/shard/champs, then kept live
+// by merging champ.update / champ.remove deltas from the public SSE feed. Three
+// families share the board, split by category into their own sections.
+const CHAMP_KINDS = new Set(['champ.update', 'champ.remove'])
+
+const SECTIONS = [
+  { id: 'champion', title: 'Champion altars', blurb: 'Felucca-style altar spawns.' },
+  { id: 'mini', title: 'Mini champs', blurb: 'TerMur controllers — they re-arm on their own.' },
+  { id: 'sea', title: 'Sea bosses', blurb: 'High Seas world bosses, alive only while summoned.' },
+]
+
+const STATUS_STYLE = {
+  active: { bg: 'rgba(95,185,138,0.16)', fg: '#8fdcae', border: 'rgba(95,185,138,0.45)', label: 'Active' },
+  cooldown: { bg: 'rgba(230,194,106,0.14)', fg: '#e6c26a', border: 'rgba(230,194,106,0.4)', label: 'Cooldown' },
+  dormant: { bg: 'rgba(140,150,165,0.14)', fg: '#aab3c0', border: 'rgba(140,150,165,0.35)', label: 'Dormant' },
+}
+
+// A short "in 4m" / "in 2h" for a future ISO timestamp (restartAt / expireAt).
+function until(iso) {
+  if (!iso) return ''
+  const ms = new Date(iso).getTime() - Date.now()
+  if (!Number.isFinite(ms)) return ''
+  if (ms <= 0) return 'due'
+  const mins = Math.round(ms / 60000)
+  if (mins < 60) return `in ${mins}m`
+  const hrs = Math.round(mins / 60)
+  return `in ${hrs}h`
+}
+
+function StatusBadge({ status }) {
+  const s = STATUS_STYLE[status] || STATUS_STYLE.dormant
+  return (
+    <span
+      className="sans"
+      style={{
+        flex: 'none',
+        fontSize: '0.68rem',
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+        padding: '3px 9px',
+        borderRadius: 999,
+        color: s.fg,
+        background: s.bg,
+        border: `1px solid ${s.border}`,
+      }}
+    >
+      {s.label}
+    </span>
+  )
+}
+
+// A slim progress bar (kills toward the next level, or a sea boss's hit points).
+function Meter({ value, max, tone = 'var(--accent)' }) {
+  if (!max) return null
+  const pct = Math.max(0, Math.min(100, (Number(value) / Number(max)) * 100))
+  return (
+    <div style={{ height: 6, borderRadius: 4, background: 'rgba(255,255,255,0.07)', overflow: 'hidden' }}>
+      <div style={{ width: `${pct}%`, height: '100%', background: tone, borderRadius: 4 }} />
+    </div>
+  )
+}
+
+// Category-specific middle line + meter for one spawn.
+function ChampDetail({ s }) {
+  const line = { display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: '0.8rem', color: 'var(--muted)', marginTop: 8 }
+  if (s.category === 'sea') {
+    return (
+      <>
+        <div className="sans" style={line}>
+          <span>{s.boss || s.type}</span>
+          {s.hitsMax != null && <span>{Number(s.hits).toLocaleString()} / {Number(s.hitsMax).toLocaleString()} hp</span>}
+        </div>
+        <div style={{ marginTop: 6 }}><Meter value={s.hits} max={s.hitsMax} tone="#d9736f" /></div>
+      </>
+    )
+  }
+  if (s.category === 'mini') {
+    return (
+      <div className="sans" style={line}>
+        <span>Level {s.level ?? 0}{s.maxLevel != null ? ` / ${s.maxLevel}` : ''}</span>
+        <span>{s.status === 'active' ? 'Running' : 'Re-arming'}</span>
+      </div>
+    )
+  }
+  // champion
+  return (
+    <>
+      <div className="sans" style={line}>
+        <span>
+          Level {s.level ?? 0}
+          {s.bossUp && s.boss ? ` — ${s.boss}` : ''}
+        </span>
+        <span>
+          {s.status === 'cooldown'
+            ? until(s.restartAt) || 'restarting'
+            : s.status === 'active'
+              ? `${Number(s.kills || 0).toLocaleString()} / ${Number(s.maxKills || 0).toLocaleString()} kills`
+              : ''}
+        </span>
+      </div>
+      {s.status === 'active' && (
+        <div style={{ marginTop: 6 }}><Meter value={s.kills} max={s.maxKills} /></div>
+      )}
+    </>
+  )
+}
+
+function ChampCard({ s }) {
+  return (
+    <div className="panel" style={{ padding: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+        <strong className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {s.name || s.type || 'Spawn'}
+        </strong>
+        <StatusBadge status={s.status} />
+      </div>
+      <ChampDetail s={s} />
+      <div className="sans dim" style={{ marginTop: 10, fontSize: '0.74rem' }}>
+        {s.map || '—'}{s.x != null ? ` (${s.x}, ${s.y})` : ''}
+      </div>
+    </div>
+  )
+}
+
+export default function ChampSpawns() {
+  const { loading, error, data } = useAsync(() => api.shard.champs())
+  const { events, connected } = useShardFeed({ filter: CHAMP_KINDS, max: 60 })
+
+  // Merge the initial snapshot with live deltas: seed a map by serial, then apply
+  // buffered events oldest → newest (the buffer is newest-first) so live wins.
+  const board = useMemo(() => {
+    const map = new Map()
+    for (const s of data || []) if (s && s.serial) map.set(s.serial, s)
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const ev = events[i]
+      if (!ev || !ev.serial) continue
+      if (ev.kind === 'champ.update') map.set(ev.serial, ev)
+      else if (ev.kind === 'champ.remove') map.delete(ev.serial)
+    }
+    return [...map.values()]
+  }, [data, events])
+
+  const byCategory = (id) =>
+    board.filter((s) => (s.category || 'champion') === id).sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+
+  const activeCount = board.filter((s) => s.status === 'active').length
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
+          <PageHeader eyebrow="Live" title="Champion spawns" lead="Every altar, mini-champ and sea boss across the shard, updating in real time." />
+          <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)', flex: 'none', marginTop: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+            {connected ? 'Live' : 'Offline'}
+          </span>
+        </div>
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the champion board right now." />}
+
+        {!loading && !error && (
+          <>
+            {board.length === 0 ? (
+              <section className="panel" style={{ padding: 24, textAlign: 'center' }}>
+                <p className="sans dim" style={{ margin: 0 }}>No champion spawns are being tracked right now.</p>
+              </section>
+            ) : (
+              <>
+                <p className="sans" style={{ color: 'var(--accent)', fontSize: '0.8rem', marginTop: -12, marginBottom: 24 }}>
+                  {activeCount} active · {board.length} tracked
+                </p>
+                {SECTIONS.map((sec) => {
+                  const rows = byCategory(sec.id)
+                  if (rows.length === 0) return null
+                  return (
+                    <section key={sec.id} style={{ marginBottom: 28 }}>
+                      <div style={{ marginBottom: 12 }}>
+                        <h2 className="display" style={{ margin: 0, fontSize: '1.1rem', color: 'var(--head)' }}>{sec.title}</h2>
+                        <p className="sans dim" style={{ margin: '2px 0 0', fontSize: '0.8rem' }}>{sec.blurb}</p>
+                      </div>
+                      <div className="grid-2" style={{ gap: 12 }}>
+                        {rows.map((s) => <ChampCard key={s.serial} s={s} />)}
+                      </div>
+                    </section>
+                  )
+                })}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/CmsPage.jsx

@@ -0,0 +1,56 @@
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+import '../../blocks/index.js' // registers all block types
+import { BlockList } from '../../blocks/BlockRenderer.jsx'
+
+// Renders a CMS page composed of blocks. Two modes:
+//   - live:    /:slug            → fetches the published page (staff see drafts)
+//   - preview: /preview/:id/:token → fetches the current state via a token,
+//              regardless of publish status (draft-preview links).
+export default function CmsPage({ preview = false }) {
+  const params = useParams()
+  const { loading, error, data: page } = useAsync(
+    () => (preview ? api.pagePreview(params.id, params.token) : api.page(params.slug)),
+    [preview, params.id, params.token, params.slug],
+  )
+
+  // Reflect the page's title + meta description while it's mounted, then restore.
+  useEffect(() => {
+    if (!page) return
+    const prevTitle = document.title
+    document.title = page.metadata?.seoTitle || page.title || prevTitle
+    return () => {
+      document.title = prevTitle
+    }
+  }, [page])
+
+  const layout = page?.settings?.layout || 'default'
+  const widthClass = layout === 'full_width' || layout === 'landing' ? 'shell-wide' : 'shell'
+
+  return (
+    <PublicLayout section="website">
+      <div className={`${widthClass} page-body`} style={{ paddingTop: 40 }}>
+        {preview && page && (
+          <div className="page-preview-banner sans">
+            Preview — this is the current draft state and isn’t publicly visible.
+          </div>
+        )}
+        {loading && <Loading />}
+        {error && (
+          <ErrorState
+            message={error.status === 404 ? 'That page could not be found.' : 'Could not load this page.'}
+          />
+        )}
+        {page && (
+          <article className={`page-blocks page-layout--${layout}`}>
+            <BlockList blocks={page.blocks} />
+          </article>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/Governors.jsx

@@ -0,0 +1,186 @@
+import { useMemo, useState } from 'react'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { useShardFeed } from '../../lib/useShardFeed.js'
+import { crestFor } from '../../data/cityCrests.js'
+import { api } from '../../api/client.js'
+
+// The town-governor board (City Loyalty). Loaded from /public/shard/governors,
+// kept live by merging city.update deltas by city. Empty on shards without the
+// City Loyalty system. Each city card links to its term history (look-back).
+const GOV_KINDS = new Set(['city.update'])
+
+const PHASE = {
+  none: null,
+  nominate: { label: 'Nominations open', color: '#7f8fd0' },
+  vote: { label: 'Voting', color: '#e6c26a' },
+  pending: { label: 'Result pending', color: '#c9a24b' },
+}
+
+// A short "in 3d" / "in 5h" for a future ISO timestamp (autoPickAt).
+function until(iso) {
+  if (!iso) return ''
+  const ms = new Date(iso).getTime() - Date.now()
+  if (!Number.isFinite(ms) || ms <= 0) return ''
+  const mins = Math.round(ms / 60000)
+  if (mins < 60) return `in ${mins}m`
+  const hrs = Math.round(mins / 60)
+  if (hrs < 24) return `in ${hrs}h`
+  return `in ${Math.round(hrs / 24)}d`
+}
+
+function fmtDate(ms) {
+  if (ms == null) return ''
+  return new Date(Number(ms)).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function CityCrest({ city, size = 44 }) {
+  const c = crestFor(city)
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        flex: 'none', width: size, height: size, borderRadius: '50%',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        fontSize: size * 0.5, background: 'rgba(255,255,255,0.04)',
+        border: `2px solid ${c.color}`, boxShadow: `0 0 10px ${c.color}22`,
+      }}
+    >
+      {c.sigil}
+    </span>
+  )
+}
+
+// Collapsible term history for one city, fetched on demand from the ledger.
+function TermHistory({ city }) {
+  const [open, setOpen] = useState(false)
+  const { loading, error, data } = useAsync(
+    () => (open ? api.shard.governorHistory(city, 25) : Promise.resolve(null)),
+    [open, city],
+  )
+  return (
+    <div style={{ marginTop: 12 }}>
+      <button
+        type="button"
+        className="sans"
+        onClick={() => setOpen((v) => !v)}
+        style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', padding: 0, fontSize: '0.76rem' }}
+      >
+        {open ? 'Hide past governors' : 'Past governors →'}
+      </button>
+      {open && (
+        <div style={{ marginTop: 8 }}>
+          {loading && <p className="sans dim" style={{ margin: 0, fontSize: '0.8rem' }}>Loading…</p>}
+          {error && <p className="sans dim" style={{ margin: 0, fontSize: '0.8rem' }}>Could not load history.</p>}
+          {data && data.length === 0 && (
+            <p className="sans dim" style={{ margin: 0, fontSize: '0.8rem' }}>No recorded terms yet.</p>
+          )}
+          {data && data.length > 0 && (
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 5 }}>
+              {data.map((t, i) => (
+                <li key={i} className="sans" style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: '0.8rem', color: 'var(--ink)' }}>
+                  <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {t.governor?.name || 'Vacant'}
+                  </span>
+                  <span className="dim" style={{ flex: 'none', fontSize: '0.72rem' }}>
+                    {fmtDate(t.startedAt)}{t.endedAt ? ` – ${fmtDate(t.endedAt)}` : ' – present'}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CityCard({ c }) {
+  const phase = PHASE[c.electionPhase] || null
+  const gov = c.governor
+  return (
+    <div className="panel" style={{ padding: 18 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        <CityCrest city={c.city} />
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <strong className="display" style={{ fontSize: '1.05rem', color: 'var(--head)' }}>
+              {crestFor(c.city).label || c.city}
+            </strong>
+            {phase && (
+              <span className="sans" style={{ flex: 'none', fontSize: '0.66rem', letterSpacing: '0.06em', textTransform: 'uppercase', color: phase.color, border: `1px solid ${phase.color}66`, borderRadius: 999, padding: '2px 8px' }}>
+                {phase.label}
+              </span>
+            )}
+          </div>
+          <div className="sans" style={{ marginTop: 3, fontSize: '0.9rem', color: gov ? 'var(--ink)' : 'var(--muted)' }}>
+            {gov ? (
+              <>Governor <strong style={{ color: 'var(--head)' }}>{gov.name}</strong></>
+            ) : (
+              'Seat vacant'
+            )}
+          </div>
+        </div>
+      </div>
+
+      {c.electionPhase && c.electionPhase !== 'none' && (
+        <div className="sans dim" style={{ marginTop: 10, fontSize: '0.78rem' }}>
+          {c.candidates ? `${c.candidates} candidate${c.candidates === 1 ? '' : 's'}` : 'No candidates yet'}
+          {c.autoPickAt && until(c.autoPickAt) ? ` · resolves ${until(c.autoPickAt)}` : ''}
+        </div>
+      )}
+
+      <TermHistory city={c.city} />
+    </div>
+  )
+}
+
+export default function Governors() {
+  const { loading, error, data } = useAsync(() => api.shard.governors())
+  const { events, connected } = useShardFeed({ filter: GOV_KINDS, max: 30 })
+
+  const board = useMemo(() => {
+    const map = new Map()
+    for (const c of data || []) if (c && c.city) map.set(c.city, c)
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const ev = events[i]
+      if (ev.kind === 'city.update' && ev.city) map.set(ev.city, ev)
+    }
+    return [...map.values()].sort((a, b) => (a.city || '').localeCompare(b.city || ''))
+  }, [data, events])
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
+          <PageHeader eyebrow="Live" title="Governors of Britannia" lead="Who rules each city, and where the next election stands." />
+          <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)', flex: 'none', marginTop: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+            {connected ? 'Live' : 'Offline'}
+          </span>
+        </div>
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the governor board right now." />}
+
+        {!loading && !error && (
+          <>
+            {board.length === 0 ? (
+              <section className="panel" style={{ padding: 24, textAlign: 'center' }}>
+                <p className="sans dim" style={{ margin: 0 }}>
+                  City Loyalty governance is not enabled on this shard.
+                </p>
+              </section>
+            ) : (
+              <div className="grid-2" style={{ gap: 12 }}>
+                {board.map((c) => <CityCard key={c.city} c={c} />)}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/Guilds.jsx

@@ -0,0 +1,169 @@
+import { useMemo, useState } from 'react'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+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'
+
+// The guild board. Loaded once from /public/shard/guilds, then kept live by
+// merging guild.update / guild.remove deltas; guild.join drives a small "recently
+// joined" strip on top of the board.
+const GUILD_KINDS = new Set(['guild.update', 'guild.remove', 'guild.join'])
+
+function Leader({ leader }) {
+  if (!leader || !leader.name) return <span className="dim">—</span>
+  return <span>{leader.name}</span>
+}
+
+function GuildRow({ g }) {
+  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: 'baseline', gap: 8, minWidth: 0 }}>
+          {g.abbr && (
+            <span
+              className="sans"
+              style={{
+                flex: 'none',
+                fontSize: '0.72rem',
+                letterSpacing: '0.06em',
+                color: 'var(--accent)',
+                border: '1px solid rgba(201,162,75,0.4)',
+                borderRadius: 5,
+                padding: '1px 6px',
+              }}
+            >
+              {g.abbr}
+            </span>
+          )}
+          <strong
+            className="display"
+            style={{ fontSize: '1rem', color: 'var(--head)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+          >
+            {g.name || 'A guild'}
+          </strong>
+        </div>
+        {g.alliance && (
+          <div className="sans dim" style={{ fontSize: '0.76rem', marginTop: 2 }}>
+            {g.alliance}
+          </div>
+        )}
+      </div>
+      <div className="sans" style={{ flex: 'none', textAlign: 'right', fontSize: '0.84rem', color: 'var(--ink)' }}>
+        <div>
+          <span style={{ color: '#7fd0a4' }}>{g.online ?? 0}</span>
+          <span className="dim"> / {g.members ?? 0}</span>
+        </div>
+        <div className="dim" style={{ fontSize: '0.72rem', marginTop: 2 }}>
+          <Leader leader={g.leader} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function Guilds() {
+  const { loading, error, data } = useAsync(() => api.shard.guilds())
+  const { events, connected } = useShardFeed({ filter: GUILD_KINDS, max: 60 })
+  const [q, setQ] = useState('')
+
+  // Merge snapshot + live deltas by guild id (apply oldest → newest so live wins).
+  const board = useMemo(() => {
+    const map = new Map()
+    for (const g of data || []) if (g && g.id != null) map.set(g.id, g)
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const ev = events[i]
+      if (ev.kind === 'guild.update' && ev.id != null) map.set(ev.id, ev)
+      else if (ev.kind === 'guild.remove' && ev.id != null) map.delete(ev.id)
+    }
+    return [...map.values()]
+  }, [data, events])
+
+  // Recent joins strip (newest first, deduped, capped).
+  const joins = useMemo(
+    () => events.filter((e) => e.kind === 'guild.join' && e.who).slice(0, 6),
+    [events],
+  )
+
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase()
+    const rows = needle
+      ? board.filter((g) =>
+          [g.name, g.abbr, g.alliance].some((v) => v && v.toLowerCase().includes(needle)),
+        )
+      : board
+    return [...rows].sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+  }, [board, q])
+
+  const totalMembers = board.reduce((n, g) => n + (Number(g.members) || 0), 0)
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
+          <PageHeader eyebrow="Live" title="Guilds" lead="Every guild on the shard — rosters, alliances and who's online, updating in real time." />
+          <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)', flex: 'none', marginTop: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+            {connected ? 'Live' : 'Offline'}
+          </span>
+        </div>
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the guild board right now." />}
+
+        {!loading && !error && (
+          <>
+            {board.length === 0 ? (
+              <section className="panel" style={{ padding: 24, textAlign: 'center' }}>
+                <p className="sans dim" style={{ margin: 0 }}>No guilds are being tracked right now.</p>
+              </section>
+            ) : (
+              <>
+                {joins.length > 0 && (
+                  <section className="panel" style={{ padding: '12px 16px', marginBottom: 18 }}>
+                    <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.66rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
+                      Recently joined
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                      {joins.map((j) => (
+                        <div key={j._id} className="sans" style={{ fontSize: '0.84rem', color: 'var(--ink)' }}>
+                          <strong style={{ color: 'var(--head)' }}>{j.who.name}</strong>
+                          <span className="dim"> joined </span>
+                          {j.abbr ? `[${j.abbr}] ` : ''}{j.name}
+                        </div>
+                      ))}
+                    </div>
+                  </section>
+                )}
+
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 14 }}>
+                  <p className="sans" style={{ color: 'var(--accent)', fontSize: '0.8rem', margin: 0 }}>
+                    {board.length} guilds · {totalMembers.toLocaleString()} members
+                  </p>
+                  <input
+                    className="input sans"
+                    value={q}
+                    onChange={(e) => setQ(e.target.value)}
+                    placeholder="Search guilds…"
+                    style={{ flex: 'none', width: 190, maxWidth: '50%', fontSize: '0.84rem' }}
+                  />
+                </div>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                  {filtered.map((g) => <GuildRow key={g.id} g={g} />)}
+                </div>
+                {filtered.length === 0 && (
+                  <p className="sans dim" style={{ textAlign: 'center', marginTop: 20 }}>No guilds match “{q}”.</p>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/Houses.jsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+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'
+
+// PUBLIC houses board: only houses in danger (IDOC), shown by location. Owner,
+// price, decay detail and the full registry are staff-only (admin Houses view).
+// Loaded from /public/shard/houses (IDOC-only), kept live by house.decay: a
+// house entering IDOC appears, one leaving it drops off.
+const HOUSE_KINDS = new Set(['house.decay'])
+
+function HouseRow({ h }) {
+  return (
+    <div className="panel" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
+      <span
+        aria-hidden="true"
+        style={{ flex: 'none', width: 8, height: 8, borderRadius: '50%', background: '#e05a5a', boxShadow: '0 0 8px rgba(224,90,90,0.7)' }}
+      />
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div className="display" style={{ fontSize: '1rem', color: 'var(--head)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {h.region || 'The wilderness'}
+        </div>
+        <div className="sans dim" style={{ fontSize: '0.76rem', marginTop: 2 }}>
+          {h.map || '—'}{h.x != null ? ` · ${h.x}, ${h.y}` : ''}
+        </div>
+      </div>
+      <span className="sans" style={{ flex: 'none', fontSize: '0.68rem', letterSpacing: '0.06em', color: '#e05a5a', border: '1px solid #e05a5a66', borderRadius: 999, padding: '2px 9px' }}>
+        IDOC
+      </span>
+    </div>
+  )
+}
+
+export default function Houses() {
+  const { loading, error, data } = useAsync(() => api.shard.houses())
+  const { events, connected } = useShardFeed({ filter: HOUSE_KINDS, max: 60 })
+
+  // Merge the IDOC snapshot with live house.decay deltas by serial: entering IDOC
+  // adds/updates the row; anything else (refreshed, collapsed) drops it.
+  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.kind !== 'house.decay' || !ev.serial) continue
+      if (String(ev.to).toUpperCase() === 'IDOC') {
+        map.set(ev.serial, { serial: ev.serial, name: ev.name, region: ev.region, map: ev.map, x: ev.x, y: ev.y, z: ev.z, isIdoc: true })
+      } else {
+        map.delete(ev.serial)
+      }
+    }
+    return [...map.values()].sort((a, b) => (a.region || '').localeCompare(b.region || ''))
+  }, [data, events])
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
+          <PageHeader eyebrow="Live" title="Houses in danger" lead="Homes that have fallen into IDOC — where to find them before they collapse." />
+          <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)', flex: 'none', marginTop: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+            {connected ? 'Live' : 'Offline'}
+          </span>
+        </div>
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the houses board right now." />}
+
+        {!loading && !error && (
+          board.length === 0 ? (
+            <section className="panel" style={{ padding: 24, textAlign: 'center' }}>
+              <p className="sans dim" style={{ margin: 0 }}>No houses are collapsing right now.</p>
+            </section>
+          ) : (
+            <>
+              <p className="sans" style={{ color: '#e0928a', fontSize: '0.8rem', marginTop: -12, marginBottom: 20 }}>
+                {board.length} in danger
+              </p>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                {board.map((h) => <HouseRow key={h.serial} h={h} />)}
+              </div>
+            </>
+          )
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/Shard.jsx

@@ -0,0 +1,227 @@
+import { Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { useShardFeed } from '../../lib/useShardFeed.js'
+import { describe } from '../../lib/shardEvents.js'
+import { ago } from '../../lib/format.js'
+import { api } from '../../api/client.js'
+import PlayersOnline from '../../components/PlayersOnline.jsx'
+
+// ── Gold-supply sparkline ───────────────────────────────────────────────────
+function Sparkline({ series }) {
+  if (!series || series.length < 2) return null
+  const w = 320
+  const h = 56
+  const golds = series.map((s) => Number(s.gold) || 0)
+  const min = Math.min(...golds)
+  const max = Math.max(...golds)
+  const span = max - min || 1
+  const pts = series
+    .map((s, i) => {
+      const x = (i / (series.length - 1)) * w
+      const y = h - ((Number(s.gold) || 0) - min) / span * h
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" aria-hidden="true">
+      <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+// ── Stat tile (matches Status.jsx) ──────────────────────────────────────────
+function Stat({ 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.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}>
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export default function Shard() {
+  const { loading, error, data } = useAsync(() =>
+    Promise.all([
+      api.shard.status(),
+      api.shard.idoc(),
+      api.shard.economy(60),
+      api.shard.online(),
+    ]).then(([status, idoc, economy, online]) => ({ status, idoc, economy, online })),
+  )
+  const { events, connected } = useShardFeed({ max: 30 })
+
+  const status = data?.status
+  const online = status?.pluginConnected
+  const gold = status?.economy?.gold
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <PageHeader eyebrow="Live" title="Shard" />
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load shard data right now." />}
+
+        {!loading && !error && data && (
+          <>
+            {/* Connection banner */}
+            <section
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 16,
+                padding: '24px 26px',
+                border: `1px solid ${online ? 'rgba(95,185,138,0.45)' : '#5a4a2a'}`,
+                borderRadius: 10,
+                background: online
+                  ? 'linear-gradient(180deg,rgba(22,46,34,0.5),rgba(16,26,20,0.4))'
+                  : 'linear-gradient(180deg,rgba(58,46,22,0.5),rgba(30,26,16,0.4))',
+                marginBottom: 24,
+              }}
+            >
+              <span
+                style={{
+                  flex: 'none',
+                  width: 12,
+                  height: 12,
+                  borderRadius: '50%',
+                  background: online ? 'var(--mode-live)' : 'var(--mode-maint)',
+                  boxShadow: `0 0 12px ${online ? 'rgba(95,185,138,0.7)' : 'rgba(230,194,106,0.7)'}`,
+                }}
+              />
+              <div>
+                <strong className="display" style={{ display: 'block', fontSize: '1.2rem', color: online ? '#bfe6cf' : '#f0e3c4' }}>
+                  {online ? 'The shard is online' : 'The shard is offline'}
+                </strong>
+                <span className="sans" style={{ color: online ? '#a9cdb8' : '#cdbf9a', fontSize: '0.98rem' }}>
+                  {online
+                    ? 'The gate to Britannia stands open.'
+                    : status?.enabled
+                      ? 'The link to the game world is down — checking back automatically.'
+                      : 'Live shard data is not configured yet.'}
+                </span>
+              </div>
+            </section>
+
+            {/* Stat tiles */}
+            <section className="grid-2" style={{ gap: 14, marginBottom: 24 }}>
+              <Stat value={gold != null ? `${Number(gold).toLocaleString()}` : '—'} label="Gold supply" />
+              <Stat value={online ? 'Up' : 'Down'} label="Shard link" />
+            </section>
+
+            {/* Live players-online breakdown (total + region buckets) */}
+            <div style={{ marginBottom: 24 }}>
+              <PlayersOnline />
+            </div>
+
+            {/* Staff online — linked staff accounts only, with location */}
+            <section className="panel" style={{ padding: 20, marginBottom: 24 }}>
+              <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>
+                Staff online
+              </div>
+              {(!data.online || data.online.length === 0) ? (
+                <p className="sans dim" style={{ margin: 0, fontSize: '0.88rem' }}>No staff are online right now.</p>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {data.online.map((p) => (
+                    <div key={p.serial} className="sans" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, fontSize: '0.9rem', color: 'var(--ink)' }}>
+                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                        <span style={{ flex: 'none', width: 8, height: 8, borderRadius: '50%', background: '#7fd0a4' }} />
+                        {p.name || p.serial}
+                      </span>
+                      <span className="dim" style={{ flex: 'none', fontSize: '0.78rem' }}>
+                        {p.map || '—'}{p.x != null ? ` (${p.x}, ${p.y})` : ''}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+
+            {/* Economy sparkline */}
+            {data.economy && data.economy.length > 1 && (
+              <section className="panel" style={{ padding: 20, marginBottom: 24 }}>
+                <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
+                  Gold supply over time
+                </div>
+                <Sparkline series={data.economy} />
+              </section>
+            )}
+
+            <div style={{ marginBottom: 24 }}>
+              {/* Latest IDOC */}
+              <FeedList
+                title="Houses in danger (IDOC)"
+                empty="No houses are collapsing right now."
+                items={data.idoc.map((h) => ({
+                  id: h.serial,
+                  text: `${h.name || 'A house'}${h.region ? ` — ${h.region}` : ''}`,
+                  when: h.updatedAt,
+                }))}
+              />
+            </div>
+
+            {/* Live ticker */}
+            <section className="panel" style={{ padding: 20 }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+                <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
+                  Live feed
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+                  <Link to="/site/shard/activity" className="sans" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.78rem' }}>
+                    View all activity →
+                  </Link>
+                  <span className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: '0.74rem', color: connected ? '#7fd0a4' : 'var(--muted)' }}>
+                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: connected ? '#7fd0a4' : 'var(--dim)' }} />
+                    {connected ? 'Live' : 'Offline'}
+                  </span>
+                </div>
+              </div>
+              {events.length === 0 ? (
+                <p className="sans dim" style={{ margin: 0, fontSize: '0.88rem' }}>
+                  Waiting for something to happen in the world…
+                </p>
+              ) : (
+                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {events.map((ev) => (
+                    <li key={ev._id} 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' }}>{describe(ev)}</span>
+                      <span className="dim" style={{ flex: 'none', fontSize: '0.78rem' }}>{ago(ev.t)}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          </>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}
+
+function FeedList({ title, items, empty }) {
+  return (
+    <section className="panel" style={{ padding: 20 }}>
+      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>
+        {title}
+      </div>
+      {items.length === 0 ? (
+        <p className="sans dim" style={{ margin: 0, fontSize: '0.88rem' }}>{empty}</p>
+      ) : (
+        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {items.map((it) => (
+            <li key={it.id} 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' }}>{it.text}</span>
+              <span className="dim" style={{ flex: 'none', fontSize: '0.78rem' }}>{ago(it.when)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

client/src/routes/public/ShardActivity.jsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { useShardFeed } from '../../lib/useShardFeed.js'
+import { describe, categoryOf, kindLabel, CATEGORIES } from '../../lib/shardEvents.js'
+import { ago } from '../../lib/format.js'
+import { api } from '../../api/client.js'
+
+// Public activity feed: the full shard event log, filterable by category, with a
+// live tail that prepends new events as they happen.
+export default function ShardActivity() {
+  const { loading, error, data } = useAsync(() => api.shard.feed({ limit: 150 }))
+  const { events: live } = useShardFeed({ max: 60 })
+  const [cat, setCat] = useState('all')
+
+  // Merge the live tail with the loaded history, de-duped by kind+t, newest first.
+  const merged = useMemo(() => {
+    const seen = new Set()
+    const out = []
+    for (const e of [...live, ...(data || [])]) {
+      const key = `${e.kind}-${e.t}`
+      if (seen.has(key)) continue
+      seen.add(key)
+      out.push(e)
+    }
+    return out.sort((a, b) => (b.t || 0) - (a.t || 0))
+  }, [live, data])
+
+  const filtered = cat === 'all' ? merged : merged.filter((e) => categoryOf(e.kind) === cat)
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-narrow page-body">
+        <PageHeader eyebrow="Live" title="Shard Activity" />
+        <p style={{ marginTop: -8, marginBottom: 18 }}>
+          <Link to="/site/shard" className="sans" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.86rem' }}>← Back to shard</Link>
+        </p>
+
+        {/* Category tabs */}
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
+          {CATEGORIES.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => setCat(c.id)}
+              className="pill"
+              style={cat === c.id ? { background: 'var(--accent)', color: 'var(--bg-deep)', borderColor: 'var(--accent)' } : undefined}
+            >
+              {c.label}
+            </button>
+          ))}
+        </div>
+
+        {loading && <Loading />}
+        {error && <ErrorState message="Could not load the activity feed right now." />}
+
+        {!loading && !error && (
+          filtered.length === 0 ? (
+            <div className="panel" style={{ padding: 22 }}>
+              <p className="sans dim" style={{ margin: 0, fontSize: '0.9rem' }}>Nothing here yet — events will appear as they happen in the world.</p>
+            </div>
+          ) : (
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {filtered.map((e) => (
+                <li key={e._id || `${e.kind}-${e.t}`} className="panel" style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
+                  <span className="sans" style={{ flex: 'none', fontSize: '0.62rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', minWidth: 92 }}>
+                    {kindLabel(e.kind)}
+                  </span>
+                  <span className="sans" style={{ flex: 1, minWidth: 0, color: 'var(--ink)', fontSize: '0.92rem' }}>{describe(e)}</span>
+                  <span className="sans dim" style={{ flex: 'none', fontSize: '0.76rem' }}>{ago(e.t)}</span>
+                </li>
+              ))}
+            </ul>
+          )
+        )}
+      </div>
+    </PublicLayout>
+  )
+}

client/src/styles/theme.css

@@ -79,6 +79,10 @@ a {
   width: min(760px, calc(100% - 32px));
   margin: 0 auto;
 }
+.shell-wide {
+  width: min(1280px, calc(100% - 32px));
+  margin: 0 auto;
+}
 .page {
   min-height: 100vh;
   display: flex;
@@ -542,6 +546,20 @@ button[disabled] {
 }
 
 /* ===== Hero canvas editor ===== */
+/* Rich-text hero line (e.g. the homepage teaser). Inherits the line's font/color
+   from its inline style; collapse the editor's outer block margins so spacing is
+   driven by the line's own marginTop rather than a nested <p>. */
+.hero-rich > :first-child {
+  margin-top: 0;
+}
+.hero-rich > :last-child {
+  margin-bottom: 0;
+}
+.hero-rich a {
+  color: inherit;
+  text-decoration: underline;
+}
+
 .hero-el-editable {
   outline: 1px dashed rgba(127, 153, 189, 0.45);
   outline-offset: 2px;
@@ -618,6 +636,11 @@ button[disabled] {
   color: #e0b070;
   border: 1px solid rgba(224, 176, 112, 0.4);
 }
+.badge-player {
+  background: rgba(126, 196, 156, 0.12);
+  color: #7ec49c;
+  border: 1px solid rgba(126, 196, 156, 0.4);
+}
 /* Action-type badges for the moderation dashboard. */
 .badge-ban {
   background: rgba(217, 139, 132, 0.16);
@@ -683,6 +706,47 @@ button[disabled] {
     grid-template-columns: 1fr;
   }
 }
+/* Admin sidebar — collapsible category sections */
+.admin-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+.admin-nav-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 14px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--dim);
+  font-size: 0.66rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.admin-nav-head:hover {
+  color: var(--muted);
+}
+.admin-nav-chev {
+  transition: transform 0.15s ease;
+  flex: 0 0 auto;
+}
+.admin-nav-items {
+  padding-left: 6px;
+}
+.admin-nav-link > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.admin-nav-link svg {
+  flex: 0 0 16px;
+}
 .wiki-grid {
   display: grid;
   grid-template-columns: 230px 1fr;
@@ -694,3 +758,265 @@ button[disabled] {
     grid-template-columns: 1fr;
   }
 }
+
+/* ===== CMS page builder — public block rendering ===== */
+/* Vertical rhythm between top-level blocks on a rendered page. */
+.page-blocks > * + * {
+  margin-top: 26px;
+}
+.page-heading {
+  font-family: var(--serif, Georgia, serif);
+  color: var(--ink);
+  line-height: 1.2;
+}
+.page-divider {
+  border: none;
+  border-top: 1px solid var(--line);
+  margin: 8px 0;
+}
+/* image block */
+.page-image {
+  margin: 0;
+}
+.page-image img {
+  max-width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  display: block;
+}
+.page-image figcaption {
+  margin-top: 8px;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.82rem;
+}
+.page-image--center {
+  text-align: center;
+}
+.page-image--center img,
+.page-image--center figcaption {
+  margin-left: auto;
+  margin-right: auto;
+}
+.page-image--right {
+  text-align: right;
+}
+.page-image--right img,
+.page-image--right figcaption {
+  margin-left: auto;
+}
+.page-image--full img {
+  width: 100%;
+}
+/* cta block */
+.page-cta-wrap {
+  display: flex;
+}
+.page-cta--secondary {
+  background: transparent;
+  color: var(--ink);
+}
+/* quote block */
+.page-quote {
+  margin: 0;
+  border-left: 3px solid var(--accent);
+  padding: 4px 0 4px 20px;
+}
+.page-quote blockquote {
+  margin: 0;
+  font-size: 1.15rem;
+  line-height: 1.5;
+  color: var(--ink);
+  font-style: italic;
+}
+.page-quote figcaption {
+  margin-top: 8px;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.85rem;
+}
+/* two-column block */
+.page-two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+.page-column > * + * {
+  margin-top: 18px;
+}
+@media (max-width: 720px) {
+  .page-two-column {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ===== CMS page builder — column sub-block editor ===== */
+.pb-two-column-editor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 720px) {
+  .pb-two-column-editor {
+    grid-template-columns: 1fr;
+  }
+}
+.pb-column-editor {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+  background: var(--panel-flat, transparent);
+}
+.pb-column-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.pb-add-select {
+  width: auto;
+  padding: 6px 10px;
+  font-size: 0.82rem;
+}
+.pb-subblock {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px;
+  margin-top: 10px;
+  background: var(--bg);
+}
+.pb-subblock-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.pb-subblock-actions {
+  display: flex;
+  gap: 4px;
+}
+.pb-mini {
+  min-width: 28px;
+  padding: 3px 8px;
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+/* ===== CMS page builder — admin canvas ===== */
+.pb-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  padding: 10px 0;
+  background: var(--bg);
+  border-bottom: 1px solid var(--line);
+}
+.pb-error {
+  border: 1px solid #6e3b38;
+  background: rgba(110, 59, 56, 0.16);
+  color: #e6a9a3;
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-top: 14px;
+  font-size: 0.86rem;
+}
+.pb-notice {
+  border: 1px solid var(--accent);
+  background: var(--blue);
+  color: var(--accent-bright);
+  border-radius: 8px;
+  padding: 8px 14px;
+  margin-top: 14px;
+  font-size: 0.86rem;
+}
+.pb-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 18px;
+}
+.pb-tab {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 0.9rem;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+.pb-tab.is-active {
+  color: var(--ink);
+  border-bottom-color: var(--accent);
+}
+.pb-palette {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border: 1px dashed var(--line);
+  border-radius: 10px;
+  margin-bottom: 16px;
+}
+.pb-canvas {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.pb-block-card {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel-flat, transparent);
+}
+.pb-block-card.is-dragging {
+  opacity: 0.5;
+}
+.pb-block-card.is-hidden {
+  opacity: 0.6;
+}
+.pb-block-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.pb-drag {
+  cursor: grab;
+  color: var(--muted);
+  user-select: none;
+}
+.pb-block-body {
+  padding: 14px;
+}
+.pb-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 720px;
+}
+.pb-danger {
+  border-color: #6e3b38;
+  color: #d98b84;
+}
+.pb-danger:hover:not([disabled]) {
+  background: rgba(110, 59, 56, 0.18);
+  border-color: #8a4b47;
+}
+
+/* Draft-preview banner on the public renderer. */
+.page-preview-banner {
+  border: 1px solid var(--accent);
+  background: var(--blue);
+  color: var(--accent-bright);
+  border-radius: 8px;
+  padding: 8px 14px;
+  margin-bottom: 20px;
+  font-size: 0.85rem;
+  text-align: center;
+}

docker-compose.dev.yml

@@ -0,0 +1,24 @@
+# Development overlay — build the app + bot images locally instead of pulling the
+# prebuilt ones from the Gitea registry.
+#
+# The base docker-compose.yml is production-shaped (image: only, no build:), so a
+# production host can never accidentally build — it only pulls. Use this overlay
+# EXPLICITLY for local work (it is not auto-loaded like docker-compose.override.yml
+# would be):
+#
+#   docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d --build
+#
+# Production stays:
+#
+#   docker compose pull && docker compose up -d
+#
+# The `image:` tags inherited from the base file double as the local build tags,
+# so a built image and a pulled one are interchangeable.
+services:
+  app:
+    build: .
+
+  bot:
+    build:
+      context: .
+      dockerfile: bot/Dockerfile

docker-compose.yml

@@ -21,7 +21,14 @@ services:
     #   - "3306:3306"
 
   app:
-    build: .
+    # Prebuilt image from the Gitea registry (published by
+    # .gitea/workflows/build-images.yml on every merge to main). This file is
+    # production-shaped — image only, NO build: — so a production host can only
+    # ever pull, never accidentally build. IMAGE_TAG defaults to `latest`; pin a
+    # specific build for a reproducible deploy / rollback, e.g.
+    # IMAGE_TAG=sha-042a151 (see .env / .env.example). To build locally instead,
+    # overlay docker-compose.dev.yml (see README).
+    image: gitea.whitlocktech.com/runicgateway/website-app:${IMAGE_TAG:-latest}
     restart: unless-stopped
     env_file: .env
     environment:
@@ -44,9 +51,9 @@ services:
       - "3000:3000"
 
   bot:
-    build:
+    # Same as app: prebuilt bot image, pulled in production. Build locally via
-      context: .
+    # docker-compose.dev.yml.
-      dockerfile: bot/Dockerfile
+    image: gitea.whitlocktech.com/runicgateway/website-bot:${IMAGE_TAG:-latest}
     restart: unless-stopped
     env_file: .env
     environment:

server/.env.example

@@ -70,11 +70,10 @@ TOTP_CHALLENGE_TTL=5m
 ADMIN_USERNAME=admin
 ADMIN_PASSWORD=change-me-admin-password
 
-SMTP_HOST=
+# Email is configured in Admin → Settings → Email (Gmail over OAuth2), not here.
-SMTP_PORT=587
+# It reuses the Google auth provider's OAuth client and stores an encrypted
-SMTP_USER=
+# refresh token in the DB. The contact recipient is the `contact_email` site
-SMTP_PASS=
+# setting; while email is unconfigured the contact form falls back to a mailto: link.
-CONTACT_TO=UOMysticmoon@gmail.com
 
 CLIENT_ORIGIN=http://localhost:5173
 
@@ -89,3 +88,11 @@ CLIENT_ORIGIN=http://localhost:5173
 # encrypted in the DB (see the bot_config table / SECRET_ENC_KEY above).
 BOT_INTERNAL_URL=http://localhost:4100
 BOT_INTERNAL_KEY=dev-only-change-me-bot-key
+
+# News announcement pipeline (published news post -> in-game town crier + Discord
+# #news). The dispatcher is an in-process poller; these tune it. Links in the
+# announcements use APP_BASE_URL (set above), so set that in production too.
+#   ANNOUNCE_POLL_MS       how often the dispatcher sweeps for due/retry legs
+#   TOWNCRIER_DURATION_SEC how long the in-game town-crier message stays up (<= 86400)
+ANNOUNCE_POLL_MS=15000
+TOWNCRIER_DURATION_SEC=3600

server/db/schema.sql

@@ -4,16 +4,34 @@
 
 CREATE TABLE IF NOT EXISTS users (
   id            INT AUTO_INCREMENT PRIMARY KEY,
-  username      VARCHAR(32)  NOT NULL UNIQUE,
+  -- COLLATE is pinned to a case-insensitive (_ci) collation so uniqueness and
-  password_hash VARCHAR(72)  NOT NULL,
+  -- findByUsername lookups both fold case identically ('Foo' == 'foo'). This is
-  role          ENUM('admin','editor','moderator') NOT NULL DEFAULT 'admin',
+  -- the atomic backstop for the username-uniqueness race (see the register /
+  -- change-username duplicate-key handling).
+  username      VARCHAR(32)  NOT NULL COLLATE utf8mb4_general_ci UNIQUE,
+  -- Nullable: SSO-provisioned players have no password until they choose to set
+  -- one. A NULL hash means password login is impossible for that account
+  -- (validatePassword returns false).
+  password_hash VARCHAR(72)  NULL,
+  role          ENUM('admin','editor','moderator','player') NOT NULL DEFAULT 'admin',
+  -- Optional contact email (players). Not unique — SSO emails may repeat. Used
+  -- only for display + a future self-serve reset. email_verified is wired now so
+  -- an eventual SMTP verification flow needs no schema change.
+  email         VARCHAR(255) NULL,
+  email_verified TINYINT(1)  NOT NULL DEFAULT 0,
+  -- Account lifecycle, independent of role: staff can disable/ban a player
+  -- without changing their role. active = normal; disabled = admin-locked;
+  -- banned = moderation ban; pending = reserved for future email-verify gating.
+  -- Enforced in requireAuth + login (non-active is rejected).
+  status        ENUM('active','pending','disabled','banned') NOT NULL DEFAULT 'active',
   totp_secret   VARCHAR(64)  NULL,          -- base32 TOTP secret (opt-in 2FA)
   totp_enabled  TINYINT(1)   NOT NULL DEFAULT 0,
   -- Any session token issued before this instant is rejected (see requireAuth).
   -- Bumped on password change / "log out everywhere". NULL = no cutoff yet.
   tokens_valid_after DATETIME NULL,
   created_at    DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-  last_login_at DATETIME NULL
+  last_login_at DATETIME NULL,
+  last_login_ip VARCHAR(45)  NULL           -- IPv6-capable, set on each login
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
 CREATE TABLE IF NOT EXISTS posts (
@@ -218,6 +236,306 @@ CREATE TABLE IF NOT EXISTS bot_config (
   CONSTRAINT chk_bot_config_singleton CHECK (id = 1)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
+-- Outbound email configuration (Gmail over OAuth2 / SMTP XOAUTH2). Singleton row
+-- (id = 1), mirroring bot_config: the DB only ever holds the AES-256-GCM-encrypted
+-- refresh token, never plaintext, and the client id/secret are NOT stored here —
+-- they are read live from the `google` auth_providers row. The refresh token is
+-- captured by the in-app "Connect Gmail" consent flow and is write-only over the
+-- admin API (never returned; responses expose only hasRefreshToken).
+CREATE TABLE IF NOT EXISTS email_config (
+  id                 INT PRIMARY KEY DEFAULT 1,
+  provider           VARCHAR(20)  NOT NULL DEFAULT 'gmail_oauth2',
+  enabled            TINYINT(1)   NOT NULL DEFAULT 0,
+  sender_email       VARCHAR(255) NULL,        -- connected Gmail address (from userinfo)
+  sender_name        VARCHAR(120) NULL,        -- optional From display name
+  refresh_token_enc  TEXT         NULL,        -- AES-256-GCM ciphertext, never exposed
+  status             VARCHAR(20)  NOT NULL DEFAULT 'unconfigured',
+  status_detail      VARCHAR(500) NULL,
+  last_verified_at   DATETIME     NULL,
+  updated_by         INT          NULL,
+  created_at         DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at         DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_email_config_user FOREIGN KEY (updated_by) REFERENCES users(id) ON DELETE SET NULL,
+  CONSTRAINT chk_email_config_singleton CHECK (id = 1)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- ── uo-link sidecar ────────────────────────────────────────────────────────
+-- Connection config for the uo-link sidecar (the HTTP + WebSocket bridge to the
+-- ServUO shard). Singleton row (id = 1), mirroring bot_config/email_config: the
+-- DB only ever holds the AES-256-GCM-encrypted shared-secret auth token, never
+-- plaintext, and it is only decrypted server-side (to call the sidecar). It is
+-- never returned to the admin UI — responses expose only `hasToken`. base_url is
+-- the REST endpoint, ws_url the live-feed endpoint; both are configurable because
+-- in production the sidecar runs on a different host from the website. `status`/
+-- `plugin_connected`/`last_event_at`/`boot_id` mirror the sidecar's last-known
+-- state for the admin panel between polls; `boot_id` tracks server.hello.bootId
+-- so a shard restart can be detected (and caches dropped).
+CREATE TABLE IF NOT EXISTS uo_link_config (
+  id                INT PRIMARY KEY DEFAULT 1,
+  base_url          VARCHAR(255) NULL,
+  ws_url            VARCHAR(255) NULL,
+  auth_token_enc    TEXT         NULL,
+  protocol          INT          NOT NULL DEFAULT 1,
+  enabled           TINYINT(1)   NOT NULL DEFAULT 0,
+  status            VARCHAR(20)  NOT NULL DEFAULT 'disconnected',
+  status_detail     VARCHAR(500) NULL,
+  plugin_connected  TINYINT(1)   NOT NULL DEFAULT 0,
+  last_event_at     DATETIME     NULL,
+  boot_id           VARCHAR(64)  NULL,
+  updated_by        INT          NULL,
+  created_at        DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at        DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_uo_link_config_user FOREIGN KEY (updated_by) REFERENCES users(id) ON DELETE SET NULL,
+  CONSTRAINT chk_uo_link_config_singleton CHECK (id = 1)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Append-only log of notable shard events ingested from the uo-link WebSocket
+-- feed. The site OWNS this data (it does not query the sidecar's SQLite): the WS
+-- client writes here, and the public/admin read endpoints + live feeds read from
+-- here. Only "notable" kinds are logged (sales, deaths, murders, mob.killed,
+-- IDOC transitions, quests, skill.gain, fame/karma, audit.*, cheat.*, link.*,
+-- server.*). High-frequency kinds (char.vitals, economy.supply) are NOT logged
+-- here — they update shard_online / shard_economy instead, keeping the log lean.
+-- dedupe_key = sha1(kind + t + stable-json(payload)); with the UNIQUE index it
+-- makes INSERT IGNORE idempotent so WS-reconnect backfill never double-inserts.
+CREATE TABLE IF NOT EXISTS shard_events (
+  id          BIGINT AUTO_INCREMENT PRIMARY KEY,
+  kind        VARCHAR(48)  NOT NULL,
+  t           BIGINT       NOT NULL,               -- event time, epoch ms (from the sidecar)
+  boot_id     VARCHAR(64)  NULL,                   -- shard boot id at ingest (server.hello.bootId)
+  payload     JSON         NOT NULL,               -- the full event object
+  dedupe_key  CHAR(40)     NOT NULL UNIQUE,
+  created_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  INDEX idx_shard_events_kind_t (kind, t),
+  INDEX idx_shard_events_t (t)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Current online players. Upserted on mob.login, refreshed on char.vitals, and
+-- removed on mob.logout. Cleared wholesale when the shard restarts (a new
+-- server.hello.bootId). web_id is the linked website user id (present when the
+-- account is linked), so the roster can be correlated to site accounts.
+CREATE TABLE IF NOT EXISTS shard_online (
+  serial      VARCHAR(20)  NOT NULL PRIMARY KEY,   -- mobile serial (opaque hex key)
+  name        VARCHAR(120) NULL,
+  acct        VARCHAR(120) NULL,
+  web_id      INT          NULL,
+  map         VARCHAR(40)  NULL,
+  x           INT          NULL,
+  y           INT          NULL,
+  z           INT          NULL,
+  hits        INT          NULL,
+  hits_max    INT          NULL,
+  mana        INT          NULL,
+  mana_max    INT          NULL,
+  stam        INT          NULL,
+  stam_max    INT          NULL,
+  str         INT          NULL,
+  dex         INT          NULL,
+  `int`       INT          NULL,
+  updated_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_shard_online_acct (acct)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Total-gold-supply time series (from the periodic economy.supply event). Kept
+-- append-only so the public status page can render a supply-over-time sparkline.
+CREATE TABLE IF NOT EXISTS shard_economy (
+  id          BIGINT AUTO_INCREMENT PRIMARY KEY,
+  accounts    INT          NULL,                   -- number of accounts included in the total
+  gold        BIGINT       NULL,                   -- total gold supply across all accounts
+  t           BIGINT       NOT NULL,               -- sample time, epoch ms
+  created_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  INDEX idx_shard_economy_t (t)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Current decay stage per house, upserted on house.decay. is_idoc is a derived
+-- flag (stage == 'IDOC') so the public "houses in danger" list is a cheap
+-- indexed lookup rather than a scan.
+CREATE TABLE IF NOT EXISTS shard_houses (
+  serial         VARCHAR(20)  NOT NULL PRIMARY KEY,
+  stage          VARCHAR(24)  NULL,                -- Somewhat | Fairly | Greatly | IDOC | Collapsed | ...
+  map            VARCHAR(40)  NULL,
+  x              INT          NULL,
+  y              INT          NULL,
+  z              INT          NULL,
+  region         VARCHAR(120) NULL,
+  name           VARCHAR(160) NULL,
+  owner_serial   VARCHAR(20)  NULL,
+  owner_acct     VARCHAR(120) NULL,
+  built_on       DATETIME     NULL,
+  last_refreshed DATETIME     NULL,
+  is_idoc        TINYINT(1)   NOT NULL DEFAULT 0,
+  updated_at     DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_shard_houses_idoc (is_idoc)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Site-side mirror of in-game-account → website-user links. The sidecar is the
+-- source of truth (it tags the game account with the websiteUserId on
+-- /link/confirm); this table mirrors it so the player portal can list a user's
+-- linked accounts and enforce ownership on roster/vendor reads without a shard
+-- round-trip. account is unique (one game account maps to at most one site user);
+-- a single user may link several game accounts.
+CREATE TABLE IF NOT EXISTS shard_account_links (
+  account    VARCHAR(120) NOT NULL PRIMARY KEY,
+  user_id    INT          NOT NULL,
+  char_name  VARCHAR(120) NULL,
+  linked_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_shard_links_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  INDEX idx_shard_links_user (user_id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Current champion-spawn board, upserted on champ.update and removed on
+-- champ.remove. Mirrors the sidecar's /champs projection into our own store so
+-- the public Champions page (and its live deltas) survive a shard outage, the
+-- same way shard_online / shard_houses do. Three families share one table, told
+-- apart by `category` (champion | mini | sea); category-specific fields (level,
+-- kills, boss, restartAt, hits, …) live in the JSON `payload` so the schema does
+-- not have to model every variant.
+CREATE TABLE IF NOT EXISTS shard_champs (
+  serial      VARCHAR(20)  NOT NULL PRIMARY KEY,   -- controller/mobile serial (opaque hex)
+  category    VARCHAR(16)  NULL,                   -- champion | mini | sea
+  type        VARCHAR(80)  NULL,
+  name        VARCHAR(120) NULL,
+  status      VARCHAR(16)  NULL,                   -- active | cooldown | dormant
+  active      TINYINT(1)   NOT NULL DEFAULT 0,
+  map         VARCHAR(40)  NULL,
+  x           INT          NULL,
+  y           INT          NULL,
+  z           INT          NULL,
+  boss_up     TINYINT(1)   NOT NULL DEFAULT 0,
+  payload     JSON         NOT NULL,               -- the full champ.update object
+  t           BIGINT       NULL,                   -- event time, epoch ms
+  updated_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_shard_champs_category (category)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Current open help-page (support ticket) queue, upserted on page.new/page.updated
+-- and removed on page.closed. Snapshotted authoritatively from the sidecar's
+-- GET /pages on every (re)connect. page_id is the sender's serial (one page per
+-- player). Staff-only data — served on the admin channel, never public.
+CREATE TABLE IF NOT EXISTS shard_pages (
+  page_id      VARCHAR(20)  NOT NULL PRIMARY KEY,  -- sender serial (one page per player)
+  type         VARCHAR(40)  NULL,                  -- Bug | Stuck | Account | Question | ...
+  sender_name  VARCHAR(120) NULL,
+  sender_acct  VARCHAR(120) NULL,
+  web_id       INT          NULL,                  -- linked website user id, if any
+  message      TEXT         NULL,
+  map          VARCHAR(40)  NULL,
+  x            INT          NULL,
+  y            INT          NULL,
+  z            INT          NULL,
+  sent_ms      BIGINT       NULL,                  -- when the page was opened, epoch ms
+  handled      TINYINT(1)   NOT NULL DEFAULT 0,    -- a staffer claimed it in game
+  handler      VARCHAR(120) NULL,
+  payload      JSON         NOT NULL,              -- the full page.new/updated object
+  updated_at   DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_shard_pages_handled (handled)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Guild roster board (Protocol 2.0). Upserted on guild.update (a full-state
+-- snapshot emitted only on change) and removed on guild.remove. The leader is an
+-- actor object flattened into leader_* columns; the full event is kept in
+-- `payload` for anything not hoisted. Mirrors the sidecar's GET /guilds
+-- projection into our store so the public Guilds page survives a shard outage.
+CREATE TABLE IF NOT EXISTS shard_guilds (
+  id            INT          NOT NULL PRIMARY KEY,   -- in-game guild id
+  name          VARCHAR(120) NULL,
+  abbr          VARCHAR(24)  NULL,
+  members       INT          NULL,
+  online        INT          NULL,
+  alliance      VARCHAR(120) NULL,
+  leader_serial VARCHAR(20)  NULL,
+  leader_name   VARCHAR(120) NULL,
+  leader_acct   VARCHAR(120) NULL,
+  leader_web_id INT          NULL,
+  payload       JSON         NOT NULL,               -- the full guild.update object
+  t             BIGINT       NULL,                   -- event time, epoch ms
+  updated_at    DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  INDEX idx_shard_guilds_name (name)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Town-governor board (Protocol 2.0, City Loyalty). One row per city, upserted on
+-- city.update (full-state, emitted only on change; there is no remove event since
+-- the set of cities is fixed). governor / governorElect are actor objects
+-- flattened into columns; the full event is kept in `payload`. Empty on shards
+-- that do not run the City Loyalty system.
+CREATE TABLE IF NOT EXISTS shard_governors (
+  city             VARCHAR(40)  NOT NULL PRIMARY KEY, -- Britain | Moonglow | ...
+  governor_serial  VARCHAR(20)  NULL,
+  governor_name    VARCHAR(120) NULL,
+  governor_acct    VARCHAR(120) NULL,
+  governor_web_id  INT          NULL,
+  elect_serial     VARCHAR(20)  NULL,
+  elect_name       VARCHAR(120) NULL,
+  elect_acct       VARCHAR(120) NULL,
+  election_phase   VARCHAR(16)  NULL,                 -- none | nominate | vote | pending
+  candidates       INT          NULL,
+  auto_pick_at     DATETIME     NULL,
+  payload          JSON         NOT NULL,             -- the full city.update object
+  t                BIGINT       NULL,                 -- event time, epoch ms
+  updated_at       DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Governor term history — the "who governed when" ledger behind the Governors
+-- board. Captured from day one (history cannot be backfilled) on every observed
+-- governor CHANGE: the open term (ended_at IS NULL) is closed and a new one
+-- opened. `votes` stays NULL — the city.update feed exposes only the candidate
+-- COUNT and election phase, not per-candidate tallies, so we record who governed
+-- and when (reliable) and never fabricate vote numbers. The look-back UI ("who
+-- were all the governors of Britain?") reads this table.
+CREATE TABLE IF NOT EXISTS shard_governor_terms (
+  id               BIGINT AUTO_INCREMENT PRIMARY KEY,
+  city             VARCHAR(40)  NOT NULL,
+  governor_serial  VARCHAR(20)  NULL,
+  governor_name    VARCHAR(120) NULL,
+  governor_acct    VARCHAR(120) NULL,
+  governor_web_id  INT          NULL,
+  started_at       BIGINT       NOT NULL,             -- term start, epoch ms
+  ended_at         BIGINT       NULL,                 -- term end epoch ms (NULL = current)
+  votes            INT          NULL,                 -- not in the feed (reserved)
+  created_at       DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  INDEX idx_shard_gov_terms_city (city, started_at),
+  INDEX idx_shard_gov_terms_open (city, ended_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Online-population snapshot (Protocol 2.0). Singleton row (id = 1) holding the
+-- latest presence.online aggregate: total count plus per-facet and per-region
+-- breakdown maps (stored as JSON). Distinct from shard_online (per-player) — this
+-- is the rolled-up headcount the public "Players Online" widget renders. The
+-- time series, if ever needed, is available from GET /history?kind=presence.online.
+CREATE TABLE IF NOT EXISTS shard_presence (
+  id          INT PRIMARY KEY DEFAULT 1,
+  count       INT          NOT NULL DEFAULT 0,
+  by_facet    JSON         NULL,                      -- { "Felucca": 12, "Trammel": 30 }
+  by_region   JSON         NULL,                      -- { "Britain": 18, "Wilderness": 9 }
+  t           BIGINT       NULL,                      -- snapshot time, epoch ms
+  updated_at  DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT chk_shard_presence_singleton CHECK (id = 1)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Admin email invites (Protocol 2.0 provisioning). A staff member invites someone
+-- by email at a pre-chosen access level; the invitee accepts via a tokened link,
+-- which creates their website user at that role (and optionally a linked game
+-- account). Only the sha256 hash of the opaque token is stored — a DB read never
+-- yields a usable invite link, same as mobile_refresh_tokens. status tracks the
+-- lifecycle; accepted_user_id back-points at the created user. Single-use +
+-- expiring (enforced in the model on top of expires_at).
+CREATE TABLE IF NOT EXISTS user_invites (
+  id                INT AUTO_INCREMENT PRIMARY KEY,
+  token_hash        CHAR(64)     NOT NULL UNIQUE,     -- sha256 hex of the opaque token
+  email             VARCHAR(255) NOT NULL,
+  role              ENUM('admin','editor','moderator','player') NOT NULL DEFAULT 'player',
+  status            ENUM('pending','accepted','revoked') NOT NULL DEFAULT 'pending',
+  invited_by        INT          NULL,                -- staff user who sent it
+  accepted_user_id  INT          NULL,                -- the user created on accept
+  expires_at        DATETIME     NOT NULL,
+  created_at        DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  accepted_at       DATETIME     NULL,
+  CONSTRAINT fk_user_invites_inviter FOREIGN KEY (invited_by) REFERENCES users(id) ON DELETE SET NULL,
+  CONSTRAINT fk_user_invites_user FOREIGN KEY (accepted_user_id) REFERENCES users(id) ON DELETE SET NULL,
+  INDEX idx_user_invites_email (email),
+  INDEX idx_user_invites_status (status, expires_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
 -- Discord bot moderation core (Phase 2). These tables are owned by the bot
 -- process (its own DB pool, bot/src/db.js) — the main server never reads or
 -- writes them. They live in the same physical database as everything else
@@ -445,6 +763,74 @@ CREATE TABLE IF NOT EXISTS mod_notes (
   INDEX idx_mod_notes_user (discord_user_id, created_at)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
+-- Generic CMS pages composed from a fixed palette of blocks (the page builder).
+-- `blocks` is a JSON array of block-envelope objects ({ id, type, version,
+-- visible, props }); it is stored as text and parsed/validated in app code
+-- against the block registry (server/src/blocks) on every save — the same
+-- pattern role_menus.mapping uses, since MariaDB's JSON type is just LONGTEXT and
+-- the driver hands it back as a string anyway. The seo_*/og_image/canonical_url/
+-- robots and layout/nav_* columns are metadata/settings surfaced grouped in the
+-- API response; several have no consumer yet but are cheap to add now and painful
+-- to retrofit once real pages exist. published_at mirrors posts: stamped the first
+-- time a page goes to 'published'.
+CREATE TABLE IF NOT EXISTS pages (
+  id               INT AUTO_INCREMENT PRIMARY KEY,
+  slug             VARCHAR(160) NOT NULL UNIQUE,
+  title            VARCHAR(200) NOT NULL,
+  blocks           MEDIUMTEXT   NOT NULL,      -- JSON array of block objects
+  status           ENUM('draft','published') NOT NULL DEFAULT 'draft',
+  protected        TINYINT(1)   NOT NULL DEFAULT 0,
+  author_id        INT          NULL,
+  -- SEO / social metadata (grouped under `metadata` in the API response).
+  seo_title        VARCHAR(200) NULL,
+  meta_description VARCHAR(400) NULL,
+  og_image         VARCHAR(500) NULL,
+  canonical_url    VARCHAR(500) NULL,
+  robots           VARCHAR(100) NULL,
+  -- Presentation / navigation (grouped under `settings` in the API response).
+  layout           ENUM('default','full_width','landing') NOT NULL DEFAULT 'default',
+  show_in_nav      TINYINT(1)   NOT NULL DEFAULT 0,
+  nav_group        ENUM('main','footer','account','hidden') NULL,
+  nav_order        INT          NULL,
+  created_at       DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at       DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  published_at     DATETIME NULL,
+  CONSTRAINT fk_pages_author FOREIGN KEY (author_id) REFERENCES users(id) ON DELETE SET NULL,
+  INDEX idx_pages_status (status),
+  INDEX idx_pages_nav (show_in_nav, nav_group, nav_order)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+-- Announcement pipeline. One row per publish event of a news post; the table
+-- doubles as the job queue (a light in-process poller — utils/announceWorker.js
+-- — sweeps it for due legs). Two INDEPENDENT delivery legs so a Discord outage
+-- never blocks or retries the in-game town-crier leg and vice versa. `status` is
+-- a derived rollup of the two legs (see announceJobs.logic.js): done when both
+-- legs done, failed when both exhausted, partial in between. Each leg tracks its
+-- own attempt count, last error, and next-due time for exponential backoff.
+-- post_id is INT (matches posts.id) and cascades so deleting a post reaps its
+-- jobs. posts.announce_job_id points back at the latest row for admin lookups.
+CREATE TABLE IF NOT EXISTS announce_jobs (
+  id                        INT AUTO_INCREMENT PRIMARY KEY,
+  post_id                   INT NOT NULL,
+  status                    ENUM('pending','partial','done','failed') NOT NULL DEFAULT 'pending',
+
+  towncrier_status          ENUM('pending','done','failed') NOT NULL DEFAULT 'pending',
+  towncrier_attempts        SMALLINT NOT NULL DEFAULT 0,
+  towncrier_last_error      TEXT NULL,
+  towncrier_next_attempt_at DATETIME NULL,
+
+  discord_status            ENUM('pending','done','failed') NOT NULL DEFAULT 'pending',
+  discord_attempts          SMALLINT NOT NULL DEFAULT 0,
+  discord_last_error        TEXT NULL,
+  discord_next_attempt_at   DATETIME NULL,
+
+  created_at                DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at                DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  CONSTRAINT fk_announce_jobs_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  INDEX idx_announce_due (towncrier_status, towncrier_next_attempt_at),
+  INDEX idx_announce_due_discord (discord_status, discord_next_attempt_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
 -- Migrations for databases created before the wiki upgrade. Each statement uses
 -- IF NOT EXISTS so re-running on every boot is a harmless no-op. New installs get
 -- these columns from the CREATE TABLE above; existing installs get them here.
@@ -458,7 +844,26 @@ ALTER TABLE users ADD COLUMN IF NOT EXISTS tokens_valid_after DATETIME NULL;
 -- Moderation dashboard (Phase 6): add the 'moderator' role to databases created
 -- before it. MODIFY has no IF NOT EXISTS form, but re-declaring the same ENUM is
 -- an idempotent no-op, so it is safe to run on every boot.
-ALTER TABLE users MODIFY COLUMN role ENUM('admin','editor','moderator') NOT NULL DEFAULT 'admin';
+-- Player accounts: widen the enum again to include 'player' (self-service public
+-- accounts). Same idempotent-MODIFY pattern.
+ALTER TABLE users MODIFY COLUMN role ENUM('admin','editor','moderator','player') NOT NULL DEFAULT 'admin';
+-- Player accounts: make password_hash nullable (SSO-only players), pin the
+-- username collation (case-insensitive uniqueness backstop), and add the player
+-- columns to databases created before this. MODIFY is an idempotent no-op when
+-- the column already matches; ADD COLUMN IF NOT EXISTS is safe to re-run.
+ALTER TABLE users MODIFY COLUMN password_hash VARCHAR(72) NULL;
+ALTER TABLE users MODIFY COLUMN username VARCHAR(32) NOT NULL COLLATE utf8mb4_general_ci;
+ALTER TABLE users ADD COLUMN IF NOT EXISTS email VARCHAR(255) NULL;
+ALTER TABLE users ADD COLUMN IF NOT EXISTS email_verified TINYINT(1) NOT NULL DEFAULT 0;
+ALTER TABLE users ADD COLUMN IF NOT EXISTS status ENUM('active','pending','disabled','banned') NOT NULL DEFAULT 'active';
+ALTER TABLE users ADD COLUMN IF NOT EXISTS last_login_ip VARCHAR(45) NULL;
+-- Player self-registration mode: disabled | password | sso | both. Default off,
+-- so the system behaves exactly as today until an admin opts in.
+INSERT IGNORE INTO settings (`key`, value) VALUES ('player_registration', 'disabled');
+-- Game-account signup (Protocol 2.0 hybrid mode): whether a signed-in website user
+-- may provision a linked game account from the site. Default off; the shard's own
+-- signup mode still has the final say (a 'game'-mode shard refuses regardless).
+INSERT IGNORE INTO settings (`key`, value) VALUES ('game_account_signup', 'disabled');
 
 ALTER TABLE wiki_pages ADD COLUMN IF NOT EXISTS excerpt VARCHAR(400) NULL;
 ALTER TABLE wiki_pages ADD COLUMN IF NOT EXISTS category_id INT NULL;
@@ -466,3 +871,30 @@ ALTER TABLE wiki_pages ADD COLUMN IF NOT EXISTS published TINYINT(1) NOT NULL DE
 ALTER TABLE wiki_pages ADD COLUMN IF NOT EXISTS sort_order INT NOT NULL DEFAULT 0;
 ALTER TABLE wiki_pages ADD COLUMN IF NOT EXISTS published_at DATETIME NULL;
 ALTER TABLE wiki_pages ADD FULLTEXT INDEX IF NOT EXISTS idx_wiki_search (title, body);
+
+-- News → town-crier + Discord announcement pipeline. Add the announcement-state
+-- columns to posts on databases created before the pipeline landed. announced_at
+-- is stamped once both legs deliver; announce_job_id points at the announce_jobs
+-- row for the post's admin status panel. Kept as a plain column (not a hard FK)
+-- so the idempotent boot migration never trips over a re-added constraint — the
+-- pointer is resolved in application code and the CASCADE on announce_jobs.post_id
+-- already keeps the two tables consistent.
+ALTER TABLE posts ADD COLUMN IF NOT EXISTS announced_at DATETIME NULL;
+ALTER TABLE posts ADD COLUMN IF NOT EXISTS announce_job_id INT NULL;
+
+-- House registry (Protocol 2.0). The house.update full-state feed carries richer
+-- fields than the house.decay transition feed shard_houses was built for. Rather
+-- than a second table for one entity, extend shard_houses: house.update writes the
+-- registry columns below (owner display name, co-owner/friend counts, placement
+-- price, decay level name) while house.decay keeps owning `stage`/`is_idoc`. Each
+-- upsert only touches its own columns, so the two feeds never clobber each other.
+-- `price` is the placement value, NOT a "for sale" flag (stock ServUO has none).
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS owner_name VARCHAR(120) NULL;
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS co_owners INT NULL;
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS friends INT NULL;
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS price BIGINT NULL;
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS decay VARCHAR(24) NULL;
+-- Distinguishes a full registry row (seen via house.update) from a decay-only row,
+-- so the public Houses browser can list registered houses without pulling in rows
+-- we only ever saw an IDOC transition for.
+ALTER TABLE shard_houses ADD COLUMN IF NOT EXISTS in_registry TINYINT(1) NOT NULL DEFAULT 0;

server/package-lock.json

@@ -26,7 +26,8 @@
         "qrcode": "^1.5.4",
         "sanitize-html": "^2.17.5",
         "speakeasy": "^2.0.0",
-        "swagger-ui-express": "^5.0.1"
+        "swagger-ui-express": "^5.0.1",
+        "ws": "^8.21.0"
       },
       "devDependencies": {
         "nodemon": "^3.1.4",
@@ -2386,6 +2387,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",

server/package.json

@@ -36,7 +36,8 @@
     "qrcode": "^1.5.4",
     "sanitize-html": "^2.17.5",
     "speakeasy": "^2.0.0",
-    "swagger-ui-express": "^5.0.1"
+    "swagger-ui-express": "^5.0.1",
+    "ws": "^8.21.0"
   },
   "devDependencies": {
     "nodemon": "^3.1.4",

server/src/auth/session.middleware.js

@@ -51,6 +51,13 @@ async function requireAuth(req, res, next) {
     const user = await users.getById(session.userId)
     if (!user) return res.status(401).json({ message: 'Unauthorized' }) // deleted since token issued
 
+    // Status gate, enforced on every request (same immediacy as the cutoff
+    // below): a player disabled/banned by staff loses access on their very next
+    // request, not when their JWT eventually expires.
+    if (user.status && user.status !== 'active') {
+      return res.status(403).json({ message: 'Account disabled' })
+    }
+
     // Revocation, enforced here (not in stateless token verification):
     //   1. per-user cutoff — password change / "log out everywhere" bumps
     //      tokens_valid_after; any token issued before it is dead.

server/src/auth/token.js

@@ -66,6 +66,20 @@ function verifyTotpChallenge(token) {
   return decoded
 }
 
+// Short-lived, unguessable link token for previewing a (possibly unpublished)
+// CMS page. Carries purpose:'page_preview' + the page id and nothing else; it is
+// NOT a session (session validation rejects it) and only grants read of that one
+// page's current block state. Default 1h expiry per the page-builder spec.
+function signPagePreview(pageId, { expiresIn = '1h' } = {}) {
+  return jwt.sign({ pageId, purpose: 'page_preview' }, JWT_SECRET, { expiresIn })
+}
+
+function verifyPagePreview(token) {
+  const decoded = verifyToken(token)
+  if (!decoded || decoded.purpose !== 'page_preview') return null
+  return decoded
+}
+
 // Rough max-age (ms) for the cookie, parsed from JWT_EXPIRES_IN (e.g. 1d, 12h, 30m).
 function cookieMaxAge() {
   const m = /^(\d+)([dhms])$/.exec(String(JWT_EXPIRES_IN).trim())
@@ -122,6 +136,8 @@ module.exports = {
   verifyToken,
   signTotpChallenge,
   verifyTotpChallenge,
+  signPagePreview,
+  verifyPagePreview,
   cookieMaxAge,
   cookieSecure,
   cookieOptions,

server/src/auth/usernamePolicy.js

@@ -0,0 +1,111 @@
+// ── Username policy ────────────────────────────────────────────────────────
+//
+// Pure helpers shared by public registration and SSO auto-provisioning:
+//   - a reserved-name blocklist (staff-impersonating / system names),
+//   - normalization (trim; case is preserved for display, uniqueness folds case
+//     at the DB via the column's _ci collation), and
+//   - deriving a valid username from an external SSO profile.
+//
+// No I/O — the DB UNIQUE index is the source of truth for collisions; these
+// helpers only shape/validate candidate names and pick suffixes to retry with.
+
+// Allowed characters in a stored username: letters, digits, dot, underscore,
+// dash. Length 3–32 (matches the register validator + the column width).
+const USERNAME_RE = /^[A-Za-z0-9_.-]{3,32}$/
+const MIN_LEN = 3
+const MAX_LEN = 32
+
+// Names that must never belong to a self-registered account because they imply
+// staff/system authority or are otherwise confusing. Compared case-insensitively.
+const RESERVED_USERNAMES = new Set([
+  'admin',
+  'administrator',
+  'root',
+  'system',
+  'staff',
+  'mod',
+  'moderator',
+  'owner',
+  'support',
+  'help',
+  'null',
+  'undefined',
+  'me',
+  'anonymous',
+  'everyone',
+  'here',
+])
+
+// Trim surrounding whitespace. Case is preserved (stored as entered); the DB's
+// _ci collation folds case for uniqueness + lookup.
+function normalizeUsername(raw) {
+  return typeof raw === 'string' ? raw.trim() : ''
+}
+
+function isReserved(name) {
+  return RESERVED_USERNAMES.has(String(name || '').trim().toLowerCase())
+}
+
+function isValidFormat(name) {
+  return USERNAME_RE.test(name)
+}
+
+// Validate a user-chosen username for registration. Returns { ok, message }.
+function validateUsername(raw) {
+  const name = normalizeUsername(raw)
+  if (!isValidFormat(name)) {
+    return { ok: false, message: 'Username must be 3–32 characters (letters, numbers, . _ -).' }
+  }
+  if (isReserved(name)) {
+    return { ok: false, message: 'That username is not available.' }
+  }
+  return { ok: true, name }
+}
+
+// Reduce an arbitrary string to the allowed charset, clamped to MAX_LEN. Used as
+// the base for SSO-derived usernames before uniqueness suffixing.
+function sanitizeToUsername(raw) {
+  let s = String(raw || '')
+    .normalize('NFKD')
+    .replace(/[^A-Za-z0-9_.-]/g, '')
+    .replace(/^[._-]+/, '') // don't start with punctuation
+    .slice(0, MAX_LEN)
+  return s
+}
+
+// Derive a base username from a normalized SSO profile ({ name, email, subject }).
+// Tries display name, then the email local-part, then a generic 'player' base.
+// The result is always a valid *base* (>= MIN_LEN, sanitized) but is NOT
+// guaranteed unique — the caller suffixes + retries against the UNIQUE index.
+function deriveUsernameBase(profile) {
+  const candidates = [profile && profile.name, profile && (profile.email || '').split('@')[0]]
+  for (const c of candidates) {
+    const s = sanitizeToUsername(c)
+    if (s.length >= MIN_LEN && !isReserved(s)) return s
+  }
+  return 'player'
+}
+
+// Build the Nth candidate username for the dedup retry loop: attempt 0 is the
+// bare base (padded if short), later attempts append an increasing numeric
+// suffix, always clamped to MAX_LEN so the suffix survives truncation.
+function candidateUsername(base, attempt) {
+  const safeBase = base.length >= MIN_LEN ? base : `${base}player`.slice(0, MAX_LEN)
+  if (attempt === 0) return safeBase
+  const suffix = String(attempt + 1) // 2, 3, 4, …
+  return `${safeBase.slice(0, MAX_LEN - suffix.length)}${suffix}`
+}
+
+module.exports = {
+  USERNAME_RE,
+  MIN_LEN,
+  MAX_LEN,
+  RESERVED_USERNAMES,
+  normalizeUsername,
+  isReserved,
+  isValidFormat,
+  validateUsername,
+  sanitizeToUsername,
+  deriveUsernameBase,
+  candidateUsername,
+}

server/src/blocks/index.js

@@ -0,0 +1,30 @@
+// Block registry entrypoint. Requiring this module registers every server-side
+// block definition (schema + cache policy) exactly once, then re-exports the
+// registry API and the blocks validator. Anything that needs to validate a
+// page's blocks or look up a block type should require THIS module, not
+// ./registry directly, so the definitions are guaranteed to be loaded.
+//
+// Wave 1 block definitions are registered below, one require() per block (each
+// module self-registers on load). Requiring THIS module guarantees they are all
+// present before anything validates a page's blocks.
+
+const registry = require('./registry')
+const { validateBlocks, MAX_BLOCKS, MAX_SUBBLOCKS } = require('./validateBlocks')
+const { sanitizeBlocks } = require('./sanitizeBlocks')
+
+// ── Wave 1 block definitions (self-register on require) ────────────────
+require('./types/heading')
+require('./types/richText')
+require('./types/image')
+require('./types/twoColumn')
+require('./types/cta')
+require('./types/divider')
+require('./types/quote')
+
+module.exports = {
+  ...registry,
+  validateBlocks,
+  sanitizeBlocks,
+  MAX_BLOCKS,
+  MAX_SUBBLOCKS,
+}

server/src/blocks/propHelpers.js

@@ -0,0 +1,84 @@
+// Small shared validators used by the Wave 1 block schemas. Each block's schema
+// composes these and returns a flat array of error strings; validateBlocks
+// prefixes each with the block path (so 'text is required' becomes
+// 'blocks[2].props.text is required'). Phrase messages to read well after that
+// prefix — start with the prop name.
+
+/** @returns {boolean} true if v is a non-empty (after trim) string. */
+function isNonEmptyString(v) {
+  return typeof v === 'string' && v.trim().length > 0
+}
+
+/**
+ * Accept a same-origin relative URL ("/uploads/x.png", "/wiki/foo") or an
+ * absolute http/https URL. Rejects javascript:, data:, protocol-relative
+ * ("//evil"), and anything else — the block renderers drop these into hrefs/src
+ * so this is a security boundary, not just a format check.
+ * @param {unknown} v
+ * @returns {boolean}
+ */
+function isSafeUrl(v) {
+  if (typeof v !== 'string' || v.trim() === '') return false
+  const s = v.trim()
+  if (s.startsWith('//')) return false // protocol-relative — ambiguous origin
+  if (s.startsWith('/')) return true // same-origin relative
+  try {
+    const u = new URL(s)
+    return u.protocol === 'http:' || u.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Build an enum validator for a prop.
+ * @param {string} name prop name (for the message)
+ * @param {string[]} allowed
+ * @returns {(v: unknown) => string|null} error string or null
+ */
+function oneOf(name, allowed) {
+  return (v) => (allowed.includes(v) ? null : `${name} must be one of ${allowed.join(', ')}`)
+}
+
+/**
+ * Validate a required text prop: present, non-empty, within maxLen.
+ * @returns {string|null}
+ */
+function requiredText(name, v, maxLen) {
+  if (!isNonEmptyString(v)) return `${name} is required`
+  if (v.length > maxLen) return `${name} must be at most ${maxLen} characters`
+  return null
+}
+
+/**
+ * Validate an optional text prop: if present it must be a string within maxLen.
+ * @returns {string|null}
+ */
+function optionalText(name, v, maxLen) {
+  if (v === undefined || v === null || v === '') return null
+  if (typeof v !== 'string') return `${name} must be a string`
+  if (v.length > maxLen) return `${name} must be at most ${maxLen} characters`
+  return null
+}
+
+/**
+ * Reject any prop key not in `allowed`. Keeps a block's props tight so nothing
+ * unexpected is smuggled through and stored.
+ * @returns {string[]} error strings
+ */
+function onlyKeys(props, allowed) {
+  const errors = []
+  for (const key of Object.keys(props)) {
+    if (!allowed.includes(key)) errors.push(`${key} is not an allowed prop`)
+  }
+  return errors
+}
+
+module.exports = {
+  isNonEmptyString,
+  isSafeUrl,
+  oneOf,
+  requiredText,
+  optionalText,
+  onlyKeys,
+}

server/src/blocks/registry.js

@@ -0,0 +1,103 @@
+// Block registry (server side) — the single source of truth for what block
+// types exist, how their props validate, and how long a rendered block may be
+// cached. The admin builder UI, the public renderer, and this server-side
+// validation are all driven from a registry entry rather than a switch statement
+// scattered across files: adding a block later means adding ONE entry (here on
+// the server for schema/cache, and one in client/src/blocks for the React
+// renderer/editor), not editing four places.
+//
+// A registered definition looks like:
+//   {
+//     type: 'heading',        // stable string id, unique across the registry
+//     version: 1,             // prop-schema version; bump when props change so a
+//                             // one-time migration can transform older blocks
+//     schema: (props) => [],  // returns an array of error strings ([] = valid)
+//     sanitize: (props) => props, // optional normalizer run on save AFTER
+//                             // validation, e.g. rich_text runs its html through
+//                             // the shared allowlist; returns cleaned props
+//     cacheTTL: null,         // seconds a rendered instance may be cached;
+//                             // null = never cache (static blocks). Dynamic
+//                             // Wave 2 blocks set this (e.g. server_status: 10).
+//     container: false,       // true only for block types that hold sub-blocks
+//     containerSlots: [],     // prop keys holding sub-block arrays, e.g.
+//                             // ['left','right'] for two_column
+//   }
+//
+// This module is intentionally empty of block types — it only defines the
+// pattern. Wave 1 block definitions register themselves via ./index.js.
+
+// The only keys allowed at the top level of a stored block object. Everything
+// block-specific lives inside `props`; nothing else lives at the top level.
+// Ordering is the array position, not a stored field — so a reorder is just a
+// reorder of the array, and `id` is never derived from position.
+const RESERVED_KEYS = Object.freeze(['id', 'type', 'version', 'visible', 'props'])
+
+const registry = new Map()
+
+/**
+ * Register a block definition. Throws on a missing type or a duplicate — both
+ * are programmer errors surfaced at boot, not runtime input.
+ * @param {object} def
+ * @returns {object} the normalized, frozen definition
+ */
+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}`)
+  }
+  if (def.schema != null && typeof def.schema !== 'function') {
+    throw new Error(`registerBlock: ${def.type}.schema must be a function`)
+  }
+  if (def.sanitize != null && typeof def.sanitize !== 'function') {
+    throw new Error(`registerBlock: ${def.type}.sanitize must be a function`)
+  }
+  const containerSlots = def.containerSlots || []
+  if (def.container && containerSlots.length === 0) {
+    throw new Error(`registerBlock: container block ${def.type} needs containerSlots`)
+  }
+  const entry = Object.freeze({
+    type: def.type,
+    version: Number.isInteger(def.version) ? def.version : 1,
+    schema: def.schema || null,
+    sanitize: def.sanitize || null,
+    cacheTTL: def.cacheTTL == null ? null : Number(def.cacheTTL),
+    container: Boolean(def.container),
+    containerSlots: Object.freeze([...containerSlots]),
+  })
+  registry.set(entry.type, entry)
+  return entry
+}
+
+/** @returns {object|null} the definition for `type`, or null if unknown. */
+function getBlock(type) {
+  return registry.get(type) || null
+}
+
+/** @returns {boolean} whether `type` is a registered block. */
+function hasBlock(type) {
+  return registry.has(type)
+}
+
+/** @returns {object[]} all registered definitions (registration order). */
+function listBlocks() {
+  return [...registry.values()]
+}
+
+/**
+ * Drop every registered block. Test-only — lets a suite register a fixture set
+ * and start from a known-empty registry.
+ */
+function _resetRegistry() {
+  registry.clear()
+}
+
+module.exports = {
+  RESERVED_KEYS,
+  registerBlock,
+  getBlock,
+  hasBlock,
+  listBlocks,
+  _resetRegistry,
+}

server/src/blocks/sanitizeBlocks.js

@@ -0,0 +1,47 @@
+// Normalize + sanitize a validated blocks array before persisting. Runs AFTER
+// validateBlocks (which guarantees the envelope/prop shape), so this can assume
+// well-formed input and focus on: applying each block's registry `sanitize`
+// normalizer (e.g. rich_text runs its html through the allowlist), stamping the
+// registry `version`, defaulting `visible` to true, and recursing one level into
+// container slots. Returns a new array; never mutates the input.
+
+const { getBlock } = require('./registry')
+
+function sanitizeBlocks(blocks) {
+  if (!Array.isArray(blocks)) return []
+  return blocks.map(sanitizeOne)
+}
+
+function sanitizeOne(block) {
+  const def = getBlock(block.type)
+  if (!def) return block // unreachable after validation, but stay defensive
+
+  let props = block.props && typeof block.props === 'object' ? { ...block.props } : {}
+
+  // Recurse into container slots first (leaf sub-blocks get sanitized too).
+  if (def.container) {
+    for (const slot of def.containerSlots) {
+      if (Array.isArray(props[slot])) props[slot] = props[slot].map(sanitizeOne)
+    }
+  }
+
+  // Apply the block's own normalizer last (operates on its scalar props).
+  if (def.sanitize) {
+    try {
+      props = def.sanitize(props)
+    } catch {
+      // Leave props as-is; validation already passed, a sanitize throw shouldn't
+      // block the save.
+    }
+  }
+
+  return {
+    id: block.id,
+    type: block.type,
+    version: Number.isInteger(block.version) ? block.version : def.version,
+    visible: block.visible !== false,
+    props,
+  }
+}
+
+module.exports = { sanitizeBlocks }

server/src/blocks/types/cta.js

@@ -0,0 +1,22 @@
+// cta — a call-to-action button. `text` is the label, `url` the destination
+// (same-origin path or http/https), `style` picks primary/secondary appearance.
+const { registerBlock } = require('../registry')
+const { isSafeUrl, oneOf, requiredText, onlyKeys } = require('../propHelpers')
+
+const STYLES = ['primary', 'secondary']
+const MAX_TEXT = 100
+
+registerBlock({
+  type: 'cta',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    const errors = onlyKeys(props, ['text', 'url', 'style'])
+    const text = requiredText('text', props.text, MAX_TEXT)
+    if (text) errors.push(text)
+    if (!isSafeUrl(props.url)) errors.push('url must be a same-origin path or http(s) URL')
+    const style = oneOf('style', STYLES)(props.style)
+    if (style) errors.push(style)
+    return errors
+  },
+})

server/src/blocks/types/divider.js

@@ -0,0 +1,12 @@
+// divider — a pure spacer / horizontal rule. Carries no props.
+const { registerBlock } = require('../registry')
+const { onlyKeys } = require('../propHelpers')
+
+registerBlock({
+  type: 'divider',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    return onlyKeys(props, [])
+  },
+})

server/src/blocks/types/heading.js

@@ -0,0 +1,21 @@
+// heading — a section heading. `level` picks the tag (h1–h4), `text` is plain
+// text (the renderer escapes it; no HTML here — use rich_text for markup).
+const { registerBlock } = require('../registry')
+const { oneOf, requiredText, onlyKeys } = require('../propHelpers')
+
+const LEVELS = ['h1', 'h2', 'h3', 'h4']
+const MAX_TEXT = 200
+
+registerBlock({
+  type: 'heading',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    const errors = onlyKeys(props, ['level', 'text'])
+    const level = oneOf('level', LEVELS)(props.level)
+    if (level) errors.push(level)
+    const text = requiredText('text', props.text, MAX_TEXT)
+    if (text) errors.push(text)
+    return errors
+  },
+})

server/src/blocks/types/image.js

@@ -0,0 +1,27 @@
+// image — a single image with optional caption. `src` must be a same-origin
+// upload path or an http/https URL (isSafeUrl); `alignment` controls layout.
+// Stays URL-based until the Wave 3 asset picker lands, then src swaps to an
+// asset id via a small migration.
+const { registerBlock } = require('../registry')
+const { isSafeUrl, oneOf, optionalText, onlyKeys } = require('../propHelpers')
+
+const ALIGNMENTS = ['left', 'center', 'right', 'full']
+const MAX_ALT = 300
+const MAX_CAPTION = 500
+
+registerBlock({
+  type: 'image',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    const errors = onlyKeys(props, ['src', 'alt', 'caption', 'alignment'])
+    if (!isSafeUrl(props.src)) errors.push('src must be a same-origin path or http(s) URL')
+    const alt = optionalText('alt', props.alt, MAX_ALT)
+    if (alt) errors.push(alt)
+    const caption = optionalText('caption', props.caption, MAX_CAPTION)
+    if (caption) errors.push(caption)
+    const alignment = oneOf('alignment', ALIGNMENTS)(props.alignment)
+    if (alignment) errors.push(alignment)
+    return errors
+  },
+})

server/src/blocks/types/quote.js

@@ -0,0 +1,20 @@
+// quote — a pull quote with optional attribution.
+const { registerBlock } = require('../registry')
+const { requiredText, optionalText, onlyKeys } = require('../propHelpers')
+
+const MAX_TEXT = 1000
+const MAX_ATTRIB = 200
+
+registerBlock({
+  type: 'quote',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    const errors = onlyKeys(props, ['text', 'attribution'])
+    const text = requiredText('text', props.text, MAX_TEXT)
+    if (text) errors.push(text)
+    const attribution = optionalText('attribution', props.attribution, MAX_ATTRIB)
+    if (attribution) errors.push(attribution)
+    return errors
+  },
+})

server/src/blocks/types/richText.js

@@ -0,0 +1,26 @@
+// rich_text — a block of HTML authored in the shared rich-text editor. Validated
+// only for type/size here; the actual safety comes from `sanitize`, which runs
+// the html through the same allowlist (cleanBody) used for posts/wiki bodies, so
+// a direct API call can't smuggle unsafe markup past the editor.
+const { registerBlock } = require('../registry')
+const { onlyKeys } = require('../propHelpers')
+const { cleanBody } = require('../../utils/sanitizeHtml')
+
+const MAX_HTML = 50000
+
+registerBlock({
+  type: 'rich_text',
+  version: 1,
+  cacheTTL: null,
+  schema(props) {
+    const errors = onlyKeys(props, ['html'])
+    if (typeof props.html !== 'string') errors.push('html must be a string')
+    else if (props.html.length > MAX_HTML) {
+      errors.push(`html must be at most ${MAX_HTML} characters`)
+    }
+    return errors
+  },
+  sanitize(props) {
+    return { ...props, html: cleanBody(props.html) }
+  },
+})

server/src/blocks/types/twoColumn.js

@@ -0,0 +1,20 @@
+// two_column — the only container block. Holds two ordered arrays of sub-blocks
+// (`left`, `right`). The sub-block arrays are validated by validateBlocks, which
+// also enforces the one-level nesting cap (a column may not contain another
+// container). This schema only guards the prop shape; the slot arrays default to
+// empty when absent.
+const { registerBlock } = require('../registry')
+const { onlyKeys } = require('../propHelpers')
+
+registerBlock({
+  type: 'two_column',
+  version: 1,
+  cacheTTL: null,
+  container: true,
+  containerSlots: ['left', 'right'],
+  schema(props) {
+    // Slot array contents are validated by validateBlocks' container handling;
+    // here we only reject stray props.
+    return onlyKeys(props, ['left', 'right'])
+  },
+})

server/src/blocks/validateBlocks.js

@@ -0,0 +1,119 @@
+// Server-side validation for a page's `blocks` array, run on every save before
+// persisting. The admin UI validates client-side too, but that can be bypassed
+// by a direct API call, so this is the authoritative gate: it enforces the block
+// envelope (reserved keys only), that every `type` is a registered block, that
+// each block's props satisfy the registry schema, and the one-level nesting cap
+// (only container blocks may hold sub-blocks, and sub-blocks may not themselves
+// be containers).
+//
+// Returns { valid, errors } — a flat list of human-readable error strings, each
+// prefixed with the path to the offending block (e.g. `blocks[2].props.text`).
+// It never throws on bad input; callers turn a non-empty `errors` into a 400.
+
+const { getBlock, RESERVED_KEYS } = require('./registry')
+
+// Bound the payload so a single page can't carry an unreasonable block tree.
+const MAX_BLOCKS = 100 // top-level blocks per page
+const MAX_SUBBLOCKS = 50 // sub-blocks per container slot
+const ID_RE = /^[A-Za-z0-9_-]{1,40}$/
+
+/**
+ * Validate a stored blocks array against the registry.
+ * @param {unknown} blocks
+ * @returns {{ valid: boolean, errors: string[] }}
+ */
+function validateBlocks(blocks) {
+  const errors = []
+  if (!Array.isArray(blocks)) {
+    return { valid: false, errors: ['blocks must be an array'] }
+  }
+  if (blocks.length > MAX_BLOCKS) {
+    errors.push(`blocks may not exceed ${MAX_BLOCKS} top-level entries`)
+  }
+  const seenIds = new Set()
+  blocks.forEach((block, i) => {
+    validateBlock(block, `blocks[${i}]`, seenIds, errors, { nested: false })
+  })
+  return { valid: errors.length === 0, errors }
+}
+
+/**
+ * Validate one block envelope in place. `nested` = true when validating a
+ * sub-block inside a container slot, which forbids further nesting.
+ */
+function validateBlock(block, path, seenIds, errors, { nested }) {
+  if (block === null || typeof block !== 'object' || Array.isArray(block)) {
+    errors.push(`${path} must be an object`)
+    return
+  }
+
+  // Envelope: only the reserved keys, nothing smuggled at the top level.
+  for (const key of Object.keys(block)) {
+    if (!RESERVED_KEYS.includes(key)) {
+      errors.push(`${path}.${key} is not an allowed top-level key`)
+    }
+  }
+
+  // id — stable, unique across the whole page (top-level and nested share one
+  // namespace since ids are the future join point for revision history).
+  if (typeof block.id !== 'string' || !ID_RE.test(block.id)) {
+    errors.push(`${path}.id must be a short id string`)
+  } else if (seenIds.has(block.id)) {
+    errors.push(`${path}.id duplicates another block id (${block.id})`)
+  } else {
+    seenIds.add(block.id)
+  }
+
+  // visible — optional in input, but if present must be a boolean.
+  if (block.visible !== undefined && typeof block.visible !== 'boolean') {
+    errors.push(`${path}.visible must be a boolean`)
+  }
+
+  // props — always an object bag.
+  const props = block.props
+  if (props === null || typeof props !== 'object' || Array.isArray(props)) {
+    errors.push(`${path}.props must be an object`)
+  }
+
+  // type — must resolve to a registered block.
+  const def = typeof block.type === 'string' ? getBlock(block.type) : null
+  if (!def) {
+    errors.push(`${path}.type is not a registered block type (${String(block.type)})`)
+    return // can't validate props or nesting without a definition
+  }
+
+  // Per-block prop schema from the registry.
+  if (def.schema && props && typeof props === 'object') {
+    let schemaErrors = []
+    try {
+      schemaErrors = def.schema(props) || []
+    } catch (err) {
+      schemaErrors = [`schema threw: ${err.message}`]
+    }
+    for (const e of schemaErrors) errors.push(`${path}.props.${e}`)
+  }
+
+  // Nesting: only container blocks may hold sub-blocks, capped at one level.
+  if (def.container) {
+    if (nested) {
+      errors.push(`${path} is a container and may not be nested inside another container`)
+      return
+    }
+    for (const slot of def.containerSlots) {
+      const sub = props ? props[slot] : undefined
+      if (sub === undefined) continue // an empty slot is allowed
+      if (!Array.isArray(sub)) {
+        errors.push(`${path}.props.${slot} must be an array of blocks`)
+        continue
+      }
+      if (sub.length > MAX_SUBBLOCKS) {
+        errors.push(`${path}.props.${slot} may not exceed ${MAX_SUBBLOCKS} blocks`)
+      }
+      sub.forEach((child, j) => {
+        validateBlock(child, `${path}.props.${slot}[${j}]`, seenIds, errors, { nested: true })
+      })
+    }
+  }
+}
+
+module.exports = { validateBlocks, MAX_BLOCKS, MAX_SUBBLOCKS }

server/src/middleware/rateLimit.js

@@ -24,6 +24,26 @@ const loginLimiter = makeLimiter({
   message: 'Too many login attempts. Please try again later.',
 })
 
+// Public self-registration. Mirrors the login cap: a handful of legitimate
+// attempts per window, a flood is abuse. The global botScore guard + honeypot
+// cover the rest.
+const registerLimiter = makeLimiter({
+  windowMs: 15 * 60 * 1000,
+  max: 10,
+  label: 'register',
+  message: 'Too many registration attempts. Please try again later.',
+})
+
+// Authenticated self-service credential changes (username / password). Tighter
+// than login — a signed-in player rarely changes these, and the wrong-current-
+// password path also feeds the shared login backoff (see the controller).
+const accountChangeLimiter = makeLimiter({
+  windowMs: 15 * 60 * 1000,
+  max: 10,
+  label: 'account-change',
+  message: 'Too many changes. Please try again later.',
+})
+
 // Throttle the public contact form.
 const contactLimiter = makeLimiter({
   windowMs: 60 * 60 * 1000,
@@ -51,4 +71,11 @@ const ssoStartLimiter = makeLimiter({
   message: 'Too many sign-in attempts. Please try again later.',
 })
 
-module.exports = { loginLimiter, contactLimiter, mobileRefreshLimiter, ssoStartLimiter }
+module.exports = {
+  loginLimiter,
+  registerLimiter,
+  accountChangeLimiter,
+  contactLimiter,
+  mobileRefreshLimiter,
+  ssoStartLimiter,
+}

server/src/model/announceJobs/announceJobs.db.js

@@ -0,0 +1,68 @@
+const { query } = require('../../utils/db')
+
+const COLS =
+  'id, post_id, status, ' +
+  'towncrier_status, towncrier_attempts, towncrier_last_error, towncrier_next_attempt_at, ' +
+  'discord_status, discord_attempts, discord_last_error, discord_next_attempt_at, ' +
+  'created_at, updated_at'
+
+// Whitelist so a `leg` value can be interpolated into a column name safely — it
+// never comes from raw user input, but keep the guard explicit.
+const LEGS = ['towncrier', 'discord']
+function assertLeg(leg) {
+  if (!LEGS.includes(leg)) throw new Error(`unknown announce leg: ${leg}`)
+}
+
+async function create(postId) {
+  const res = await query('INSERT INTO announce_jobs (post_id) VALUES (?)', [postId])
+  return res.insertId
+}
+
+async function findById(id) {
+  const rows = await query(`SELECT ${COLS} FROM announce_jobs WHERE id = ? LIMIT 1`, [id])
+  return rows[0] || null
+}
+
+async function findByPostId(postId) {
+  const rows = await query(
+    `SELECT ${COLS} FROM announce_jobs WHERE post_id = ? ORDER BY id DESC LIMIT 1`,
+    [postId],
+  )
+  return rows[0] || null
+}
+
+// Jobs with at least one leg that is due now: pending and either never scheduled
+// (next_attempt_at IS NULL — a fresh enqueue) or past its backoff time.
+async function findDue(now = new Date(), limit = 25) {
+  return query(
+    `SELECT ${COLS} FROM announce_jobs
+      WHERE (towncrier_status = 'pending'
+             AND (towncrier_next_attempt_at IS NULL OR towncrier_next_attempt_at <= ?))
+         OR (discord_status = 'pending'
+             AND (discord_next_attempt_at IS NULL OR discord_next_attempt_at <= ?))
+      ORDER BY id ASC
+      LIMIT ?`,
+    [now, now, limit],
+  )
+}
+
+// Update one leg's columns. `fields` uses leg-agnostic keys (status, attempts,
+// lastError, nextAttemptAt); we map them onto the leg-prefixed columns.
+async function updateLeg(id, leg, { status, attempts, lastError, nextAttemptAt }) {
+  assertLeg(leg)
+  await query(
+    `UPDATE announce_jobs SET
+       ${leg}_status = ?,
+       ${leg}_attempts = ?,
+       ${leg}_last_error = ?,
+       ${leg}_next_attempt_at = ?
+     WHERE id = ?`,
+    [status, attempts, lastError ?? null, nextAttemptAt ?? null, id],
+  )
+}
+
+async function setStatus(id, status) {
+  await query('UPDATE announce_jobs SET status = ? WHERE id = ?', [status, id])
+}
+
+module.exports = { LEGS, create, findById, findByPostId, findDue, updateLeg, setStatus }

server/src/model/announceJobs/announceJobs.logic.js

@@ -0,0 +1,127 @@
+// ── Announcement pipeline: pure logic ──────────────────────────────────────
+//
+// No DB, no network — just the decisions the worker and model make, kept here so
+// they are unit-testable in isolation (server/test/announceJobs.test.js):
+//   • buildTownCrierText — turn a post into sidecar-safe town-crier lines
+//   • classifyTownCrier / classifyDiscord — map a dispatch result to done / retry
+//     / terminal, so a data problem fails fast and a transient outage retries
+//   • scheduleAfter — exponential backoff schedule + the attempt cap
+//   • rollupStatus — derive the parent job status from the two legs
+
+const { deriveExcerpt } = require('../../utils/sanitizeHtml')
+
+// Sidecar town-crier caps, mirrored from the admin route validation
+// (admin.routes.js: lines isArray({ max: 8 }), lines.* isLength({ max: 200 })).
+// We pre-truncate to these so a published post never bounces with towncrier.error.
+const MAX_LINES = 8
+const MAX_LINE_LEN = 200
+
+// Backoff between retries, indexed by attempts-so-far. Six attempts spread over
+// ~a couple of hours; after the last one a leg is marked failed and surfaced in
+// the post's admin panel. Shared by both legs.
+const BACKOFF_MS = [30_000, 120_000, 600_000, 1_800_000, 3_600_000, 7_200_000]
+const MAX_ATTEMPTS = BACKOFF_MS.length
+
+// Trim to a hard length, appending an ellipsis only when something was cut.
+function clamp(value, max) {
+  const s = String(value == null ? '' : value)
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (s.length <= max) return s
+  return `${s.slice(0, max - 1).trimEnd()}…`
+}
+
+// The public link that goes in the announcement. News has no per-post route
+// (App.jsx only has the /site/news list), so we link the list — matches the
+// pre-pipeline Discord announce behavior.
+function articleUrl(baseUrl) {
+  return `${String(baseUrl || '').replace(/\/+$/, '')}/site/news`
+}
+
+// Build the town-crier lines: title, a one-line excerpt, then the URL. Each line
+// is clamped to the sidecar's per-line cap and the whole thing to the line-count
+// cap. Falls back to a stripped body excerpt when the post has no excerpt.
+function buildTownCrierText(post, { baseUrl } = {}) {
+  const title = clamp(post.title, MAX_LINE_LEN)
+  const excerptSource = post.excerpt || deriveExcerpt(post.body, MAX_LINE_LEN) || ''
+  const lines = [title]
+  const excerpt = clamp(excerptSource, MAX_LINE_LEN)
+  if (excerpt) lines.push(excerpt)
+  const url = clamp(articleUrl(baseUrl), MAX_LINE_LEN)
+  if (url) lines.push(url)
+  return lines.filter(Boolean).slice(0, MAX_LINES)
+}
+
+// ── Result classification ──────────────────────────────────────────────────
+// Both clients return { ok, status, error }. Map that to one of:
+//   done     — delivered, mark the leg done
+//   retry    — transient (shard restarting, bot down, network); back off + retry
+//   terminal — will never succeed as-is (over caps, bad auth/config); fail now
+
+function classifyTownCrier(result) {
+  if (result && result.ok) return { outcome: 'done' }
+  const status = result ? result.status : 0
+  // 400 = over the line/duration caps (a data problem — do NOT retry).
+  // 401 = token mismatch, 409 = protocol mismatch (both config problems).
+  if (status === 400 || status === 401 || status === 409) {
+    return { outcome: 'terminal', error: legError(result) }
+  }
+  // 503 (shard not connected), 504 (shard timeout), 0 (network/timeout / not
+  // configured yet), and any other 5xx are transient — retry.
+  return { outcome: 'retry', error: legError(result) }
+}
+
+function classifyDiscord(result) {
+  if (result && result.ok) return { outcome: 'done' }
+  // The bot's /internal/announce collapses failures (503 = not connected,
+  // 400 = no news channel configured) without surfacing Discord's own
+  // retry_after, so there is no reliable terminal signal to key on here. Retry
+  // every failure on the shared backoff; a genuine config problem simply
+  // exhausts its attempts and lands as `failed` in the admin panel, where the
+  // per-leg retry button re-runs it after the channel is set.
+  return { outcome: 'retry', error: legError(result) }
+}
+
+function legError(result) {
+  if (!result) return 'no response'
+  if (result.status) {
+    return result.data && result.data.message
+      ? `${result.status}: ${result.data.message}`
+      : result.error || `status ${result.status}`
+  }
+  return result.error || 'request failed'
+}
+
+// Given the number of attempts already made (>= 1), how long to wait before the
+// next one — or null when the cap is reached and the leg should be failed.
+function scheduleAfter(attempts) {
+  if (attempts >= MAX_ATTEMPTS) return null
+  return BACKOFF_MS[Math.min(attempts - 1, BACKOFF_MS.length - 1)]
+}
+
+// Parent job status derived from the two leg statuses:
+//   done    — both legs delivered
+//   failed  — both legs gave up
+//   partial — at least one leg reached a terminal state while the other has not
+//             matched it (still pending/retrying, or the opposite terminal state)
+//   pending — neither leg is terminal yet
+function rollupStatus(towncrierStatus, discordStatus) {
+  if (towncrierStatus === 'done' && discordStatus === 'done') return 'done'
+  if (towncrierStatus === 'failed' && discordStatus === 'failed') return 'failed'
+  const terminal = (s) => s === 'done' || s === 'failed'
+  if (terminal(towncrierStatus) || terminal(discordStatus)) return 'partial'
+  return 'pending'
+}
+
+module.exports = {
+  MAX_LINES,
+  MAX_LINE_LEN,
+  MAX_ATTEMPTS,
+  BACKOFF_MS,
+  buildTownCrierText,
+  articleUrl,
+  classifyTownCrier,
+  classifyDiscord,
+  scheduleAfter,
+  rollupStatus,
+}

server/src/model/announceJobs/announceJobs.model.js

@@ -0,0 +1,116 @@
+// ── Announcement pipeline: orchestration ────────────────────────────────────
+//
+// Sits between the DB rows and the worker: creates jobs on publish, records each
+// leg's outcome, keeps the parent `status` rollup in sync, stamps the post's
+// announced_at when both legs land, and resets a leg for the admin retry button.
+// The pure decisions (backoff, rollup, classification) live in .logic.js.
+
+const db = require('./announceJobs.db')
+const logic = require('./announceJobs.logic')
+const posts = require('../posts/posts.model')
+const log = require('../../utils/logger')('announce')
+
+// Enqueue an announcement for a freshly-published news post: one job row (both
+// legs pending, due immediately) plus a back-pointer on the post so the admin
+// panel can find it. Returns the new job id.
+async function enqueue(postId) {
+  const jobId = await db.create(postId)
+  await posts.linkAnnounceJob(postId, jobId)
+  log.info('announce job enqueued', { jobId, postId })
+  return jobId
+}
+
+// Should publishing this post fire the pipeline? Only on a real transition INTO
+// "published news" — a false→true publish while in news, or a category change
+// into news while already published — and never twice (guarded by the post's
+// existing announce_job_id). Editing an already-announced post does not re-fire.
+function shouldEnqueue(post, { wasPublished, wasNews }) {
+  if (!post || post.category !== 'news' || !post.published) return false
+  if (post.announce_job_id) return false
+  const wasNewsPublished = Boolean(wasPublished) && Boolean(wasNews)
+  return !wasNewsPublished
+}
+
+// Convenience used by the post controller: enqueue iff shouldEnqueue. Never
+// throws — a pipeline hiccup must not break saving/publishing a post.
+async function enqueueIfNeeded(post, transition) {
+  try {
+    if (!shouldEnqueue(post, transition)) return null
+    return await enqueue(post.id)
+  } catch (err) {
+    log.error('enqueueIfNeeded failed', { postId: post && post.id, message: err.message })
+    return null
+  }
+}
+
+// Record a leg's dispatch outcome and refresh the rollup. `outcome` is one of
+// logic.classify*'s results: 'done' | 'retry' | 'terminal'. For 'retry' we bump
+// the attempt count and schedule the next run (or fail the leg once the cap is
+// hit). Returns the updated job row.
+async function recordOutcome(job, leg, { outcome, error }) {
+  const attempts = Number(job[`${leg}_attempts`]) || 0
+
+  if (outcome === 'done') {
+    await db.updateLeg(job.id, leg, { status: 'done', attempts, lastError: null, nextAttemptAt: null })
+  } else if (outcome === 'terminal') {
+    await db.updateLeg(job.id, leg, { status: 'failed', attempts: attempts + 1, lastError: error, nextAttemptAt: null })
+    log.warn('announce leg failed (terminal)', { jobId: job.id, leg, error })
+  } else {
+    const nextAttempts = attempts + 1
+    const delay = logic.scheduleAfter(nextAttempts)
+    if (delay === null) {
+      await db.updateLeg(job.id, leg, { status: 'failed', attempts: nextAttempts, lastError: error, nextAttemptAt: null })
+      log.warn('announce leg failed (retries exhausted)', { jobId: job.id, leg, attempts: nextAttempts, error })
+    } else {
+      const nextAttemptAt = new Date(Date.now() + delay)
+      await db.updateLeg(job.id, leg, { status: 'pending', attempts: nextAttempts, lastError: error, nextAttemptAt })
+      log.info('announce leg retry scheduled', { jobId: job.id, leg, attempts: nextAttempts, nextAttemptAt })
+    }
+  }
+
+  return refreshStatus(job.id)
+}
+
+// Recompute and persist the parent status from the two legs; stamp the post's
+// announced_at the moment both legs have delivered.
+async function refreshStatus(jobId) {
+  const job = await db.findById(jobId)
+  if (!job) return null
+  const status = logic.rollupStatus(job.towncrier_status, job.discord_status)
+  if (status !== job.status) await db.setStatus(jobId, status)
+  job.status = status
+  if (status === 'done') {
+    try {
+      await posts.markAnnounced(job.post_id)
+    } catch (err) {
+      log.warn('markAnnounced failed', { jobId, postId: job.post_id, message: err.message })
+    }
+  }
+  return job
+}
+
+// Admin retry button: reset one leg to pending, clear its error/backoff, and let
+// the worker pick it up on the next tick. Resets the attempt count so a retry
+// after a config fix gets a full budget again.
+async function resetLeg(postId, leg) {
+  if (!db.LEGS.includes(leg)) throw new Error(`unknown announce leg: ${leg}`)
+  const job = await db.findByPostId(postId)
+  if (!job) return null
+  await db.updateLeg(job.id, leg, { status: 'pending', attempts: 0, lastError: null, nextAttemptAt: null })
+  log.info('announce leg reset for retry', { jobId: job.id, postId, leg })
+  return refreshStatus(job.id)
+}
+
+async function getByPostId(postId) {
+  return db.findByPostId(postId)
+}
+
+module.exports = {
+  enqueue,
+  shouldEnqueue,
+  enqueueIfNeeded,
+  recordOutcome,
+  refreshStatus,
+  resetLeg,
+  getByPostId,
+}

server/src/model/emailConfig/emailConfig.db.js

@@ -0,0 +1,28 @@
+const { query } = require('../../utils/db')
+
+const COLS =
+  'id, provider, enabled, sender_email, sender_name, refresh_token_enc, status, status_detail, last_verified_at, updated_by, created_at, updated_at'
+
+// Singleton row (id = 1). Returns null until the admin connects Gmail for the first time.
+async function get() {
+  const rows = await query(`SELECT ${COLS} FROM email_config WHERE id = 1 LIMIT 1`)
+  return rows[0] || null
+}
+
+// Upsert the singleton row. `fields` are column values already prepared by the
+// model (refresh token pre-encrypted). Only the provided columns are written/updated.
+async function upsert(fields) {
+  const cols = Object.keys(fields)
+  const vals = cols.map((c) => fields[c])
+  const insertCols = ['id', ...cols].map((c) => `\`${c}\``).join(', ')
+  const placeholders = ['1', ...cols.map(() => '?')].join(', ')
+  const updates = cols.map((c) => `\`${c}\` = VALUES(\`${c}\`)`).join(', ')
+  await query(
+    `INSERT INTO email_config (${insertCols}) VALUES (${placeholders})
+     ON DUPLICATE KEY UPDATE ${updates}`,
+    vals,
+  )
+  return get()
+}
+
+module.exports = { get, upsert }

server/src/model/emailConfig/emailConfig.model.js

@@ -0,0 +1,92 @@
+// Outbound email config store (Gmail OAuth2). Mirrors the botConfig model split:
+// the DB layer only ever sees ciphertext, and only getWithSecret() (used by the
+// mailer at send time) decrypts the refresh token. The admin-facing getSafe()
+// never includes it — callers see only `hasRefreshToken`.
+
+const db = require('./emailConfig.db')
+const secretBox = require('../../utils/secretBox')
+
+function toSafe(row) {
+  if (!row) {
+    return {
+      provider: 'gmail_oauth2',
+      enabled: false,
+      senderEmail: null,
+      senderName: null,
+      hasRefreshToken: false,
+      status: 'unconfigured',
+      statusDetail: null,
+      lastVerifiedAt: null,
+    }
+  }
+  return {
+    provider: row.provider || 'gmail_oauth2',
+    enabled: Boolean(row.enabled),
+    senderEmail: row.sender_email || null,
+    senderName: row.sender_name || null,
+    hasRefreshToken: Boolean(row.refresh_token_enc),
+    status: row.status || 'unconfigured',
+    statusDetail: row.status_detail || null,
+    lastVerifiedAt: row.last_verified_at || null,
+  }
+}
+
+async function getSafe() {
+  return toSafe(await db.get())
+}
+
+// Decrypted refresh token included — server-side only (building the mailer's
+// OAuth2 transport). Returns null when no row exists yet.
+async function getWithSecret() {
+  const row = await db.get()
+  if (!row) return null
+  return {
+    ...toSafe(row),
+    refreshToken: row.refresh_token_enc ? secretBox.decrypt(row.refresh_token_enc) : null,
+  }
+}
+
+// Save admin-supplied / connect-flow config. `refreshToken` undefined or '' means
+// "leave the existing token unchanged" (same convention as botConfig.save).
+async function save({ senderEmail, senderName, refreshToken, enabled, status, statusDetail, updatedBy }) {
+  const fields = {}
+  if (senderEmail !== undefined) fields.sender_email = senderEmail
+  if (senderName !== undefined) fields.sender_name = senderName
+  if (refreshToken) fields.refresh_token_enc = secretBox.encrypt(refreshToken)
+  if (enabled !== undefined) fields.enabled = enabled ? 1 : 0
+  if (status !== undefined) fields.status = status
+  if (statusDetail !== undefined) fields.status_detail = statusDetail
+  if (updatedBy !== undefined) fields.updated_by = updatedBy
+  const row = await db.upsert(fields)
+  return toSafe(row)
+}
+
+// Clear the stored credential and disable sending (admin "Disconnect").
+async function disconnect(updatedBy) {
+  const row = await db.upsert({
+    refresh_token_enc: null,
+    sender_email: null,
+    enabled: 0,
+    status: 'unconfigured',
+    status_detail: null,
+    last_verified_at: null,
+    updated_by: updatedBy ?? null,
+  })
+  return toSafe(row)
+}
+
+// Record the outcome of the last send / verification so the admin panel has
+// something to show. `lastVerifiedAt` may arrive as a Date or ISO string.
+async function recordStatus({ status, statusDetail, lastVerifiedAt } = {}) {
+  const fields = {}
+  if (status !== undefined) fields.status = status
+  if (statusDetail !== undefined) fields.status_detail = statusDetail ? String(statusDetail).slice(0, 500) : null
+  if (lastVerifiedAt !== undefined) {
+    fields.last_verified_at = lastVerifiedAt ? new Date(lastVerifiedAt) : null
+  }
+  if (Object.keys(fields).length === 0) return getSafe()
+  const row = await db.upsert(fields)
+  return toSafe(row)
+}
+
+module.exports = { getSafe, getWithSecret, save, disconnect, recordStatus }

server/src/model/invites/invites.db.js

@@ -0,0 +1,47 @@
+const { query } = require('../../utils/db')
+
+const COLS =
+  'id, token_hash, email, role, status, invited_by, accepted_user_id, expires_at, created_at, accepted_at'
+
+async function insert({ tokenHash, email, role, invitedBy, expiresAt }) {
+  const res = await query(
+    `INSERT INTO user_invites (token_hash, email, role, invited_by, expires_at)
+     VALUES (?, ?, ?, ?, ?)`,
+    [tokenHash, email, role, invitedBy ?? null, expiresAt],
+  )
+  return res.insertId
+}
+
+async function getById(id) {
+  const rows = await query(`SELECT ${COLS} FROM user_invites WHERE id = ? LIMIT 1`, [id])
+  return rows[0] || null
+}
+
+async function findByTokenHash(tokenHash) {
+  const rows = await query(`SELECT ${COLS} FROM user_invites WHERE token_hash = ? LIMIT 1`, [tokenHash])
+  return rows[0] || null
+}
+
+const listRecent = (limit) =>
+  query(`SELECT ${COLS} FROM user_invites ORDER BY created_at DESC LIMIT ?`, [limit])
+
+// Mark accepted only if still pending (atomic guard against a double-accept race).
+// Returns rows changed (1 = we won, 0 = already used/revoked).
+async function markAccepted(id, userId) {
+  const res = await query(
+    `UPDATE user_invites SET status = 'accepted', accepted_user_id = ?, accepted_at = NOW()
+      WHERE id = ? AND status = 'pending'`,
+    [userId, id],
+  )
+  return res.affectedRows || 0
+}
+
+async function revoke(id) {
+  const res = await query(
+    `UPDATE user_invites SET status = 'revoked' WHERE id = ? AND status = 'pending'`,
+    [id],
+  )
+  return res.affectedRows || 0
+}
+
+module.exports = { insert, getById, findByTokenHash, listRecent, markAccepted, revoke }