Let staff link their own characters + share the game-accounts UI

- Backend: /admin/shard/{link,accounts,roster/:account,vendors/:account} —
  staff self-service, reusing the player/shard controller (it keys off
  req.user.id, so the same handlers serve any logged-in role). Swagger under
  Admin · Account; spec regenerated.
- components/GameAccounts.jsx: the link-prompt + character-roster UI extracted
  into one reusable component parametrized by an api scope and a charTo(serial)
  route builder.
- PlayerCharacters now renders it (player scope → /player/char/:serial).
- Admin: "My Characters" nav item + /admin/characters (AdminCharacters) and
  /admin/characters/:serial (AdminCharacter, in-shell sheet), using the admin
  self-service scope. api.admin.shard.* added.

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

client/src/App.jsx

@@ -36,6 +36,8 @@ 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 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 AccountAdmin from './routes/admin/views/AccountAdmin.jsx'
@@ -118,6 +120,8 @@ export default function App() {
             <Route path="bot-activity" element={<BotActivityAdmin />} />
             <Route path="discord-bot" element={<DiscordBotAdmin />} />
             <Route path="shard" element={<ShardAdmin />} />
+            <Route path="characters" element={<AdminCharacters />} />
+            <Route path="characters/:serial" element={<AdminCharacter />} />
             <Route path="auth-providers" element={<AuthProvidersAdmin />} />
             <Route path="users" element={<UsersAdmin />} />
             <Route path="account" element={<AccountAdmin />} />

client/src/api/client.js

@@ -214,6 +214,14 @@ 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)}`),
+    },
+
     // ----- auth providers / SSO config (admin only) -----
     listAuthProviders: () => req('/admin/auth/providers'),
     createAuthProvider: (data) => req('/admin/auth/providers', { method: 'POST', body: data }),

client/src/components/GameAccounts.jsx

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Loading, ErrorState } from './PageState.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
+// object with { link, accounts, roster } (player or admin self-service); `charTo`
+// maps a serial to the route for that character's sheet.
+
+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>
+  )
+}
+
+export default function GameAccounts({ scope, charTo }) {
+  const [accounts, setAccounts] = useState(null)
+  const [error, setError] = useState('')
+
+  const load = useCallback(async () => {
+    setError('')
+    try {
+      setAccounts(await scope.accounts())
+    } catch {
+      setError('Could not load your game accounts.')
+    }
+  }, [scope])
+  useEffect(() => { load() }, [load])
+
+  if (error) return <ErrorState message={error} />
+  if (!accounts) return <Loading />
+
+  // Not linked yet — prompt to link.
+  if (accounts.length === 0) {
+    return (
+      <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 }}>
+          You haven’t linked a game account yet. 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>
+    )
+  }
+
+  // Linked — characters grouped by account.
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
+      {accounts.map((a) => (
+        <section key={a.account}>
+          <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>
+            {a.account}
+          </div>
+          <AccountRoster scope={scope} account={a.account} charTo={charTo} />
+        </section>
+      ))}
+      <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 />
+      </section>
+    </div>
+  )
+}

client/src/routes/admin/AdminLayout.jsx

@@ -79,6 +79,7 @@ const NAV = [
   },
   {
     items: [
+      { to: '/admin/characters', label: 'My Characters', icon: IconShard },
       { to: '/admin/account', label: 'Account', icon: IconUser },
     ],
   },
@@ -98,6 +99,7 @@ const TITLES = {
   '/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/account': 'Account Security',
@@ -123,7 +125,11 @@ 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'
+        : '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)'

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

@@ -0,0 +1,27 @@
+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 character sheet inside the admin shell. Character data is
+// public MMO data, so it uses the same cached public endpoint.
+export default function AdminCharacter() {
+  const { serial } = useParams()
+  const { loading, error, data } = useAsync(() => api.shard.char(serial), [serial])
+  const restarting = error && error.status === 503
+
+  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." />}
+      {error && !restarting && <ErrorState message="Could not load that character right now." />}
+      {!loading && !error && data && <CharacterSheet char={data} />}
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import GameAccounts from '../../../components/GameAccounts.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.
+export default function AdminCharacters() {
+  return (
+    <section style={{ maxWidth: 760 }}>
+      <p className="sans" style={{ marginTop: 0, marginBottom: 22, color: 'var(--muted)', fontSize: '0.92rem', lineHeight: 1.6 }}>
+        Link your own game account to view your characters, stats, skills and vendors.
+      </p>
+      <GameAccounts scope={api.admin.shard} charTo={(serial) => `/admin/characters/${serial}`} />
+    </section>
+  )
+}

client/src/routes/player/PlayerCharacters.jsx

@@ -1,166 +1,13 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { Loading, ErrorState } from '../../components/PageState.jsx'
+import GameAccounts from '../../components/GameAccounts.jsx'
 import { api } from '../../api/client.js'
 
-// One-time-code linking form (shared by the empty state and "add another").
-function LinkForm({ 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 api.player.shard.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>
-  )
-}
-
-// Roster of one linked account → character cards linking to the sheet.
-function AccountRoster({ account }) {
-  const [roster, setRoster] = useState(null)
-  const [error, setError] = useState('')
-  const [unavailable, setUnavailable] = useState(false)
-
-  const load = useCallback(async () => {
-    setError(''); setUnavailable(false)
-    try {
-      setRoster(await api.player.shard.roster(account))
-    } catch (err) {
-      if (err.status === 503) setUnavailable(true)
-      else setError(err.message || 'Could not load this account.')
-    }
-  }, [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={`/player/char/${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>
-  )
-}
-
+// The logged-in player's characters. Shows the link prompt when no game account
+// is linked, otherwise their characters grouped by account (shared component).
 export default function PlayerCharacters() {
-  const [accounts, setAccounts] = useState(null)
-  const [error, setError] = useState('')
-
-  const load = useCallback(async () => {
-    setError('')
-    try {
-      setAccounts(await api.player.shard.accounts())
-    } catch {
-      setError('Could not load your game accounts.')
-    }
-  }, [])
-  useEffect(() => { load() }, [load])
-
-  if (error) return <ErrorState message={error} />
-  if (!accounts) return <Loading />
-
-  // Not linked yet — prompt to link.
-  if (accounts.length === 0) {
-    return (
-      <div>
-        <h1 className="display" style={{ margin: '0 0 6px', fontSize: '1.6rem', color: 'var(--head)' }}>Your characters</h1>
-        <p className="sans" style={{ margin: '0 0 22px', color: 'var(--muted)', fontSize: '0.92rem', lineHeight: 1.6 }}>
-          You haven’t linked a game account yet. Link one to see your characters, stats, skills and vendors here.
-        </p>
-        <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 }}>
-            In game, type <code style={{ color: 'var(--head)' }}>[link</code> to get a one-time code, then enter it below.
-          </p>
-          <LinkForm onLinked={load} />
-        </div>
-      </div>
-    )
-  }
-
-  // Linked — show characters grouped by account.
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
-        <h1 className="display" style={{ margin: 0, fontSize: '1.6rem', color: 'var(--head)' }}>Your characters</h1>
-      </div>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
-        {accounts.map((a) => (
-          <section key={a.account}>
-            <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>
-              {a.account}
-            </div>
-            <AccountRoster account={a.account} />
-          </section>
-        ))}
-      </div>
-
-      <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
-        <div className="field-label" style={{ marginBottom: 10 }}>Link another account</div>
-        <LinkForm onLinked={load} compact />
-      </section>
+      <h1 className="display" style={{ margin: '0 0 18px', fontSize: '1.6rem', color: 'var(--head)' }}>Your characters</h1>
+      <GameAccounts scope={api.player.shard} charTo={(serial) => `/player/char/${serial}`} />
     </div>
   )
 }