Phase 8: optional accounts, per-user data, shared demo key

Guest-first multi-user mode behind AIDND_MULTI_USER (local installs
unchanged): signed-cookie guest sessions bootstrapped by /api/auth/me,
register upgrades the guest in place, login/logout, per-IP rate limits.
Every router scoped by user_id; Settings become per-user with the API
key Fernet-encrypted at rest and write-only through the API. Users
without a key get a server-funded demo key (OpenRouter free models,
20 turns/day, memory bank disabled on demo turns). Public read-only
demo scenarios (seed_demo.py); debug log restricted to local mode.
Frontend: auth modal + guest nudge, 401 re-establish/retry, demo
banner and key management in Settings.

Migrations 13-23 adopt existing data under a local user and encrypt
stored keys. Verified: migration on a copy of real data.db, two-session
isolation + register/login via curl and Chrome, demo cap 429, live
OpenRouter turn through the encrypted-key path, vite build + oxlint.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KFsGHju9szibJJa2YJcdbg

frontend/src/components.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { api } from './api'
 
 export function downloadJSON(obj, filename) {
   const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' })
@@ -75,6 +76,67 @@ export function PlaceholderModal({ title, names, onSubmit, onCancel }) {
   )
 }
 
+// Phase 8: register/login for the hosted multi-user mode. `onAuthed(me)` gets
+// the fresh /auth/me payload after success.
+export function AuthModal({ mode: initialMode, onClose, onAuthed }) {
+  const [mode, setMode] = useState(initialMode || 'register')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const registering = mode === 'register'
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setBusy(true)
+    setError('')
+    try {
+      const me = registering
+        ? await api.register(email, password)
+        : await api.login(email, password)
+      onAuthed(me, mode)
+    } catch (err) {
+      setError(err.message)
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
+        <h2>{registering ? 'Create an account' : 'Log in'}</h2>
+        <p className="modal-hint">
+          {registering
+            ? 'Everything you’ve played as a guest stays with your new account, and you can pick it up from any device.'
+            : 'Welcome back — log in to reach your adventures.'}
+        </p>
+        <label className="field">
+          <span className="label">Email</span>
+          <input type="email" autoFocus required value={email}
+            onChange={(e) => setEmail(e.target.value)} />
+        </label>
+        <label className="field">
+          <span className="label">Password{registering ? ' (at least 8 characters)' : ''}</span>
+          <input type="password" required minLength={registering ? 8 : undefined} value={password}
+            onChange={(e) => setPassword(e.target.value)} />
+        </label>
+        {error && <div className="test-error" style={{ marginTop: 4 }}>{error}</div>}
+        <div className="modal-buttons" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <button type="button" className="linklike" onClick={() => { setMode(registering ? 'login' : 'register'); setError('') }}>
+            {registering ? 'Have an account? Log in' : 'New here? Create an account'}
+          </button>
+          <div style={{ display: 'flex', gap: 10 }}>
+            <button type="button" onClick={onClose}>Cancel</button>
+            <button type="submit" className="primary" disabled={busy}>
+              {busy ? '…' : registering ? 'Sign up' : 'Log in'}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
 export function Field({ label, value, onChange, textarea, rows, placeholder }) {
   return (
     <label className="field">