@acms-subir/core 0.2.0 → 0.3.0

package/src/pages/admin/settings.astro

@@ -1,14 +1,15 @@
 ---
 import Admin from '../../layouts/Admin.astro';
+import AiSettings from '../../components/AiSettings';
 import { getRepo } from '../../lib/repo';
-import { verifySessionToken, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { validateSession, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
 import { invalidateRedirectCache } from '../../middleware';
 import { CONTENT } from '../../lib/content';
 import { UMAMI_ID_RE, META_PIXEL_ID_RE, TIKTOK_PIXEL_ID_RE, normalizeScriptUrl } from '../../lib/analytics';
 
 const repo = await getRepo(Astro.locals);
 
-const sessionUserId = verifySessionToken(Astro.cookies.get(SESSION_COOKIE)?.value);
+const sessionUserId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
 const sessionUser = sessionUserId && sessionUserId !== OWNER_ENV ? await repo.getUser(sessionUserId) : null;
 const isOwner = sessionUserId === OWNER_ENV || sessionUser?.role === 'owner';
 
@@ -32,9 +33,11 @@ function normalizeOrigin(value: string): string | null {
 
 let flash = '';
 let flashError = '';
+let postedAction = '';
 if (Astro.request.method === 'POST') {
   const form = await Astro.request.formData();
   const action = String(form.get('action') || 'site');
+  postedAction = action;
   if (action === 'site') {
     // site URL: normalize to a bare origin; empty is fine (falls back to the
     // request origin until configured)
@@ -206,410 +209,456 @@ const ORIGIN_PRESETS: { label: string; origin: string }[] = [
   { label: 'Any origin (*)', origin: '*' },
 ];
 const remainingPresets = ORIGIN_PRESETS.filter((p) => !settings.draftsAllowedOrigins.includes(p.origin));
+
+// the card whose save failed reopens in edit mode with the flash above it
+const openCard = flashError ? postedAction : '';
+const groups = [
+  { label: 'General', items: [
+    { id: 'site', label: 'Title & description', terms: 'site title tagline url footer seo' },
+    { id: 'localization', label: 'Timezone & language', terms: 'timezone locale language date' },
+    { id: 'announcement', label: 'Announcement bar', terms: 'announcement banner bar' },
+  ] },
+  { label: 'Publishing', items: [
+    ...(isOwner ? [{ id: 'drafts-api', label: 'External drafts API', terms: 'api key drafts cors origins' }] : []),
+    { id: 'redirects', label: 'Redirects', terms: 'redirects 301 302 urls' },
+  ] },
+  ...(isOwner ? [{ label: 'Integrations', items: [
+    { id: 'email', label: 'Email', terms: 'email transactional resend mailgun amazon ses aws cloudflare invitation invite password reset booking calendar notifications reminders' },
+    { id: 'ai-agents', label: 'AI & agents', terms: 'ai agents openai custom kimi deepseek cli proxy cpamc tailscale mcp' },
+    { id: 'analytics', label: 'Analytics', terms: 'analytics umami replay meta pixel tiktok tracking' },
+    { id: 'code', label: 'Code injection', terms: 'code injection head footer scripts' },
+  ] }] : []),
+  { label: 'Advanced', items: [
+    { id: 'backup', label: 'Backup', terms: 'backup restore export zip' },
+    { id: 'backend', label: 'Backend', terms: 'backend database d1 sqlite' },
+  ] },
+];
 ---
 
 <Admin title="Settings" section="settings">
-  <div class="page-head"><h1>Settings</h1></div>
-
-  {flash && <div class="flash">{flash}</div>}
-  {flashError && <div class="flash error">{flashError}</div>}
-
-  <div class="card card-pad">
-    <p class="card-title">Site</p>
-    <form method="post">
-      <input type="hidden" name="action" value="site" />
-      <div class="field-row">
-        <label class="field"><span>Site title</span><input type="text" name="siteTitle" value={settings.siteTitle} /></label>
-        <label class="field"><span>Tagline</span><input type="text" name="tagline" value={settings.tagline} /></label>
+  <div class="settings">
+    <nav class="set-index" aria-label="Settings sections">
+      <div class="set-search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4" /></svg>
+        <input type="search" placeholder="Search settings" id="set-q" aria-label="Search settings" />
       </div>
-      <label class="field">
-        <span>Site URL</span>
-        <input type="text" name="siteUrl" value={settings.siteUrl} placeholder="https://example.com" />
-      </label>
-      <p class="hint">
-        The public address of this site. Used to build canonical URLs, the sitemap, the RSS feed,
-        and social-share previews. Leave empty to use whatever address the site is served from.
-      </p>
-      <label class="field">
-        <span>Footer</span>
-        <textarea name="footerText" rows="3" placeholder={`${settings.siteTitle}${settings.tagline ? ` — ${settings.tagline}` : ''}`}>{settings.footerText}</textarea>
-      </label>
-      <p class="hint">
-        Shown at the bottom of every public page. Markdown works — e.g.
-        <code>© 2026 Your Site · [Twitter](https://twitter.com/…)</code>. Leave empty to fall back to
-        “title — tagline”.
-      </p>
-      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
-    </form>
-  </div>
+      {groups.map((g) => (
+        <div class="set-group">
+          <div class="set-group-title">{g.label}</div>
+          {g.items.map((it) => (
+            <a href={`#${it.id}`} data-spy={it.id} data-terms={it.terms}>
+              <span>{it.label}</span>
+              <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6" /></svg>
+            </a>
+          ))}
+        </div>
+      ))}
+    </nav>
 
-  {isOwner && (
-    <div class="card card-pad">
-      <p class="card-title">External drafts API</p>
-      <p style="margin:0">
-        Lets outside apps push drafts to <code>POST /api/drafts</code> — they land in Posts as drafts
-        for you to refine and publish. The key can only create drafts, never publish, edit, or delete.
-      </p>
+    <div class="set-cards">
+      <div class="page-head set-head"><div><h1>Settings</h1><p class="sub">Site-wide configuration. Each card saves on its own.</p></div></div>
+      {flash && <div class="flash">{flash}</div>}
+      {flashError && <div class="flash error">{flashError}</div>}
 
-      {apiKey ? (
-        <div class="da-key-row">
-          <code class="da-key" title="API key">{maskedKey}</code>
-          <button class="btn" type="button" id="da-copy" data-key={apiKey}>Copy</button>
-          <form method="post">
-            <input type="hidden" name="action" value="generateKey" />
-            <button class="btn" type="submit">Regenerate</button>
-          </form>
-          <form method="post">
-            <input type="hidden" name="action" value="revokeKey" />
-            <button class="btn danger" type="submit">Revoke</button>
-          </form>
-        </div>
-      ) : (
-        <div class="da-empty">
-          <span class="hint">No API key yet — external apps can’t reach <code>/api/drafts</code>.</span>
-          <form method="post" style="margin:0">
-            <input type="hidden" name="action" value="generateKey" />
-            <button class="btn primary" type="submit">Generate key</button>
-          </form>
-        </div>
-      )}
-      {apiKey && (
-        <p class="hint" style="margin-top:8px">
-          Send it as <code>Authorization: Bearer &lt;key&gt;</code>. Regenerating or revoking takes
-          effect immediately.
-        </p>
-      )}
+      <div class="set-group-title">General</div>
 
-      <div class="da-origins">
-        <p class="da-subtitle">Allowed origins <span class="hint">(CORS)</span></p>
-        <p class="hint" style="margin:0 0 10px">
-          Browser apps on these URLs can call the API. Tools like curl or scripts are never blocked
-          by this list. Empty list = no browser app gets through.
-        </p>
-        {settings.draftsAllowedOrigins.length > 0 && (
-          <div class="da-chips">
-            {settings.draftsAllowedOrigins.map((origin) => (
-              <form method="post" class="da-chip">
-                <input type="hidden" name="action" value="removeOrigin" />
-                <input type="hidden" name="origin" value={origin} />
-                <code>{origin}</code>
-                <button class="da-chip-x" type="submit" title={`Remove ${origin}`}>✕</button>
-              </form>
-            ))}
+      <section class={`scard ${openCard === 'site' ? 'editing' : ''}`} id="site" data-editable>
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Title &amp; description</h2><p>How your publication appears around the web.</p></div>
+          <div class="scard-actions">
+            <button class="btn" type="button" data-edit>Edit</button>
+            <button class="btn ghost" type="button" data-cancel>Cancel</button>
+            <button class="btn primary" type="submit" form="form-site">Save</button>
           </div>
-        )}
-        <form method="post" class="da-add-row">
-          <input type="hidden" name="action" value="addOrigin" />
-          <input type="text" name="origin" placeholder="https://another-app.example.com" />
-          <button class="btn" type="submit">Add</button>
-        </form>
-        {remainingPresets.length > 0 && (
-          <div class="da-presets">
-            <span class="hint">Quick add:</span>
-            {remainingPresets.map((p) => (
-              <form method="post" style="margin:0">
-                <input type="hidden" name="action" value="addOrigin" />
-                <input type="hidden" name="origin" value={p.origin} />
-                <button class="da-preset" type="submit">+ {p.label}</button>
-              </form>
-            ))}
+        </header>
+        <dl class="scard-view">
+          <div><dt>Site title</dt><dd>{settings.siteTitle || '—'}</dd></div>
+          <div><dt>Tagline</dt><dd>{settings.tagline || '—'}</dd></div>
+          <div><dt>Site URL</dt><dd>{settings.siteUrl || <span class="hint">Not set — uses the serving address</span>}</dd></div>
+          <div><dt>Footer</dt><dd>{settings.footerText || <span class="hint">Title — tagline</span>}</dd></div>
+        </dl>
+        <form class="scard-form" id="form-site" method="post" action="/admin/settings#site">
+          <input type="hidden" name="action" value="site" />
+          <div class="field-row">
+            <label class="field"><span>Site title</span><input type="text" name="siteTitle" value={settings.siteTitle} /></label>
+            <label class="field"><span>Tagline</span><input type="text" name="tagline" value={settings.tagline} /></label>
           </div>
-        )}
-      </div>
-    </div>
-  )}
-
-  <div class="card card-pad">
-    <p class="card-title">Timezone &amp; language</p>
-    <form method="post">
-      <input type="hidden" name="action" value="localization" />
-      <div class="field-row">
-        <label class="field">
-          <span>Publication timezone</span>
-          <input type="text" name="timezone" value={settings.timezone} placeholder="America/New_York" list="tz-suggestions" />
-        </label>
-        <label class="field">
-          <span>Locale</span>
-          <input type="text" name="locale" value={settings.locale} placeholder="en-US" />
-        </label>
-      </div>
-      <datalist id="tz-suggestions">
-        {['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'America/Guatemala', 'America/Mexico_City', 'Europe/London', 'Europe/Madrid', 'Asia/Tokyo'].map((tz) => <option value={tz} />)}
-      </datalist>
-      <p class="hint">
-        Dates on the public site render in this timezone and locale (e.g. <code>es-GT</code> for Spanish).
-        Empty = server timezone and English.
-      </p>
-      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
-    </form>
-  </div>
-
-  {isOwner && (
-    <div class="card card-pad">
-      <p class="card-title">Code injection</p>
-      <p style="margin:0">
-        Raw HTML added to every public page — analytics snippets, verification tags, custom fonts.
-        Scripts here run with full access to your pages, so paste only code you trust.
-      </p>
-      <form method="post">
-        <input type="hidden" name="action" value="codeInjection" />
-        <label class="field" style="margin-top:12px">
-          <span>Site header <span class="hint">(inside <code>&lt;head&gt;</code>)</span></span>
-          <textarea name="headCode" rows="4" placeholder={'<script defer data-domain="example.com" src="…"></script>'} style="font-family:monospace;font-size:12.5px">{settings.headCode}</textarea>
-        </label>
-        <label class="field">
-          <span>Site footer <span class="hint">(before <code>&lt;/body&gt;</code>)</span></span>
-          <textarea name="footerCode" rows="4" style="font-family:monospace;font-size:12.5px">{settings.footerCode}</textarea>
-        </label>
-        <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
-      </form>
-    </div>
-  )}
-
-  {isOwner && (
-    <div class="card card-pad">
-      <p class="card-title">Analytics</p>
-      <p style="margin:0">
-        Traffic and ad tracking on every public page. Only the ID is stored — the tracking code itself
-        is rendered by the CMS. The admin is never tracked. Mind visitor-consent rules (GDPR) if you
-        enable the ad pixels.
-      </p>
-      <form method="post">
-        <input type="hidden" name="action" value="analytics" />
-
-        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
-          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-            <input type="checkbox" name="umamiEnabled" checked={settings.analytics.umami.enabled} />
-            <span style="font-weight:600">Umami</span>
+          <label class="field">
+            <span>Site URL</span>
+            <input type="text" name="siteUrl" value={settings.siteUrl} placeholder="https://example.com" inputmode="url" />
+            <small class="hint">Builds canonical URLs, the sitemap, RSS and social previews. Empty = whatever address the site is served from.</small>
+          </label>
+          <label class="field">
+            <span>Footer</span>
+            <textarea name="footerText" rows="3" placeholder={`${settings.siteTitle}${settings.tagline ? ` — ${settings.tagline}` : ''}`}>{settings.footerText}</textarea>
+            <small class="hint">Markdown works — e.g. <code>© 2026 Your Site · [Twitter](https://twitter.com/…)</code>. Empty = “title — tagline”.</small>
           </label>
+          <div class="serp-preview" aria-hidden="true">
+            <small>Search preview</small>
+            <span class="serp-url">{(settings.siteUrl || 'example.com').replace(/^https?:\/\//, '')}</span>
+            <span class="serp-title">{settings.siteTitle || 'My Site'}</span>
+            <span class="serp-desc">{settings.tagline || 'Your tagline appears here.'}</span>
+          </div>
+        </form>
+      </section>
+
+      <section class={`scard ${openCard === 'localization' ? 'editing' : ''}`} id="localization" data-editable>
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Timezone &amp; language</h2><p>Used for scheduling and how dates render on the site.</p></div>
+          <div class="scard-actions">
+            <button class="btn" type="button" data-edit>Edit</button>
+            <button class="btn ghost" type="button" data-cancel>Cancel</button>
+            <button class="btn primary" type="submit" form="form-localization">Save</button>
+          </div>
+        </header>
+        <dl class="scard-view">
+          <div><dt>Timezone</dt><dd>{settings.timezone || <span class="hint">Server timezone</span>}</dd></div>
+          <div><dt>Locale</dt><dd>{settings.locale || <span class="hint">English (en-US)</span>}</dd></div>
+        </dl>
+        <form class="scard-form" id="form-localization" method="post" action="/admin/settings#localization">
+          <input type="hidden" name="action" value="localization" />
           <div class="field-row">
             <label class="field">
-              <span>Website ID</span>
-              <input type="text" name="umamiWebsiteId" value={settings.analytics.umami.websiteId} placeholder="94db1cb1-74f4-4a40-ad6c-962362670409" style="font-family:monospace;font-size:12.5px" />
+              <span>Publication timezone</span>
+              <input type="text" name="timezone" value={settings.timezone} placeholder="America/New_York" list="tz-suggestions" />
             </label>
             <label class="field">
-              <span>Script URL</span>
-              <input type="text" name="umamiScriptUrl" value={settings.analytics.umami.scriptUrl} placeholder="https://cloud.umami.is/script.js" style="font-family:monospace;font-size:12.5px" />
+              <span>Locale</span>
+              <input type="text" name="locale" value={settings.locale} placeholder="en-US" />
             </label>
           </div>
-          <p class="hint" style="margin:0">
-            Privacy-friendly stats: pageviews, referrers, devices, countries, visit duration.
-            Umami Cloud by default — point Script URL at your own instance if self-hosting.
-          </p>
-          <div style="margin:10px 0 0 24px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px">
-            <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-              <input type="checkbox" name="umamiReplayEnabled" checked={settings.analytics.umami.replay.enabled} />
-              <span style="font-weight:600">Session replay</span>
-            </label>
-            <div class="field-row">
-              <label class="field">
-                <span>Sample rate (%)</span>
-                <input type="number" name="umamiReplaySampleRate" min="1" max="100" step="1" value={Math.round(settings.analytics.umami.replay.sampleRate * 100)} />
-              </label>
-              <label class="field">
-                <span>Mask level</span>
-                <select name="umamiReplayMaskLevel">
-                  <option value="moderate" selected={settings.analytics.umami.replay.maskLevel === 'moderate'}>moderate</option>
-                  <option value="strict" selected={settings.analytics.umami.replay.maskLevel === 'strict'}>strict</option>
-                </select>
-              </label>
-              <label class="field">
-                <span>Max duration</span>
-                <select name="umamiReplayMaxDuration">
-                  <option value="60000" selected={settings.analytics.umami.replay.maxDuration === 60000}>1 minute</option>
-                  <option value="300000" selected={settings.analytics.umami.replay.maxDuration === 300000}>5 minutes</option>
-                  <option value="600000" selected={settings.analytics.umami.replay.maxDuration === 600000}>10 minutes</option>
-                  <option value="1800000" selected={settings.analytics.umami.replay.maxDuration === 1800000}>30 minutes</option>
-                </select>
-              </label>
+          <datalist id="tz-suggestions">
+            {['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'America/Guatemala', 'America/Mexico_City', 'Europe/London', 'Europe/Madrid', 'Asia/Tokyo'].map((tz) => <option value={tz} />)}
+          </datalist>
+          <p class="hint">Dates on the public site render in this timezone and locale (e.g. <code>es-GT</code> for Spanish). Empty = server timezone and English.</p>
+        </form>
+      </section>
+
+      <section class={`scard ${openCard === 'announcement' ? 'editing' : ''}`} id="announcement" data-editable>
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Announcement bar</h2><p>A bar above the site header for news worth shouting about.</p></div>
+          <div class="scard-actions">
+            <button class="btn" type="button" data-edit>Edit</button>
+            <button class="btn ghost" type="button" data-cancel>Cancel</button>
+            <button class="btn primary" type="submit" form="form-announcement">Save</button>
+          </div>
+        </header>
+        <dl class="scard-view">
+          <div><dt>Status</dt><dd>{settings.announcement.enabled ? <span class="status published">● Live</span> : <span class="status archived">Off</span>}</dd></div>
+          <div><dt>Text</dt><dd>{settings.announcement.text || '—'}</dd></div>
+          {settings.announcement.link && <div><dt>Link</dt><dd>{settings.announcement.link}</dd></div>}
+          <div><dt>Dismissible</dt><dd>{settings.announcement.dismissible ? 'Yes' : 'No'}</dd></div>
+        </dl>
+        <form class="scard-form" id="form-announcement" method="post" action="/admin/settings#announcement">
+          <input type="hidden" name="action" value="announcement" />
+          <label class="check-row"><input type="checkbox" name="annEnabled" checked={settings.announcement.enabled} /><span>Show a bar above the site header</span></label>
+          <div class="field-row">
+            <label class="field"><span>Text</span><input type="text" name="annText" value={settings.announcement.text} placeholder="🎉 Something worth announcing" /></label>
+            <label class="field"><span>Link (optional)</span><input type="text" name="annLink" value={settings.announcement.link} placeholder={`${CONTENT.posts.base}/announcement`} /></label>
+          </div>
+          <label class="check-row"><input type="checkbox" name="annDismissible" checked={settings.announcement.dismissible} /><span>Visitors can dismiss it <span class="hint">(remembered per browser until the text changes)</span></span></label>
+        </form>
+      </section>
+
+      <div class="set-group-title">Publishing</div>
+
+      {isOwner && (
+        <section class="scard" id="drafts-api">
+          <header class="scard-head">
+            <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+            <div class="grow"><h2>External drafts API</h2><p>Outside apps push drafts to <code>POST /api/drafts</code>. The key can only create drafts — never publish, edit, or delete.</p></div>
+          </header>
+          {apiKey ? (
+            <div class="da-key-row">
+              <code class="da-key" title="API key">{maskedKey}</code>
+              <button class="btn" type="button" id="da-copy" data-key={apiKey}>Copy</button>
+              <form method="post" action="/admin/settings#drafts-api">
+                <input type="hidden" name="action" value="generateKey" />
+                <button class="btn" type="submit">Regenerate</button>
+              </form>
+              <form method="post" action="/admin/settings#drafts-api">
+                <input type="hidden" name="action" value="revokeKey" />
+                <button class="btn danger" type="submit">Revoke</button>
+              </form>
+            </div>
+          ) : (
+            <div class="da-empty">
+              <span class="hint">No API key yet — external apps can’t reach <code>/api/drafts</code>.</span>
+              <form method="post" action="/admin/settings#drafts-api">
+                <input type="hidden" name="action" value="generateKey" />
+                <button class="btn primary" type="submit">Generate key</button>
+              </form>
             </div>
-            <p class="hint" style="margin:0">
-              Records a sample of visitor sessions for playback in Umami (v3.1+, Behavior → Replays).
-              Umami keeps replays for 30 days. Inputs are masked — mind visitor-consent rules (GDPR) before enabling.
-            </p>
+          )}
+          {apiKey && <p class="hint">Send it as <code>Authorization: Bearer &lt;key&gt;</code>. Regenerating or revoking takes effect immediately.</p>}
+          <div class="scard-sub">
+            <h3>Allowed origins <span class="hint">(CORS)</span></h3>
+            <p class="hint">Browser apps on these URLs can call the API. curl and scripts are never blocked by this list. Empty = no browser app gets through.</p>
+            {settings.draftsAllowedOrigins.length > 0 && (
+              <div class="da-chips">
+                {settings.draftsAllowedOrigins.map((origin) => (
+                  <form method="post" class="da-chip" action="/admin/settings#drafts-api">
+                    <input type="hidden" name="action" value="removeOrigin" />
+                    <input type="hidden" name="origin" value={origin} />
+                    <code>{origin}</code>
+                    <button class="da-chip-x" type="submit" title={`Remove ${origin}`} aria-label={`Remove ${origin}`}>✕</button>
+                  </form>
+                ))}
+              </div>
+            )}
+            <form method="post" class="inline-add" action="/admin/settings#drafts-api">
+              <input type="hidden" name="action" value="addOrigin" />
+              <input type="text" name="origin" placeholder="https://another-app.example.com" aria-label="Origin" />
+              <button class="btn" type="submit">Add</button>
+            </form>
+            {remainingPresets.length > 0 && (
+              <div class="da-presets">
+                <span class="hint">Quick add:</span>
+                {remainingPresets.map((p) => (
+                  <form method="post" action="/admin/settings#drafts-api">
+                    <input type="hidden" name="action" value="addOrigin" />
+                    <input type="hidden" name="origin" value={p.origin} />
+                    <button class="da-preset" type="submit">+ {p.label}</button>
+                  </form>
+                ))}
+              </div>
+            )}
           </div>
-        </div>
+        </section>
+      )}
 
-        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
-          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-            <input type="checkbox" name="metaEnabled" checked={settings.analytics.metaPixel.enabled} />
-            <span style="font-weight:600">Meta Pixel</span>
-          </label>
-          <label class="field">
-            <span>Pixel ID</span>
-            <input type="text" name="metaPixelId" value={settings.analytics.metaPixel.pixelId} placeholder="724159876543210" style="font-family:monospace;font-size:12.5px;max-width:320px" />
-          </label>
-          <p class="hint" style="margin:0">Tracks page views for Facebook/Instagram ad attribution and retargeting audiences.</p>
-        </div>
+      <section class="scard" id="redirects">
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Redirects</h2><p>Forward old URLs to new ones. They only fire when a URL would otherwise 404, and renaming a published post adds one automatically.</p></div>
+        </header>
+        {redirects.length > 0 && (
+          <div class="rd-list">
+            {redirects.map((r) => (
+              <div class="rd-row">
+                <code class="rd-path">{r.fromPath}</code>
+                <span class="rd-arrow">→</span>
+                <code class="rd-path">{r.toPath}</code>
+                <span class="rd-code">{r.code}</span>
+                <form method="post" action="/admin/settings#redirects">
+                  <input type="hidden" name="action" value="removeRedirect" />
+                  <input type="hidden" name="id" value={r.id} />
+                  <button class="da-chip-x" type="submit" title={`Remove redirect from ${r.fromPath}`} aria-label={`Remove redirect from ${r.fromPath}`}>✕</button>
+                </form>
+              </div>
+            ))}
+          </div>
+        )}
+        <form method="post" class="rd-add" action="/admin/settings#redirects">
+          <input type="hidden" name="action" value="addRedirect" />
+          <input type="text" name="fromPath" placeholder="/old-path" required aria-label="From path" />
+          <span class="rd-arrow">→</span>
+          <input type="text" name="toPath" placeholder="/new-path or https://elsewhere.com" required aria-label="To path" />
+          <select name="code" aria-label="Redirect type">
+            <option value="301">301 permanent</option>
+            <option value="302">302 temporary</option>
+          </select>
+          <button class="btn" type="submit">Add</button>
+        </form>
+      </section>
 
-        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
-          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-            <input type="checkbox" name="tiktokEnabled" checked={settings.analytics.tiktokPixel.enabled} />
-            <span style="font-weight:600">TikTok Pixel <span style="display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:2px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber);vertical-align:1px">Experimental</span></span>
-          </label>
-          <label class="field">
-            <span>Pixel ID</span>
-            <input type="text" name="tiktokPixelId" value={settings.analytics.tiktokPixel.pixelId} placeholder="CABC123DEF456GHI789" style="font-family:monospace;font-size:12.5px;max-width:320px" />
-          </label>
-          <p class="hint" style="margin:0">
-            Untested integration — the snippet follows TikTok’s published base code, but verify events
-            in TikTok Events Manager before relying on it.
-          </p>
-        </div>
+      {isOwner && <div class="set-group-title">Integrations</div>}
 
-        <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
-      </form>
-    </div>
-  )}
+      {isOwner && (
+        <section class="scard" id="email">
+          <header class="scard-head">
+            <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+            <div class="grow"><h2>Email</h2><p>Invitations, password resets, booking updates and reminders.</p></div>
+            <div class="scard-actions always"><a class="btn" href="/admin/email">Configure email</a></div>
+          </header>
+          <p class="hint">Choose Resend, Mailgun, Amazon SES or Cloudflare. Manage your sender, notifications and delivery activity.</p>
+        </section>
+      )}
 
-  <div class="card card-pad">
-    <p class="card-title">Announcement bar</p>
-    <form method="post">
-      <input type="hidden" name="action" value="announcement" />
-      <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-        <input type="checkbox" name="annEnabled" checked={settings.announcement.enabled} />
-        <span>Show a bar above the site header</span>
-      </label>
-      <div class="field-row">
-        <label class="field"><span>Text</span><input type="text" name="annText" value={settings.announcement.text} placeholder="🎉 Something worth announcing" /></label>
-        <label class="field"><span>Link (optional)</span><input type="text" name="annLink" value={settings.announcement.link} placeholder={`${CONTENT.posts.base}/announcement`} /></label>
-      </div>
-      <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
-        <input type="checkbox" name="annDismissible" checked={settings.announcement.dismissible} />
-        <span>Visitors can dismiss it <span class="hint">(remembered per browser until the text changes)</span></span>
-      </label>
-      <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
-    </form>
-  </div>
+      {isOwner && (
+        <section class={`scard ${openCard === 'analytics' ? 'editing' : ''}`} id="analytics" data-editable>
+          <header class="scard-head">
+            <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+            <div class="grow"><h2>Analytics</h2><p>Traffic and ad tracking on public pages. The admin is never tracked. Mind consent rules (GDPR) for the ad pixels.</p></div>
+            <div class="scard-actions">
+              <button class="btn" type="button" data-edit>Edit</button>
+              <button class="btn ghost" type="button" data-cancel>Cancel</button>
+              <button class="btn primary" type="submit" form="form-analytics">Save</button>
+            </div>
+          </header>
+          <dl class="scard-view">
+            <div><dt>Umami</dt><dd>{settings.analytics.umami.enabled ? (normalizeScriptUrl(settings.analytics.umami.scriptUrl) ? new URL(settings.analytics.umami.scriptUrl).host : 'On') : <span class="hint">Off</span>}</dd></div>
+            <div><dt>Session replay</dt><dd>{settings.analytics.umami.replay.enabled ? `${Math.round(settings.analytics.umami.replay.sampleRate * 100)}% · ${settings.analytics.umami.replay.maskLevel}` : <span class="hint">Off</span>}</dd></div>
+            <div><dt>Meta Pixel</dt><dd>{settings.analytics.metaPixel.enabled ? settings.analytics.metaPixel.pixelId : <span class="hint">Off</span>}</dd></div>
+            <div><dt>TikTok Pixel</dt><dd>{settings.analytics.tiktokPixel.enabled ? settings.analytics.tiktokPixel.pixelId : <span class="hint">Off</span>}</dd></div>
+          </dl>
+          <form class="scard-form" id="form-analytics" method="post" action="/admin/settings#analytics">
+            <input type="hidden" name="action" value="analytics" />
+            <div class="scard-sub first">
+              <label class="check-row"><input type="checkbox" name="umamiEnabled" checked={settings.analytics.umami.enabled} /><b>Umami</b></label>
+              <div class="field-row">
+                <label class="field"><span>Website ID</span><input class="mono" type="text" name="umamiWebsiteId" value={settings.analytics.umami.websiteId} placeholder="94db1cb1-74f4-4a40-ad6c-962362670409" /></label>
+                <label class="field"><span>Script URL</span><input class="mono" type="text" name="umamiScriptUrl" value={settings.analytics.umami.scriptUrl} placeholder="https://cloud.umami.is/script.js" /></label>
+              </div>
+              <p class="hint">Privacy-friendly stats. Umami Cloud by default — point Script URL at your own instance if self-hosting. Set <code>UMAMI_API_TOKEN</code> (self-hosted) or <code>UMAMI_API_KEY</code> (Cloud) to show traffic in the admin.</p>
+              <div class="subpanel">
+                <label class="check-row"><input type="checkbox" name="umamiReplayEnabled" checked={settings.analytics.umami.replay.enabled} /><b>Session replay</b></label>
+                <div class="field-row three">
+                  <label class="field"><span>Sample rate (%)</span><input type="number" name="umamiReplaySampleRate" min="1" max="100" step="1" value={Math.round(settings.analytics.umami.replay.sampleRate * 100)} /></label>
+                  <label class="field"><span>Mask level</span>
+                    <select name="umamiReplayMaskLevel">
+                      <option value="moderate" selected={settings.analytics.umami.replay.maskLevel === 'moderate'}>moderate</option>
+                      <option value="strict" selected={settings.analytics.umami.replay.maskLevel === 'strict'}>strict</option>
+                    </select>
+                  </label>
+                  <label class="field"><span>Max duration</span>
+                    <select name="umamiReplayMaxDuration">
+                      <option value="60000" selected={settings.analytics.umami.replay.maxDuration === 60000}>1 minute</option>
+                      <option value="300000" selected={settings.analytics.umami.replay.maxDuration === 300000}>5 minutes</option>
+                      <option value="600000" selected={settings.analytics.umami.replay.maxDuration === 600000}>10 minutes</option>
+                      <option value="1800000" selected={settings.analytics.umami.replay.maxDuration === 1800000}>30 minutes</option>
+                    </select>
+                  </label>
+                </div>
+                <p class="hint">Records a sample of sessions for playback in Umami (v3.1+, Behavior → Replays), kept 30 days. Inputs are masked.</p>
+              </div>
+            </div>
+            <div class="scard-sub">
+              <label class="check-row"><input type="checkbox" name="metaEnabled" checked={settings.analytics.metaPixel.enabled} /><b>Meta Pixel</b></label>
+              <label class="field narrow"><span>Pixel ID</span><input class="mono" type="text" name="metaPixelId" value={settings.analytics.metaPixel.pixelId} placeholder="724159876543210" /></label>
+              <p class="hint">Page views for Facebook/Instagram ad attribution and retargeting.</p>
+            </div>
+            <div class="scard-sub">
+              <label class="check-row"><input type="checkbox" name="tiktokEnabled" checked={settings.analytics.tiktokPixel.enabled} /><b>TikTok Pixel</b><span class="pill edited">Experimental</span></label>
+              <label class="field narrow"><span>Pixel ID</span><input class="mono" type="text" name="tiktokPixelId" value={settings.analytics.tiktokPixel.pixelId} placeholder="CABC123DEF456GHI789" /></label>
+              <p class="hint">Untested integration — verify events in TikTok Events Manager before relying on it.</p>
+            </div>
+          </form>
+        </section>
+      )}
 
-  <div class="card card-pad">
-    <p class="card-title">Redirects</p>
-    <p style="margin:0">
-      Forward old URLs to new ones. Redirects only fire when a URL would otherwise 404, so they can
-      never shadow real pages. Renaming a published post or page adds one here automatically.
-    </p>
-    {redirects.length > 0 && (
-      <div class="rd-list">
-        {redirects.map((r) => (
-          <div class="rd-row">
-            <code class="rd-path">{r.fromPath}</code>
-            <span class="rd-arrow">→</span>
-            <code class="rd-path">{r.toPath}</code>
-            <span class="rd-code">{r.code}</span>
-            <form method="post" style="margin:0">
-              <input type="hidden" name="action" value="removeRedirect" />
-              <input type="hidden" name="id" value={r.id} />
-              <button class="da-chip-x" type="submit" title={`Remove redirect from ${r.fromPath}`}>✕</button>
-            </form>
-          </div>
-        ))}
-      </div>
-    )}
-    <form method="post" class="rd-add">
-      <input type="hidden" name="action" value="addRedirect" />
-      <input type="text" name="fromPath" placeholder="/old-path" required />
-      <span class="rd-arrow">→</span>
-      <input type="text" name="toPath" placeholder="/new-path or https://elsewhere.com" required />
-      <select name="code">
-        <option value="301">301 permanent</option>
-        <option value="302">302 temporary</option>
-      </select>
-      <button class="btn" type="submit">Add</button>
-    </form>
-  </div>
+      {isOwner && (
+        <section class={`scard ${openCard === 'codeInjection' ? 'editing' : ''}`} id="code" data-editable>
+          <header class="scard-head">
+            <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+            <div class="grow"><h2>Code injection</h2><p>Raw HTML on every public page. Scripts run with full access — paste only code you trust.</p></div>
+            <div class="scard-actions">
+              <button class="btn" type="button" data-edit>Edit</button>
+              <button class="btn ghost" type="button" data-cancel>Cancel</button>
+              <button class="btn primary" type="submit" form="form-code">Save</button>
+            </div>
+          </header>
+          <dl class="scard-view">
+            <div><dt>Site header</dt><dd>{settings.headCode ? `${settings.headCode.split('\n').length} lines` : <span class="hint">Empty</span>}</dd></div>
+            <div><dt>Site footer</dt><dd>{settings.footerCode ? `${settings.footerCode.split('\n').length} lines` : <span class="hint">Empty</span>}</dd></div>
+          </dl>
+          <form class="scard-form" id="form-code" method="post" action="/admin/settings#code">
+            <input type="hidden" name="action" value="codeInjection" />
+            <label class="field"><span>Site header <span class="hint">(inside <code>&lt;head&gt;</code>)</span></span>
+              <textarea class="code" name="headCode" rows="5" placeholder={'<script defer data-domain="example.com" src="…"></script>'}>{settings.headCode}</textarea>
+            </label>
+            <label class="field"><span>Site footer <span class="hint">(before <code>&lt;/body&gt;</code>)</span></span>
+              <textarea class="code" name="footerCode" rows="5">{settings.footerCode}</textarea>
+            </label>
+          </form>
+        </section>
+      )}
 
-  <div class="card card-pad">
-    <p class="card-title">Backup</p>
-    <p style="margin:0">
-      Download everything as one ZIP — pages, posts, tags, links, navigation, users, settings
-      (<code>content.json</code>) plus every uploaded image.
-    </p>
-    <p class="hint" style="margin-top:8px">
-      Works the same on every backend. Passwords are never exported — after restoring to a fresh
-      install, sign in with the owner password from <code>.env</code> and reset accounts.
-    </p>
-    <div class="form-actions"><a class="btn primary" href="/api/backup" download>Download backup</a></div>
+      {isOwner && <section class="scard" id="ai-agents"><header class="scard-head"><a class="scard-back" href="#" aria-label="All settings">←</a><div class="grow"><h2>AI &amp; agents</h2></div><a class="btn" href="/admin/ai">Import document</a></header><AiSettings client:load /></section>}
 
-    {isOwner && (
-      <div class="rs-restore">
-        <p class="da-subtitle">Restore from backup</p>
-        <p class="hint" style="margin:0 0 10px">
-          Pick a backup ZIP to see what's inside, then restore. <strong>Restoring replaces all
-          current content</strong> — posts, pages, media, settings, everything.
-        </p>
-        <div class="rs-row">
-          <input type="file" id="rs-file" accept=".zip,application/zip" />
-          <button class="btn" type="button" id="rs-analyze">Analyze</button>
-          <button class="btn danger" type="button" id="rs-go" hidden>Restore now</button>
-        </div>
-        <div class="hint" id="rs-report" style="margin-top:10px"></div>
-      </div>
-    )}
-  </div>
+      <div class="set-group-title">Advanced</div>
+
+      <section class="scard" id="backup">
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Backup</h2><p>Portable ZIP with content, bookings, booking retry records and uploaded media. Passwords, provider credentials and queued email are not exported. Keep this private: it includes guest details and management tokens.</p></div>
+          <div class="scard-actions always"><a class="btn" href="/api/backup" download>Download backup</a></div>
+        </header>
+        {isOwner && (
+          <div class="scard-sub first">
+            <h3>Restore from backup</h3>
+            <p class="hint">Pick a backup ZIP to see what's inside, then restore. <strong>Restoring replaces all current content and booking retry records. Use a fresh v5 backup for migration.</strong></p>
+            <div class="rs-row">
+              <input type="file" id="rs-file" accept=".zip,application/zip" aria-label="Backup ZIP" />
+              <button class="btn" type="button" id="rs-analyze">Analyze</button>
+              <button class="btn danger" type="button" id="rs-go" hidden>Restore now</button>
+            </div>
+            <div class="hint" id="rs-report"></div>
+          </div>
+        )}
+      </section>
 
-  <div class="card card-pad">
-    <p class="card-title">Backend</p>
-    <p style="margin:0">
-      Content backend: <span class="pill home">{backend}</span>
-    </p>
-    <p class="hint" style="margin-top:8px">
-      Picked automatically: <code>d1</code> when the Cloudflare <code>DB</code> binding is present
-      (Workers deploys and wrangler dev), otherwise <code>sqlite</code> (local file at
-      <code>SQLITE_URL</code>, zero setup). Both use the same content shapes.
-    </p>
+      <section class="scard" id="backend">
+        <header class="scard-head">
+          <a class="scard-back" href="#" aria-label="All settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6" /></svg></a>
+          <div class="grow"><h2>Backend</h2><p>Picked automatically: <code>d1</code> when the Cloudflare <code>DB</code> binding is present, otherwise <code>sqlite</code> (<code>SQLITE_URL</code>).</p></div>
+          <div class="scard-actions always"><span class="pill home">{backend}</span></div>
+        </header>
+      </section>
+    </div>
   </div>
 </Admin>
 
 <style>
-  .rs-restore { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
   .rs-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
-  .rd-list { margin-top: 14px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
-  .rd-row {
-    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
-    border-bottom: 1px solid var(--border); font-size: 13px;
-  }
+  #rs-report:not(:empty) { margin-top: 10px; }
+  .rd-list { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
+  .rd-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
   .rd-row:last-child { border-bottom: none; }
-  .rd-path { background: var(--bg); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; }
+  .rd-row form { margin: 0; }
+  .rd-path { background: var(--panel-2); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
   .rd-arrow { color: var(--muted); }
   .rd-code { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
-  .rd-add { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
+  .rd-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
   .rd-add input[type='text'] { flex: 1; min-width: 140px; }
-  .da-key-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
-  .da-key {
-    flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--border);
-    border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--muted);
-  }
-  .da-key-row form { margin: 0; }
-  .da-empty {
-    display: flex; align-items: center; justify-content: space-between; gap: 12px;
-    border: 1px dashed var(--border); border-radius: 9px; padding: 12px 14px; margin-top: 14px;
-  }
-  .da-origins { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
-  .da-subtitle { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
+  .rd-add select { width: auto; }
+  .da-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .da-key-row form, .da-empty form, .da-presets form { margin: 0; }
+  .da-key { flex: 1; min-width: 220px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: var(--muted); }
+  .da-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; flex-wrap: wrap; }
   .da-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
-  .da-chip {
-    display: inline-flex; align-items: center; gap: 7px; margin: 0;
-    background: var(--accent-soft); border: 1px solid rgb(110 123 255 / 30%);
-    border-radius: 99px; padding: 3px 6px 3px 12px;
-  }
+  .da-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; background: var(--sel); border-radius: 99px; padding: 3px 6px 3px 12px; }
   .da-chip code { font-size: 12px; background: none; border: none; padding: 0; }
-  .da-chip-x {
-    background: none; border: none; color: var(--muted); cursor: pointer;
-    font-size: 12px; padding: 2px 5px; border-radius: 99px; line-height: 1;
-  }
-  .da-chip-x:hover { color: var(--red); background: rgb(248 113 113 / 12%); }
-  .da-add-row { display: flex; gap: 8px; margin: 0 0 12px; }
-  .da-add-row input[type='text'] { flex: 1; }
+  .da-chip-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 99px; line-height: 1; }
+  .da-chip-x:hover { color: var(--red); background: var(--red-soft); }
+  .inline-add { display: flex; gap: 8px; margin: 0 0 12px; }
+  .inline-add input[type='text'] { flex: 1; }
   .da-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-  .da-presets form { margin: 0; }
-  .da-preset {
-    background: none; border: 1px dashed var(--border); border-radius: 99px;
-    padding: 3px 12px; font-size: 12px; color: var(--muted); cursor: pointer; font-family: inherit;
-  }
-  .da-preset:hover { color: var(--accent); border-color: var(--accent); }
+  .da-preset { background: none; border: 1px dashed var(--line-strong); border-radius: 99px; padding: 3px 12px; font-size: 12px; color: var(--muted); cursor: pointer; font-family: inherit; }
+  .da-preset:hover { color: var(--text); border-color: var(--muted); }
 </style>
 
 <script>
+  // read-mode cards: Edit swaps the summary for the form; Cancel resets it
+  document.querySelectorAll<HTMLElement>('.scard[data-editable]').forEach((card) => {
+    const form = card.querySelector<HTMLFormElement>('form.scard-form');
+    card.querySelector('[data-edit]')?.addEventListener('click', () => {
+      card.classList.add('editing');
+      form?.querySelector<HTMLElement>('input:not([type=hidden]), textarea')?.focus();
+    });
+    card.querySelector('[data-cancel]')?.addEventListener('click', () => { form?.reset(); card.classList.remove('editing'); });
+  });
+
+  // index: live search + scroll-spy inside the panel
+  const q = document.getElementById('set-q') as HTMLInputElement | null;
+  q?.addEventListener('input', () => {
+    const v = q.value.trim().toLowerCase();
+    document.querySelectorAll<HTMLAnchorElement>('.set-index a').forEach((a) => {
+      a.hidden = !!v && !(a.textContent!.toLowerCase().includes(v) || (a.dataset.terms ?? '').includes(v));
+    });
+  });
+  const links = new Map([...document.querySelectorAll<HTMLAnchorElement>('.set-index a[data-spy]')].map((a) => [a.dataset.spy!, a]));
+  const spy = new IntersectionObserver((entries) => {
+    for (const e of entries) if (e.isIntersecting) {
+      links.forEach((a) => a.classList.remove('on'));
+      links.get(e.target.id)?.classList.add('on');
+    }
+  }, { root: document.getElementById('acms-panel'), rootMargin: '-15% 0px -70% 0px' });
+  document.querySelectorAll('.scard').forEach((c) => spy.observe(c));
+
   // backup restore: analyze (dry run) → confirm → restore
   const rsFile = document.getElementById('rs-file') as HTMLInputElement | null;
   const rsAnalyze = document.getElementById('rs-analyze');
@@ -636,9 +685,11 @@ const remainingPresets = ORIGIN_PRESETS.filter((p) => !settings.draftsAllowedOri
     rsReport.innerHTML =
       `Backup from <b>${r.exportedAt ? new Date(r.exportedAt).toLocaleString() : 'unknown date'}</b>: ` +
       `${r.posts} posts, ${r.pages} pages, ${r.media} media files, ${r.tags} tags, ` +
-      `${r.links} links, ${r.navItems} nav items, ${r.users} users.` +
+      `${r.links} links, ${r.navItems} nav items, ${r.users} users, ${r.bookings} bookings, ${r.bookingRequests} retry records.` +
+      (!r.retryRecordsIncluded ? ' <b>This older backup lacks booking retry records; use a new v5 backup for migration.</b>' : '') +
       (r.missingBinaries ? ` <b>⚠ ${r.missingBinaries} media binaries missing from the archive.</b>` : '');
-    rsGo?.removeAttribute('hidden');
+    if (r.missingBinaries) rsGo?.setAttribute('hidden', '');
+    else rsGo?.removeAttribute('hidden');
   });
   rsGo?.addEventListener('click', async () => {
     if (!confirm('Replace ALL current content with this backup? This cannot be undone.')) return;