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/pages/ScenarioEditor.jsx

@@ -79,19 +79,31 @@ export default function ScenarioEditor() {
   }
 
   if (!scenario) return null
+  // Shared demo scenarios (Phase 8) are visible to everyone but owned by no
+  // one; the backend rejects edits, so present them read-only.
+  const readOnly = !!scenario.is_public
 
   return (
     <div className="page">
       <div className="page-header">
-        <h1>Edit Scenario</h1>
+        <h1>{readOnly ? 'Scenario (read-only)' : 'Edit Scenario'}</h1>
         <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
           <span style={{ color: 'var(--text-dim)', fontSize: '0.85rem' }}>{status}</span>
           <button onClick={exportScenario}>Export</button>
-          <button className="danger" onClick={deleteScenario}>Delete</button>
+          {!readOnly && <button className="danger" onClick={deleteScenario}>Delete</button>}
           <button className="primary" onClick={play}>Play</button>
         </div>
       </div>
 
+      {readOnly && (
+        <div className="demo-banner">
+          This is a shared demo scenario — it can’t be edited, but you can hit
+          <strong> Play</strong> to start your own adventure from it, or <strong>Export</strong> and
+          re-import it as your own copy.
+        </div>
+      )}
+
+      <fieldset disabled={readOnly} style={{ border: 'none', padding: 0, margin: 0, minWidth: 0 }}>
       <Field label="Title" value={scenario.title} onChange={(v) => setField('title', v)} />
       <Field label="Description" value={scenario.description} onChange={(v) => setField('description', v)}
         textarea placeholder="Shown in the scenario list; not sent to the AI." />
@@ -139,6 +151,7 @@ export default function ScenarioEditor() {
           </label>
         ))
       )}
+      </fieldset>
     </div>
   )
 }

frontend/src/pages/Scenarios.jsx

@@ -115,6 +115,7 @@ export default function Scenarios() {
               <h3>{sc.title}</h3>
               <p>{sc.description || 'No description'}</p>
               <div className="meta">
+                {sc.is_public && <span className="tag small" title="Shared demo scenario (read-only)">demo ✦</span>}
                 {splitTags(sc.tags).map((tag) => (
                   <span key={tag} className="tag small">{tag}</span>
                 ))}

frontend/src/pages/Settings.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { useOutletContext } from 'react-router-dom'
 import { api } from '../api'
 
 function DebugLog() {
@@ -45,7 +46,11 @@ function DebugLog() {
 }
 
 export default function Settings() {
+  const { me, setMe } = useOutletContext() ?? {}
   const [settings, setSettings] = useState(null)
+  // The API key is write-only: the server only reports has_api_key, and this
+  // holds whatever new key the user has typed (empty = leave unchanged).
+  const [apiKey, setApiKey] = useState('')
   const [testResult, setTestResult] = useState(null)
   const [saved, setSaved] = useState('')
 
@@ -55,9 +60,24 @@ export default function Settings() {
 
   const setField = (field, value) => setSettings({ ...settings, [field]: value })
 
+  const buildPayload = () => {
+    const { has_api_key: _hasKey, ...payload } = settings
+    if (apiKey.trim()) payload.api_key = apiKey.trim()
+    return payload
+  }
+
+  const afterSave = async () => {
+    const fresh = await api.getSettings()
+    setSettings(fresh)
+    setApiKey('')
+    if (me?.multi_user) api.getMe().then(setMe).catch(() => {}) // demo banner state
+    return fresh
+  }
+
   const save = async () => {
     try {
-      await api.updateSettings(settings)
+      await api.updateSettings(buildPayload())
+      await afterSave()
       setSaved('Settings saved')
     } catch (err) {
       setSaved(`Save failed: ${err.message}`)
@@ -65,10 +85,22 @@ export default function Settings() {
     setTimeout(() => setSaved(''), 4000)
   }
 
+  const clearKey = async () => {
+    try {
+      await api.updateSettings({ api_key: '' })
+      await afterSave()
+      setSaved('API key removed')
+    } catch (err) {
+      setSaved(`Failed: ${err.message}`)
+    }
+    setTimeout(() => setSaved(''), 4000)
+  }
+
   const test = async () => {
     setTestResult({ pending: true })
     try {
-      await api.updateSettings(settings)
+      await api.updateSettings(buildPayload())
+      await afterSave()
       setTestResult(await api.testConnection())
     } catch (err) {
       setTestResult({ ok: false, detail: err.message })
@@ -76,6 +108,7 @@ export default function Settings() {
   }
 
   if (!settings) return null
+  const demo = me?.demo
 
   return (
     <div className="page" style={{ maxWidth: 640 }}>
@@ -84,6 +117,14 @@ export default function Settings() {
         <span style={{ color: 'var(--text-dim)', fontSize: '0.85rem' }}>{saved}</span>
       </div>
 
+      {demo?.using_demo && (
+        <div className="demo-banner">
+          <strong>Using the shared demo key</strong> — {demo.turns_left} of {demo.turns_per_day} free
+          turns left today (model: {demo.model}). Add your own API key below for unlimited play,
+          your choice of models, and the memory bank.
+        </div>
+      )}
+
       <label className="field">
         <span className="label">Endpoint URL (OpenAI-compatible)</span>
         <input type="text" value={settings.endpoint_url}
@@ -91,10 +132,15 @@ export default function Settings() {
           onChange={(e) => setField('endpoint_url', e.target.value)} />
       </label>
       <label className="field">
-        <span className="label">API Key</span>
-        <input type="password" value={settings.api_key}
-          placeholder="Leave empty for local endpoints"
-          onChange={(e) => setField('api_key', e.target.value)} />
+        <span className="label">API Key {settings.has_api_key ? '(saved — enter a new one to replace it)' : ''}</span>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <input type="password" value={apiKey} style={{ flex: 1 }}
+            placeholder={settings.has_api_key ? '••••••••••••' : 'Leave empty for local endpoints'}
+            onChange={(e) => setApiKey(e.target.value)} />
+          {settings.has_api_key && (
+            <button type="button" onClick={clearKey}>Remove key</button>
+          )}
+        </div>
       </label>
       <label className="field">
         <span className="label">Model</span>
@@ -188,7 +234,8 @@ export default function Settings() {
         </div>
       )}
 
-      <DebugLog />
+      {/* The provider debug log is a single global buffer — local installs only. */}
+      {me?.multi_user !== true && <DebugLog />}
     </div>
   )
 }