NPC editor, NPC tokens from library, admin management

- NPC library (own + shared) built on the character wizard with a free NPC preset
- NPC tokens in map editor and lobby, DM sheet on token click, DM checks for NPCs
- Admins can promote/demote other users

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

frontend/src/App.jsx

@@ -27,6 +27,7 @@ export default function App() {
   const [error, setError] = useState('')
   // Used to load a saved character into the creator
   const [loadRequest, setLoadRequest] = useState(null)
+  const [npcLoad, setNpcLoad] = useState(null)
   const [charName, setCharName] = useState('') // name of the character being worked on, shown in the nav
 
   // Ask the server who we are; any later 401 (session expired) sends us back to the login
@@ -55,7 +56,7 @@ export default function App() {
   if (!auth.user) return <main><Login registrationOpen={auth.registration_open} onDone={(u) => setAuth({ ...auth, user: u })} /></main>
 
   const page = hash.split('/')[0]
-  const nav = [['creator', charName ? `Character: ${charName}` : 'Character'], ['rules', 'Rules'], ['presets', 'Presets'], ['maps', 'Maps'], ['characters', 'My characters'], ['lobbies', 'Lobbies'], ...(auth.user.admin ? [['editor', 'Editor']] : [])]
+  const nav = [['creator', charName ? `Character: ${charName}` : 'Character'], ['rules', 'Rules'], ['presets', 'Presets'], ['maps', 'Maps'], ['characters', 'My characters'], ['npcs', 'NPCs'], ['lobbies', 'Lobbies'], ...(auth.user.admin ? [['editor', 'Editor']] : [])]
 
   return (
     <>
@@ -81,6 +82,11 @@ export default function App() {
           <Characters onOpen={(entry) => { setLoadRequest(entry); window.location.hash = 'creator' }}
             onNew={() => { setLoadRequest({ new: true }); window.location.hash = 'creator' }} />
         )}
+        {rules && page === 'npcs' && (
+          <Characters npc onOpen={(entry) => { setNpcLoad(entry); window.location.hash = 'npc' }}
+            onNew={() => { setNpcLoad({ new: true }); window.location.hash = 'npc' }} />
+        )}
+        {rules && page === 'npc' && <Creator npc rules={rules} user={username} loadRequest={npcLoad} clearLoad={() => setNpcLoad(null)} onName={() => {}} />}
         {rules && page === 'lobbies' && (
           <Lobbies section={hash.split('/')[1]} rules={rules} user={username} onOpen={(entry) => { setLoadRequest(entry); window.location.hash = 'creator' }} />
         )}

frontend/src/Characters.jsx

@@ -19,7 +19,7 @@ function SharePanel({ c, reload }) {
 
   return (
     <div className="sharepanel">
-      <p className="small muted">These users can view this character (read-only), for example your DM:</p>
+      <p className="small muted">These users can view this entry (read-only), for example another DM:</p>
       <div className="chips">
         {c.shared_with.length === 0 && <span className="small muted">Nobody yet.</span>}
         {c.shared_with.map((u) => (
@@ -35,12 +35,13 @@ function SharePanel({ c, reload }) {
   )
 }
 
-export default function Characters({ onOpen, onNew }) {
+export default function Characters({ onOpen, onNew, npc = false }) {
+  const what = npc ? 'NPC' : 'character'
   const [data, setData] = useState(null)
   const [open, setOpen] = useState(null) // id of the character whose share panel is open
   const [err, setErr] = useState('')
 
-  const load = () => fetch('/api/characters').then((r) => r.json()).then(setData).catch(() => setErr('Could not load your characters.'))
+  const load = () => fetch(npc ? '/api/characters?npc=1' : '/api/characters').then((r) => r.json()).then(setData).catch(() => setErr('Could not load the list.'))
   useEffect(() => { load() }, [])
 
   const remove = async (c) => {
@@ -49,32 +50,46 @@ export default function Characters({ onOpen, onNew }) {
     if (!r || !r.ok) return setErr('Deleting failed.')
     load()
   }
+  const copy = async (c) => {
+    const r = await fetch(`/api/characters/${c.id}`).catch(() => null)
+    if (!r || !r.ok) return setErr('Duplicating failed.')
+    const data = await r.json()
+    const p = await fetch('/api/characters', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...data, name: `${data.name || 'NPC'} (copy)` }) }).catch(() => null)
+    if (!p || !p.ok) return setErr('Duplicating failed.')
+    load()
+  }
+  const kindName = (k) => ({ npc: 'NPC', enemy: 'Enemy', monster: 'Monster', creature: 'Creature', animal: 'Animal', robot: 'Robot / machine' })[k] || ''
+  const thumb = (c) => c.portrait ? <img className="npcthumb" src={`/api/characters/${c.id}/portrait?v=${c.portrait}`} alt="" /> : <span className="npcthumb none" aria-hidden="true">{npc ? '?' : ''}</span>
   const when = (t) => new Date(t * 1000).toLocaleString('en-GB')
 
   return (
     <section className="page narrow">
       <div className="row">
-        <h1>My characters</h1>
-        <button onClick={onNew}>+ New character</button>
+        <h1>{npc ? 'NPCs and creatures' : 'My characters'}</h1>
+        <button onClick={onNew}>{npc ? '+ New NPC' : '+ New character'}</button>
       </div>
       <p className="muted">
-        These characters are saved in your account. Only you and the users you share a character with can see it.
-        Shared users can look at it but not change it.
+        {npc ? 'Your library of NPCs, enemies, monsters and creatures. Place them as tokens in the map editor or at the table; a DM sees their sheet by clicking the token. You can share NPCs with other DMs.'
+          : 'These characters are saved in your account. Only you and the users you share a character with can see it. Shared users can look at it but not change it.'}
       </p>
       {err && <p className="warn">{err}</p>}
-      {data && data.mine.length === 0 && <p className="card">Nothing saved yet. Use "New character", then click "Save" on the Summary page.</p>}
+      {data && data.mine.length === 0 && <p className="card">Nothing saved yet. Use "{npc ? 'New NPC' : 'New character'}", then click "{npc ? 'Save NPC' : 'Save'}" on the Summary page.</p>}
       <ul className="charlist">
         {(data?.mine || []).map((c) => (
           <li key={c.id} className="card">
             <div className="row">
-              <div>
-                <strong>{c.name}</strong>
+              <div className="npchead">
+                {thumb(c)}
+                <div>
+                <strong>{c.name}</strong>{npc && c.kind && <span className="badge">{kindName(c.kind)}</span>}
                 <div className="muted small">
                   ID {c.id} · {when(c.updated)}{c.shared_with.length > 0 && ` · shared with ${c.shared_with.join(', ')}`}
                 </div>
+                </div>
               </div>
               <div className="actions">
                 <button onClick={() => onOpen(c)}>Open</button>
+                {npc && <button className="ghost" onClick={() => copy(c)}>Duplicate</button>}
                 <button className="ghost" onClick={() => setOpen(open === c.id ? null : c.id)}>Share</button>
                 <button className="ghost danger" onClick={() => remove(c)}>Delete</button>
               </div>
@@ -90,9 +105,11 @@ export default function Characters({ onOpen, onNew }) {
           <ul className="charlist">
             {data.shared.map((c) => (
               <li key={c.id} className="card row">
-                <div>
-                  <strong>{c.name}</strong>
+                <div className="npchead">
+                  {thumb(c)}
+                  <div><strong>{c.name}</strong>
                   <div className="muted small">from {c.owner} · {when(c.updated)}</div>
+                  </div>
                 </div>
                 <div className="actions"><button onClick={() => onOpen(c)}>View</button></div>
               </li>

frontend/src/Creator.jsx

@@ -14,9 +14,13 @@ function readDraft(key) {
   try { return JSON.parse(localStorage.getItem(key)) } catch { return null }
 }
 
-export default function Creator({ rules: baseRules, user, loadRequest, clearLoad, onName }) {
-  const DRAFT = `aw_draft:${user}` // drafts are kept per account
-  const freshCharacter = () => applyPreset(emptyCharacter(baseRules), baseRules, baseRules.default_preset || 'standard')
+const NPC_KINDS = [['npc', 'NPC'], ['enemy', 'Enemy'], ['monster', 'Monster'], ['creature', 'Creature'], ['animal', 'Animal'], ['robot', 'Robot / machine']]
+
+export default function Creator({ rules: baseRules, user, loadRequest, clearLoad, onName, npc = false }) {
+  const DRAFT = `${npc ? 'aw_draft_npc' : 'aw_draft'}:${user}` // drafts are kept per account
+  const freshCharacter = () => npc
+    ? { ...applyPreset(emptyCharacter(baseRules), baseRules, 'npc'), npc: true, npc_kind: 'enemy', token_size: 1, abilities: '', loot: '' }
+    : applyPreset(emptyCharacter(baseRules), baseRules, baseRules.default_preset || 'standard')
   const [ch, setCh] = useState(() => {
     const d = readDraft(DRAFT)
     return d?.ch ? normalize(d.ch, baseRules) : freshCharacter()
@@ -58,7 +62,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
     if (!loadRequest) return
     if (loadRequest.new) { // "New character" button on the My characters page
       const untouched = JSON.stringify(ch) === JSON.stringify(freshCharacter()) && !saved
-      if (untouched || window.confirm('Start a new character? Your current draft is discarded unless you saved it.')) {
+      if (untouched || window.confirm('Start a new ' + (npc ? 'NPC' : 'character') + '? Your current draft is discarded unless you saved it.')) {
         setBoth(freshCharacter()); setSaved(null); setStep(0)
       }
       clearLoad()
@@ -74,7 +78,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
   // Direct link #creator/<id> (read only; saving creates a copy)
   useEffect(() => {
     const id = window.location.hash.split('/')[1]
-    if (!id || loadRequest) return
+    if (!id || loadRequest || npc) return
     fetch(`/api/characters/${id}`).then((r) => { if (!r.ok) throw new Error(); return r.json() })
       .then((data) => { setBoth(normalize(data, baseRules)); setSaved(null); setStep(7); setMsg('Shared character loaded. "Save" creates your own copy.') })
       .catch(() => setMsg('Character not found, or it is not shared with you.'))
@@ -94,7 +98,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
 
   const resetAll = () => {
     if (!window.confirm('Discard all input and start over?')) return
-    setBoth({ ...emptyCharacter(rules), preset: ch.preset, creation: ch.creation }); setSaved(null); setStep(0)
+    setBoth({ ...emptyCharacter(rules), preset: ch.preset, creation: ch.creation, ...(npc ? { npc: true, npc_kind: ch.npc_kind, token_size: ch.token_size, abilities: '', loot: '' } : {}) }); setSaved(null); setStep(0)
   }
   const resetThisStep = () => {
     if (!window.confirm(`Reset only the "${STEPS[step]}" page? Everything else is kept.`)) return
@@ -154,10 +158,25 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
   const stepConcept = (
     <>
       <h2>Concept</h2>
-      <div className="card presetbox">
+      {npc && (
+        <div className="card presetbox">
+          <div className="grid2">
+            <label>Type
+              <select value={ch.npc_kind || 'npc'} onChange={(e) => set({ npc_kind: e.target.value })}>
+                {NPC_KINDS.map(([id, label]) => <option key={id} value={id}>{label}</option>)}
+              </select>
+            </label>
+            <label>Token size (grid squares)
+              <input type="number" min="1" max="8" value={ch.token_size || 1} onChange={(e) => set({ token_size: Math.max(1, Math.min(8, Number(e.target.value) || 1)) })} />
+            </label>
+          </div>
+          <p className="small muted">NPCs use generous pools (attributes, skills, talents), so you can build anything from a rat to a boss.</p>
+        </div>
+      )}
+      {!npc && <div className="card presetbox">
         <label>Rules preset
           <select value={ch.preset} onChange={(e) => e.target.value !== 'custom' && setCh((x) => applyPreset(x, baseRules, e.target.value))}>
-            {(baseRules.presets || []).map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            {(baseRules.presets || []).filter((p) => !p.npc).map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
             {ch.preset === 'custom' && <option value="custom">Custom</option>}
           </select>
         </label>
@@ -167,11 +186,11 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
           return diff.length > 0 && <p className="small muted">Differs from Standard: {diff.map((x) => `${x.label} ${cr[x.key]}`).join(' · ')}</p>
         })()}
         <p className="small">Create or edit presets on the <a href="#presets">Presets</a> page.</p>
-      </div>
+      </div>}
       <div className="card portraitbox"><PortraitEditor value={ch.portrait} onChange={(p) => set({ portrait: p })} /></div>
       <div className="grid2">
-        <label>Character name<input value={ch.name} onChange={(e) => set({ name: e.target.value })} /></label>
-        <label>Player<input value={ch.player} onChange={(e) => set({ player: e.target.value })} /></label>
+        <label>{npc ? 'NPC name' : 'Character name'}<input value={ch.name} onChange={(e) => set({ name: e.target.value })} /></label>
+        {!npc && <label>Player<input value={ch.player} onChange={(e) => set({ player: e.target.value })} /></label>}
       </div>
       <div className="grid2">
         <label>Class (optional)
@@ -189,7 +208,9 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
       </div>
       {sub && <p className="small muted">{sub.desc}</p>}
       <label>Concept in one sentence<input value={ch.concept} onChange={(e) => set({ concept: e.target.value })} placeholder="e.g. Former militia fighter searching for his family" /></label>
-      <label>Background<textarea rows="5" value={ch.background} onChange={(e) => set({ background: e.target.value })} /></label>
+      <label>{npc ? 'Description' : 'Background'}<textarea rows="5" value={ch.background} onChange={(e) => set({ background: e.target.value })} /></label>
+      {npc && <label>Special abilities and attacks<textarea rows="5" value={ch.abilities || ''} onChange={(e) => set({ abilities: e.target.value })} placeholder="e.g. Bite 2d6, poison spit (range 10, VIT check or poisoned), regenerates 2 HP per round" /></label>}
+      {npc && <label>Loot and drops<textarea rows="3" value={ch.loot || ''} onChange={(e) => set({ loot: e.target.value })} placeholder="e.g. 2 scrap, hide, rusty knife" /></label>}
     </>
   )
 
@@ -419,6 +440,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
   )
 
   const warnings = []
+  if (npc) { if (c.attrLeft < 0) warnings.push('Too many attribute points spent.'); if (c.skillLeft < 0) warnings.push('More skill points spent than the pool allows.') } else {
   if (c.attrLeft < 0) warnings.push('Too many attribute points spent.')
   if (c.attrLeft > 0) warnings.push(`${c.attrLeft} attribute points left.`)
   if (!ch.profession) warnings.push('No profession chosen.')
@@ -432,6 +454,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
   if (ch.talents.length < cr.talents_min) warnings.push('No starting talent chosen.')
   if (over) warnings.push('Augmentation Capacity exceeded.')
   if (overWeight) warnings.push('Carrying more than the carry capacity.')
+  }
 
   const gearLines = kitItems(ch, rules)
   const stepSummary = (
@@ -440,14 +463,14 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
       {warnings.length > 0 && <ul className="warn">{warnings.map((w) => <li key={w}>{w}</li>)}</ul>}
       <PaperSheet data={ch} baseRules={baseRules} />
       <div className="actions wrap">
-        <button onClick={() => download('pdf')}>Download as PDF</button>
-        <button onClick={() => download('docx')}>Download as Word</button>
-        <button className="ghost" onClick={save}>{saved ? 'Save changes' : 'Save on server'}</button>
+        {!npc && <button onClick={() => download('pdf')}>Download as PDF</button>}
+        {!npc && <button onClick={() => download('docx')}>Download as Word</button>}
+        <button className="ghost" onClick={save}>{saved ? 'Save changes' : npc ? 'Save NPC' : 'Save on server'}</button>
         <button className="ghost" onClick={exportJson}>JSON backup</button>
         <button className="ghost" onClick={() => fileRef.current.click()}>Import JSON</button>
         <input ref={fileRef} type="file" accept="application/json" hidden onChange={importJson} />
       </div>
-      {saved && (
+      {saved && !npc && (
         <p className="small muted">Share link (view only): <code>{`${window.location.origin}/#creator/${saved.id}`}</code></p>
       )}
     </>
@@ -457,7 +480,7 @@ export default function Creator({ rules: baseRules, user, loadRequest, clearLoad
 
   return (
     <div className="page creator">
-      <p className="small muted presetchip">Rules: <button className="linklike" onClick={() => go(0)} title="Change on the Concept page">{ch.preset === 'custom' ? 'Custom' : baseRules.presets?.find((p) => p.id === ch.preset)?.name}</button></p>
+      {!npc && <p className="small muted presetchip">Rules: <button className="linklike" onClick={() => go(0)} title="Change on the Concept page">{ch.preset === 'custom' ? 'Custom' : baseRules.presets?.find((p) => p.id === ch.preset)?.name}</button></p>}
       <ol className="steps">
         {STEPS.map((s, i) => (
           <li key={s}><button className={`${i === step ? 'on' : ''} ${i < step ? 'done' : ''}`} onClick={() => go(i)}>

frontend/src/Editor.jsx

@@ -65,6 +65,42 @@ function Field({ f, value, onChange }) {
   )
 }
 
+// Admins can make other accounts admins (and take it away again)
+function AdminUsers() {
+  const [users, setUsers] = useState(null)
+  const [err, setErr] = useState('')
+  const [open, setOpen] = useState(false)
+  const load = () => fetch('/api/admin/users').then((r) => (r.ok ? r.json() : Promise.reject())).then(setUsers).catch(() => setErr('Could not load the users.'))
+  useEffect(() => { if (open && !users) load() }, [open]) // eslint-disable-line
+  const set = async (u, admin) => {
+    setErr('')
+    const r = await fetch(`/api/admin/users/${encodeURIComponent(u.username)}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ admin }) })
+    if (!r.ok) setErr((await r.json().catch(() => ({}))).detail || 'That did not work.')
+    load()
+  }
+  return (
+    <div className="card adminusers">
+      <button className="linklike" aria-expanded={open} onClick={() => setOpen(!open)}>{open ? '▾' : '▸'} Users and admins</button>
+      {open && (
+        <>
+          <p className="small muted">Admins can use this editor and make other users admins. Admins named in <code>AW_ADMINS</code> on the server can only be changed there.</p>
+          {err && <p className="warn small">{err}</p>}
+          <ul className="userlist">
+            {(users || []).map((u) => (
+              <li key={u.username} className="row">
+                <span><strong>{u.username}</strong>{u.me ? ' (you)' : ''} {u.admin && <span className="chip on">admin</span>}{u.fixed && <span className="muted small"> set on the server</span>}</span>
+                {u.admin
+                  ? <button className="ghost" disabled={u.fixed} onClick={() => window.confirm(`Take admin rights from ${u.username}?`) && set(u, false)}>Remove admin</button>
+                  : <button className="ghost" onClick={() => window.confirm(`Make ${u.username} an admin? Admins can change the rules and make others admins.`) && set(u, true)}>Make admin</button>}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+
 export default function Editor({ rules, onReload }) {
   const [state, setState] = useState(null)
   const [tab, setTab] = useState('equipment')
@@ -139,6 +175,7 @@ export default function Editor({ rules, onReload }) {
       <h1>Rules editor</h1>
       <p className="muted small">Changes are stored next to the database and replace the entries of rules.json for that list; the shipped file stays as it is.
         Existing characters keep working. Talents, mutations and implants are still edited in rules.json.</p>
+      <AdminUsers />
       <div className="tabs" role="tablist">
         {Object.entries(D).map(([id, x]) => (
           <button key={id} role="tab" aria-selected={tab === id} className={tab === id ? 'on' : ''} onClick={() => { setTab(id); setEditing(''); setQ(''); setMsg({ text: '', bad: false }) }}>

frontend/src/Lobbies.jsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import PaperSheet, { ThemeSwitch } from './PaperSheet.jsx'
 import { sound, playRoll, preload, DEFAULT_ROLL } from './sound.js'
-import { MapView, MapLibrary, TokenForm, WallLayer } from './MapView.jsx'
+import { MapView, MapLibrary, NpcPicker, TokenForm, WallLayer } from './MapView.jsx'
 
 const J = { 'Content-Type': 'application/json' }
 const send = (url, method, body) => fetch(url, { method, headers: J, body: body === undefined ? undefined : JSON.stringify(body) })
@@ -680,6 +680,12 @@ function LobbyView({ id, rules, user }) {
     setMapState((m) => ({ ...m, tokens: m.tokens.map((t) => (t.id === tid ? { ...t, ...p } : t)) }))
     return send(`/api/lobbies/${id}/tokens/${tid}`, 'PUT', p).catch(() => null)
   }
+  const [npcPick, setNpcPick] = useState(false)
+  const addNpcToken = (n) => {
+    const m = mapState.map
+    setNpcPick(false)
+    send(`/api/lobbies/${id}/tokens`, 'POST', { name: n.name, npc_id: n.id, x: m.w / 2, y: m.h / 2, size: n.size || 1, color: '#c0392b' }).then((r) => r.json()).then((d) => d.id && setMapSel(d.id)).catch(() => {})
+  }
   const addToken = () => {
     const m = mapState.map, n = mapState.tokens.filter((t) => t.kind === 'npc').length + 1
     send(`/api/lobbies/${id}/tokens`, 'POST', { name: `Enemy ${n}`, x: m.w / 2, y: m.h / 2, size: 1, color: '#c0392b' }).then((r) => r.json()).then((d) => d.id && setMapSel(d.id)).catch(() => {})
@@ -692,6 +698,7 @@ function LobbyView({ id, rules, user }) {
   const people = [lobby.dm, ...lobby.members.map((m) => m.username)]
   const sheets = lobby.members.filter((m) => m.character_id) // the server only gives out ids the viewer may open
   const cur = sheets.find((m) => m.username === sel) || sheets.find((m) => m.me) || sheets[0]
+  const npcTok = lobby.is_dm && !viewAs ? mapState.tokens.find((t) => t.id === mapSel && t.kind === 'npc' && t.npc_id) : null
   const dest = people.includes(to) ? to : ''
   const canCheck = !!(me && me.character_id)
   lobby.setMod = (u, v) => act(`/api/lobbies/${id}/members/${encodeURIComponent(u)}/mod`, 'PUT', { mod: parseInt(v, 10) || 0 })
@@ -708,13 +715,13 @@ function LobbyView({ id, rules, user }) {
     if (own) return setPending({ type: 'dice', sides, count })
     post(`/api/lobbies/${id}/rolls`, { sides, count, to: dest, ...(lobby.is_dm ? { mode } : {}) })
   }
-  const check = (kind, cid, name) => {
+  const check = (kind, cid, name, npcToken) => {
     if (busy) return
-    if (own) return setPending({ type: 'check', kind, id: cid, name })
-    post(`/api/lobbies/${id}/checks`, { kind, id: cid, to: dest === user ? user : '' })
+    if (own) return setPending({ type: 'check', kind, id: cid, name, npcToken })
+    post(`/api/lobbies/${id}/checks`, { kind, id: cid, to: dest === user ? user : '', ...(npcToken ? { npc_token: npcToken } : {}) })
   }
   const submitManual = (vals) => {
-    if (pending.type === 'check') post(`/api/lobbies/${id}/checks`, { kind: pending.kind, id: pending.id, manual: vals[0], to: dest === user ? user : '' }, () => setPending(null))
+    if (pending.type === 'check') post(`/api/lobbies/${id}/checks`, { kind: pending.kind, id: pending.id, manual: vals[0], to: dest === user ? user : '', ...(pending.npcToken ? { npc_token: pending.npcToken } : {}) }, () => setPending(null))
     else post(`/api/lobbies/${id}/rolls`, { sides: pending.sides, count: pending.count, to: dest, manual: vals, ...(lobby.is_dm ? { mode } : {}) }, () => setPending(null))
   }
 
@@ -737,7 +744,7 @@ function LobbyView({ id, rules, user }) {
             <div className="sheetbar">
               {lobby.is_dm ? (
                 <span className="seg" role="tablist">
-                  <button role="tab" className={leftTab === 'sheet' ? 'on' : 'ghost'} aria-selected={leftTab === 'sheet'} onClick={() => setLeftTab('sheet')}>Sheet{cur ? `: ${cur.character.name}` : ''}</button>
+                  <button role="tab" className={leftTab === 'sheet' ? 'on' : 'ghost'} aria-selected={leftTab === 'sheet'} onClick={() => setLeftTab('sheet')}>Sheet{npcTok ? `: ${npcTok.name}` : cur ? `: ${cur.character.name}` : ''}</button>
                   <button role="tab" className={leftTab === 'lobby' ? 'on' : 'ghost'} aria-selected={leftTab === 'lobby'} onClick={() => setLeftTab('lobby')}>Lobby actions</button>
                 </span>
               ) : <b>{cur ? cur.character.name : 'Character sheet'}</b>}
@@ -745,6 +752,7 @@ function LobbyView({ id, rules, user }) {
             </div>
             {lobby.is_dm && leftTab === 'lobby'
               ? <><MapLibrary activeId={mapState.map?.id} lobbyId={id} act={act} /><SoundSettings lobby={lobby} id={id} act={act} sfx={sfx.current} /><Settings inline lobby={lobby} id={id} mine={mine} act={act} setInfo={setInfo} /></>
+              : npcTok ? <CharTab key={`npc${npcTok.npc_id}`} cid={npcTok.npc_id} rules={rules} tick={sheetTick.cid === npcTok.npc_id ? sheetTick.n : 0} onRoll={(k, i, n) => check(k, i, n, npcTok.id)} />
               : cur ? <CharTab key={cur.character_id} cid={cur.character_id} rules={rules} tick={sheetTick.cid === cur.character_id ? sheetTick.n : 0} onRoll={cur.me && canCheck ? check : undefined} />
                 : <p className="muted small">{lobby.is_dm ? 'Pick a character in the bar to look at its sheet.' : 'You have no character in this lobby.'}</p>}
           </div>
@@ -752,7 +760,7 @@ function LobbyView({ id, rules, user }) {
 
         <div className="playarea">
           {!sheetOpen && <button className="ghost showsheet" onClick={() => { setSheetOpen(true); store('aw_sheetopen', '1') }}>▶ Sheet</button>}
-          <CharBar lobby={lobby} sel={cur?.username} onSel={(u) => { setSel(u); setLeftTab('sheet') }} />
+          <CharBar lobby={lobby} sel={cur?.username} onSel={(u) => { setSel(u); setMapSel(null); setLeftTab('sheet') }} />
           <DifficultyBar lobby={lobby} onSet={(b) => act(`/api/lobbies/${id}/difficulty`, 'PUT', b)} />
           <div className="table">
             {showSettings && !lobby.is_dm && <Settings lobby={lobby} id={id} mine={mine} act={act} setInfo={setInfo} onClose={() => setShowSettings(false)} />}
@@ -761,7 +769,7 @@ function LobbyView({ id, rules, user }) {
               const selTok = lobby.is_dm ? mapState.tokens.find((t) => t.id === mapSel && t.kind === 'npc') : null
               const walls = full && showWalls ? mapState.walls || [] : []
               return (
-                <MapView map={mapState.map} image={mapImg} portraitUrl={(t) => t.portrait ? `/api/lobbies/${id}/portrait/${encodeURIComponent(t.username)}?v=${t.portrait}` : null} tokens={mapState.tokens} grid={showGrid}
+                <MapView map={mapState.map} image={mapImg} portraitUrl={(t) => t.portrait ? (t.kind === 'npc' ? `/api/lobbies/${id}/token-portrait/${t.id}?v=${t.portrait}` : `/api/lobbies/${id}/portrait/${encodeURIComponent(t.username)}?v=${t.portrait}`) : null} tokens={mapState.tokens} grid={showGrid}
                   onMove={moveToken} selected={mapSel} onSelect={setMapSel}
                   overlay={walls.length ? <WallLayer map={mapState.map} walls={walls} onDoor={(w) => act(`/api/lobbies/${id}/doors/${w.id}`, 'PUT', { open: !w.open }, () => loadMap())} /> : null}>
                   {mapState.vision?.empty && <div className="mapempty">{lobby.is_dm ? 'This player is not on the map yet. Switch to the full view and drag their token onto it.' : 'Waiting for the DM to put your token on the map.'}</div>}
@@ -775,8 +783,10 @@ function LobbyView({ id, rules, user }) {
                     {lobby.is_dm && mapState.walls?.length > 0 && <button className={mapState.los_on ? 'on' : 'ghost'} aria-pressed={!!mapState.los_on} onClick={() => act(`/api/lobbies/${id}/sight`, 'PUT', { on: !mapState.los_on }, () => loadMap())} title="Line of sight: players only see what their character can see">Sight {mapState.los_on ? 'on' : 'off'}</button>}
                     {full && mapState.walls?.length > 0 && <button className={showWalls ? 'on' : 'ghost'} aria-pressed={showWalls} onClick={() => setShowWalls(!showWalls)} title="Show walls and doors (click a door to open or close it)">Walls</button>}
                     <button className={showGrid ? 'on' : 'ghost'} aria-pressed={showGrid} onClick={() => setShowGrid(!showGrid)}>Grid</button>
-                    {full && <button className="ghost" onClick={addToken}>+ NPC</button>}
+                    {full && <button className="ghost" onClick={addToken}>+ Token</button>}
+                    {full && <button className={npcPick ? 'on' : 'ghost'} onClick={() => setNpcPick(!npcPick)}>+ NPC</button>}
                   </div>
+                  {npcPick && <div className="mapui npcpickwrap"><NpcPicker onPick={addNpcToken} onClose={() => setNpcPick(false)} /></div>}
                   {selTok && <div className="tokenpanel mapui"><TokenForm t={selTok} onChange={(p) => patchToken(selTok.id, p)} onDelete={() => { send(`/api/lobbies/${id}/tokens/${selTok.id}`, 'DELETE'); setMapSel(null) }} /></div>}
                 </MapView>
               )

frontend/src/MapView.jsx

@@ -165,6 +165,30 @@ export function TokenForm({ t, onChange, onDelete, onDuplicate }) {
   )
 }
 
+// Picks an NPC from the library (own and shared). onPick(npc) gets {id, name, kind, size, portrait}.
+export function NpcPicker({ onPick, onClose }) {
+  const [list, setList] = useState(null)
+  const [q, setQ] = useState('')
+  useEffect(() => { fetch('/api/characters?npc=1').then((r) => r.json()).then((d) => setList([...d.mine, ...d.shared])).catch(() => setList([])) }, [])
+  const shown = (list || []).filter((n) => n.name.toLowerCase().includes(q.toLowerCase()))
+  return (
+    <div className="npcpicker card" role="dialog" aria-label="NPC library">
+      <div className="row"><strong>NPC library</strong><button className="ghost" onClick={onClose} aria-label="Close">×</button></div>
+      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search" aria-label="Search NPCs" />
+      <ul className="npcpick">
+        {list === null && <li className="muted small">Loading …</li>}
+        {list && !list.length && <li className="muted small">No NPCs yet. Create some on the <a href="#npcs">NPCs</a> page.</li>}
+        {shown.map((n) => (
+          <li key={n.id}><button className="ghost" onClick={() => onPick(n)}>
+            {n.portrait ? <img className="npcthumb" src={`/api/characters/${n.id}/portrait?v=${n.portrait}`} alt="" /> : <span className="npcthumb none" aria-hidden="true">?</span>}
+            <span>{n.name}{n.owner ? <span className="muted small"> · {n.owner}</span> : null}</span>
+          </button></li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
 const uid = () => Math.random().toString(36).slice(2, 12)
 
 // Walls and doors as a line layer on top of the map (DM only). In the live view doors can be clicked to open or close them.
@@ -229,6 +253,12 @@ export function MapEditor({ id, onClose }) {
   const cur = tokens.find((t) => t.id === sel)
   const patch = (tid, p) => { setTokens((ts) => ts.map((t) => (t.id === tid ? { ...t, ...p } : t))); setDirty(true) }
   const addWalls = (list) => { setWalls((w) => [...w, ...list.map((x) => ({ id: uid(), ...x }))]); setDirty(true) }
+  const [picker, setPicker] = useState(false)
+  const addNpc = (n) => {
+    const k = tokens.length + 1
+    const t = { id: uid(), kind: 'npc', can_move: true, name: n.name, npc_id: n.id, portrait: n.portrait || '', x: m.w / 2 + (k % 5) * gridNum, y: m.h / 2 + (k % 3) * gridNum, size: n.size || 1, color: COLORS[0], hidden: false }
+    setTokens([...tokens, t]); setSel(t.id); setDirty(true); setPicker(false)
+  }
   const add = () => {
     const n = tokens.length + 1
     const t = { id: uid(), kind: 'npc', can_move: true, name: `Enemy ${n}`, x: m.w / 2 + (n % 5) * gridNum, y: m.h / 2 + (n % 3) * gridNum, size: 1, color: COLORS[0], hidden: false }
@@ -263,7 +293,7 @@ export function MapEditor({ id, onClose }) {
     setErr('')
     const r = await fetch(`/api/maps/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name, grid: Number(grid), sight: Number(sight) || 0, walls,
-        tokens: tokens.map(({ id: i, name: n, x, y, size, color, hidden }) => ({ id: i, name: n, x, y, size, color, hidden })) }) })
+        tokens: tokens.map(({ id: i, name: n, x, y, size, color, hidden, npc_id }) => ({ id: i, name: n, x, y, size, color, hidden, npc_id })) }) })
     if (!r.ok) { setErr((await r.json().catch(() => ({}))).detail || 'Could not save'); return false }
     setDirty(false); return true
   }
@@ -296,9 +326,10 @@ export function MapEditor({ id, onClose }) {
         <label className="small">Sight range in squares (0 = unlimited)
           <input type="number" min="0" max="1000" value={sight} onChange={(e) => { setSight(e.target.value); setDirty(true) }} /></label>
         <h4>Enemies and NPCs</h4>
-        <button className="on" onClick={add}>+ Add token</button>
+        <div className="row"><button className="on" onClick={add}>+ Add token</button><button className="ghost" onClick={() => setPicker(!picker)}>+ From NPC library</button></div>
+        {picker && <NpcPicker onPick={addNpc} onClose={() => setPicker(false)} />}
         <ul className="tokenlist">
-          {tokens.map((t) => <li key={t.id}><button className={sel === t.id ? 'on' : 'ghost'} onClick={() => setSel(t.id)}><i style={{ background: t.color }} /> {t.name}{t.hidden ? ' (hidden)' : ''}</button></li>)}
+          {tokens.map((t) => <li key={t.id}><button className={sel === t.id ? 'on' : 'ghost'} onClick={() => setSel(t.id)}><i style={{ background: t.color }} /> {t.name}{t.npc_id ? ' ★' : ''}{t.hidden ? ' (hidden)' : ''}</button></li>)}
           {!tokens.length && <li className="muted small">None yet. Add a token, then drag it onto the map.</li>}
         </ul>
         {cur && <TokenForm t={cur} onChange={(p) => patch(cur.id, p)}
@@ -308,7 +339,7 @@ export function MapEditor({ id, onClose }) {
         <div className="row editactions"><button className="on" disabled={!dirty} onClick={save}>Save</button><button className="ghost" onClick={close}>Close</button></div>
       </aside>
       <div className="mapstage">
-        <MapView map={{ ...m, grid: gridNum }} image={image} tokens={tokens} grid={showGrid} selected={sel} onSelect={setSel} tool={tool}
+        <MapView map={{ ...m, grid: gridNum }} image={image} tokens={tokens} portraitUrl={(t) => (t.npc_id && t.portrait ? `/api/characters/${t.npc_id}/portrait?v=${t.portrait}` : null)} grid={showGrid} selected={sel} onSelect={setSel} tool={tool}
           onClick={click} onHover={draft ? (p, s) => setHover(p) : undefined}
           overlay={<WallLayer map={m} walls={walls} draft={draft} hover={draft ? hover : null} />}
           onMove={(tid, x, y) => { patch(tid, { x, y }); return Promise.resolve() }} />

frontend/src/PaperSheet.jsx

@@ -158,6 +158,13 @@ export default function PaperSheet({ data, baseRules, tools, bare, onRoll }) {
               ))}
             </div>
           </div>
+          {data.npc && (data.abilities || data.loot || data.background) && (
+            <div className="psec pnpc">
+              {data.background && <><h3>Description</h3><p className="pre">{data.background}</p></>}
+              {data.abilities && <><h3>Abilities and attacks</h3><p className="pre">{data.abilities}</p></>}
+              {data.loot && <><h3>Loot</h3><p className="pre">{data.loot}</p></>}
+            </div>
+          )}
           <div className="psec pnotes"><h3>Conditions &amp; notes</h3><div className="plines" /></div>
           <Foot n={1} />
         </section>

frontend/src/Presets.jsx

@@ -6,7 +6,7 @@ export default function Presets({ rules, reload }) {
   const [sel, setSel] = useState(rules.default_preset || 'standard')
   const [draft, setDraft] = useState(null) // preset being edited/created, null = viewing
   const [msg, setMsg] = useState('')
-  const presets = rules.presets || []
+  const presets = (rules.presets || []).filter((p) => !p.npc)
   const current = draft || presets.find((p) => p.id === sel) || presets[0]
   const editable = !!draft
   const own = !!current?.mine

frontend/src/styles.css

@@ -480,3 +480,18 @@ label.chk input[type=checkbox] { width: auto; margin: 0; }
 .pavatar { overflow: hidden; border: 2px solid var(--pc); }
 .pavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .maptoken .tokpic { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
+.adminusers { margin: .8rem 0; }
+.userlist { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .4rem; }
+.userlist li { justify-content: space-between; align-items: center; }
+.chip.on { display: inline-block; }
+
+.npchead { display: flex; align-items: center; gap: .7rem; }
+.npcthumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line, #444); flex: none; }
+.npcthumb.none { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--muted, #888); }
+.npchead .badge { margin-left: .5rem; }
+
+.npcpicker { display: grid; gap: .5rem; max-width: 320px; }
+.npcpick { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; display: grid; gap: .25rem; }
+.npcpick button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; }
+.npcpickwrap { position: absolute; top: 3rem; left: .5rem; z-index: 5; }
+.pnpc .pre { white-space: pre-wrap; margin: .1rem 0 .6rem; font-size: .85rem; }