feat(shard): admin write plane, help-page queue, and public champion board

Wire up the three uo-link sidecar surfaces that weren't integrated yet.

Champion spawns
- Ingest champ.update/champ.remove into a new shard_champs table (served from
  our own store, like online/houses); public /site/champs board with a nav link,
  live via the existing SSE feed (champ.* added to the public allowlist).

Staff write plane (admin + moderator)
- kick / ban / unban / broadcast via /admin/shard/*; actor is stamped server-side
  from the session, never the browser. Sidecar status codes mapped (403 disabled/
  protected, 404 unknown, 503/504 transient). admin.audit events are logged and
  surfaced at /admin/shard/audit.
- New admin "In-Game Ops" view (/admin/shard-ops), plus per-account Kick/Ban/Unban
  on the user-detail and character views (ShardAccountActions, self-gated to staff).

Help-page (support) queue
- Ingest page.new/updated/closed into a new shard_pages table; respond/close via
  /admin/shard/pages/*. Champ board and page queue are snapshotted from the
  sidecar's /champs and /pages on every WS (re)connect (guarded so a failed call
  never wipes local state).

Verified live end-to-end against MariaDB + the Rust sidecar + ServUO; unit tests
cover ingest routing (shardIngest.champsPages.test.js). Swagger regenerated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0114TpmrNW4wNXsHq5CR72jQ

client/src/App.jsx

@@ -18,6 +18,7 @@ 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 Wiki from './routes/wiki/Wiki.jsx'
 import WikiArticle from './routes/wiki/WikiArticle.jsx'
 import CmsPage from './routes/public/CmsPage.jsx'
@@ -36,6 +37,7 @@ 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'
@@ -77,6 +79,7 @@ export default function App() {
             <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="/wiki" element={<Wiki />} />
             <Route path="/wiki/:slug" element={<WikiArticle />} />
             {/* CMS pages: top-level /:slug, matched only after the named routes
@@ -121,6 +124,14 @@ export default function App() {
             <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="characters" element={<AdminCharacters />} />
             <Route path="characters/:serial" element={<AdminCharacter />} />
             <Route path="auth-providers" element={<AuthProvidersAdmin />} />

client/src/api/client.js

@@ -94,6 +94,7 @@ export const api = {
     economy: (limit) => req(`/public/shard/economy${limit ? `?limit=${limit}` : ''}`),
     online: () => req('/public/shard/online'),
     idoc: () => req('/public/shard/idoc'),
+    champs: () => req('/public/shard/champs'),
   },
   // 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
@@ -259,6 +260,20 @@ export const api = {
     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 }),

client/src/components/CharacterSheet.jsx

@@ -1,6 +1,12 @@
 // 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' }
 
@@ -28,7 +34,7 @@ function Vital({ label, cur, max }) {
   )
 }
 
-export default function CharacterSheet({ char }) {
+export default function CharacterSheet({ char, moderation = false }) {
   if (!char) return null
   const stats = char.stats || {}
   const resist = stats.resist || {}
@@ -58,6 +64,14 @@ export default function CharacterSheet({ char }) {
         <span className="sans dim" style={{ fontSize: '0.76rem', marginLeft: 'auto' }}>{char.serial}</span>
       </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>

client/src/components/GameAccounts.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Loading, ErrorState } from './PageState.jsx'
+import ShardAccountActions from './ShardAccountActions.jsx'
 
 // Shared game-account linking + character roster, used by both the player portal
 // (/player) and the staff account page (/admin/account). `scope` is the api
@@ -107,7 +108,7 @@ function AccountRoster({ scope, account, charTo }) {
   )
 }
 
-export default function GameAccounts({ scope, charTo, readOnly = false }) {
+export default function GameAccounts({ scope, charTo, readOnly = false, moderation = false }) {
   const [accounts, setAccounts] = useState(null)
   const [error, setError] = useState('')
 
@@ -156,6 +157,7 @@ export default function GameAccounts({ scope, charTo, readOnly = false }) {
           <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>
             {a.account}
           </div>
+          {moderation && <ShardAccountActions account={a.account} style={{ marginBottom: 12 }} />}
           <AccountRoster scope={scope} account={a.account} charTo={charTo} />
         </section>
       ))}

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

@@ -12,6 +12,7 @@ const NAV = [
   { label: 'Newsletter', to: '/site/newsletter' },
   { label: 'Wiki', to: '/wiki' },
   { label: 'Shard', to: '/site/shard' },
+  { label: 'Champions', to: '/site/champs' },
   { label: 'About', to: '/site/about' },
 ]
 

client/src/lib/shardEvents.js

@@ -45,6 +45,24 @@ export function describe(ev) {
       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})`

client/src/routes/admin/AdminLayout.jsx

@@ -63,6 +63,7 @@ const NAV = [
     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'] },
     ],
   },
   {
@@ -94,6 +95,7 @@ const TITLES = {
   '/admin/wiki': 'Wiki Pages',
   '/admin/hero': 'Hero Editor',
   '/admin/moderation': 'Moderation',
+  '/admin/shard-ops': 'In-Game Ops',
   '/admin/settings': 'Site Settings',
   '/admin/activity': 'Activity Log',
   '/admin/bot-activity': 'Web Bot Activity',
@@ -136,11 +138,13 @@ export default function AdminLayout() {
   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 MOD_PATHS = ['/admin/moderation', '/admin/shard-ops', '/admin/account']
   const visible = (item) => {
     if (item.roles && !item.roles.includes(user?.role)) return false
-    if (isModerator) return item.to === '/admin/moderation' || item.to === '/admin/account'
+    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
@@ -178,7 +182,9 @@ export default function AdminLayout() {
   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])

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

@@ -23,7 +23,7 @@ export default function AdminCharacter() {
       {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} />}
+      {!loading && !error && data && <CharacterSheet char={data} moderation />}
     </div>
   )
 }

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

@@ -101,7 +101,7 @@ function ShardSections({ scope }) {
     <>
       <CharacterStats scope={scope} />
       <SectionTitle>Linked accounts &amp; characters</SectionTitle>
-      <GameAccounts scope={scope} readOnly charTo={(serial) => `/admin/characters/${serial}`} />
+      <GameAccounts scope={scope} readOnly moderation charTo={(serial) => `/admin/characters/${serial}`} />
       <OnlineNow scope={scope} />
       <Houses scope={scope} />
       <VendorSales fetchSales={scope.sales} />

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>
+  )
+}