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/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' },
 ]