@acms-subir/core 0.3.9 → 0.3.11

package/src/pages/admin/users.astro

@@ -2,7 +2,12 @@
 import Admin from '../../layouts/Admin.astro';
 import Modal from '../../components/Modal.astro';
 import { getRepo } from '../../lib/repo';
-import { hashPassword, validateSession, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { hashPassword, OWNER_ENV } from '../../lib/auth';
+import { getRequestAuth } from '../../lib/auth/request';
+import { AUTH, clerkConfig } from '../../lib/auth/config';
+import { changeAccountEmail, inviteClerkUser, linkClerkUser, revokeClerkInvitation, syncClerkEmails } from '../../lib/auth/accounts';
+import type { AuthInvitation } from '../../lib/auth/store';
+import ReverifyForms from '../../components/auth/ReverifyForms.astro';
 import { issueAccountToken } from '../../lib/email/accounts';
 import { kickEmail } from '../../lib/email/service';
 import { waitUntilFrom } from '../../lib/webhooks';
@@ -14,13 +19,26 @@ import { EDITOR } from '../../lib/editor/config';
 const repo = await getRepo(Astro.locals);
 
 // Only owners manage users. The env-password session is always owner.
-const sessionUserId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const auth = await getRequestAuth(Astro.request, Astro.cookies, Astro.locals);
+const sessionUserId = auth.userId;
+// Clerk mode: credentials live in Clerk; ACMS keeps accounts, roles and the
+// explicit identity links. The issuer scopes invitations and links.
+const clerkMode = AUTH.provider === 'clerk';
+let issuer = '';
+let clerkReady = !clerkMode;
+if (clerkMode) {
+  try { issuer = clerkConfig(Astro.locals).issuer; clerkReady = true; } catch { clerkReady = false; }
+}
 const sessionUser = sessionUserId && sessionUserId !== OWNER_ENV ? await repo.getUser(sessionUserId) : null;
 const isOwner = sessionUserId === OWNER_ENV || sessionUser?.role === 'owner';
 
 let error = '';
 let failedOp = '';
+let failedId = '';
 let notice = '';
+let needsVerification = false;
+// changes that require a fresh Clerk verification (strict policy)
+const SENSITIVE = new Set(['create', 'resend', 'revoke', 'update', 'delete', 'link', 'email']);
 // Signed-in editor apps: anyone signs out their own devices; owners anyone's.
 if (Astro.request.method === 'POST' && sessionUserId) {
   const form = await Astro.request.clone().formData();
@@ -46,14 +64,45 @@ if (Astro.request.method === 'POST' && sessionUserId) {
   }
 }
 if (Astro.url.searchParams.has('signedOut')) notice = 'Signed out. The app has to sign in again to make changes.';
+if (Astro.url.searchParams.has('linked')) notice = 'Account linked. They can now sign in with Clerk; their apps were signed out.';
+if (Astro.url.searchParams.has('emailChanged')) notice = clerkMode ? 'Email updated.' : 'Email updated. They were signed out everywhere and sign in with the new address.';
+if (Astro.url.searchParams.has('invited')) notice = clerkMode ? 'Invitation sent. Clerk emails the sign-up link; it expires in seven days.' : 'Invitation queued.';
 if (Astro.request.method === 'POST' && isOwner && !error) {
   const form = await Astro.request.formData();
   const op = String(form.get('op'));
   failedOp = op;
+  failedId = String(form.get('id') ?? '');
   try {
     await requireSession(Astro.request,Astro.cookies,repo,true);
     if(Astro.request.headers.get('origin')!==Astro.url.origin)throw new Error('Cross-origin requests are not allowed.');
-    if (op === 'create' || op === 'resend') {
+    if (clerkMode) {
+      if (!clerkReady) throw new Error('Clerk sign-in isn’t fully configured, so accounts can’t be changed right now.');
+      if (SENSITIVE.has(op) && !auth.reverified) {
+        needsVerification = true;
+        throw new Error('Changing users needs a sign-in from the last ten minutes. Sign in again, then retry.');
+      }
+      if (op === 'create' || op === 'resend') {
+        if (!await repo.email.rateLimit(`invite:${sessionUserId}`, 10, 60000)) throw new Error('Please wait before sending more invitations.');
+        let data = { email: String(form.get('email') || ''), name: String(form.get('name') || ''), role: form.get('role') as unknown };
+        if (op === 'resend') {
+          const previous = await repo.auth.invitation(issuer, String(form.get('id')));
+          if (!previous || previous.state === 'accepted') throw new Error('This invitation cannot be resent.');
+          // cancel the old one first so only the newest link can grant access
+          if (previous.state === 'pending' || previous.state === 'sending') await revokeClerkInvitation(repo, previous.id, Astro.locals);
+          data = { email: previous.email, name: previous.name, role: previous.role };
+        }
+        await inviteClerkUser(repo, data, Astro.locals);
+        return Astro.redirect('/admin/users?invited=1');
+      }
+      if (op === 'revoke') await revokeClerkInvitation(repo, String(form.get('id')), Astro.locals);
+      if (op === 'link') {
+        const id = String(form.get('id'));
+        await linkClerkUser(repo, id, String(form.get('subject') ?? '').trim(), Astro.locals);
+        return Astro.redirect('/admin/users?linked=1');
+      }
+      if (op === 'update' && String(form.get('password') ?? '')) throw new Error('Passwords are managed by Clerk.');
+    }
+    if (!clerkMode && (op === 'create' || op === 'resend')) {
       if(!await repo.email.rateLimit(`invite:${sessionUserId}`,10,60000))throw new Error('Please wait before sending more invitations.');
       const previous=op==='resend'?await repo.email.token(String(form.get('id'))):null;
       if(op==='resend'&&(!previous||previous.purpose!=='invite'||previous.used_by))throw new Error('This invitation cannot be resent.');
@@ -63,10 +112,15 @@ if (Astro.request.method === 'POST' && isOwner && !error) {
         role:invitedRole},Astro.locals);
       await kickEmail(repo,Astro.locals,waitUntilFrom(Astro.locals));
     }
-    if(op==='revoke')await repo.email.revoke(String(form.get('id')));
+    if(!clerkMode&&op==='revoke')await repo.email.revoke(String(form.get('id')));
+    if (op === 'email') {
+      await changeAccountEmail(repo, String(form.get('id')), String(form.get('email') ?? ''), { notify: form.get('notify') === '1' }, Astro.locals);
+      return Astro.redirect('/admin/users?emailChanged=1');
+    }
     if (op === 'update') {
       const id = String(form.get('id'));
       const password = String(form.get('password') ?? '');
+      if (password && clerkMode) throw new Error('Passwords are managed by Clerk.');
       if (password && (password.length < 12 || password.length > 128)) throw new Error('Use a password between 12 and 128 characters.');
       await repo.updateUser(id, {
         name: String(form.get('name') ?? '').trim() || undefined,
@@ -78,6 +132,8 @@ if (Astro.request.method === 'POST' && isOwner && !error) {
       });
     }
     if (op === 'delete') {
+      // Clerk mode: your own account is your sign-in; another owner removes it
+      if (clerkMode && String(form.get('id')) === sessionUserId) throw new Error('You can’t delete your own account while signed in with it. Ask another owner to remove it.');
       await repo.deleteUser(String(form.get('id')));
       await repo.editor.revokeUserDevices(String(form.get('id')), 'user removed', Date.now());
     }
@@ -87,8 +143,20 @@ if (Astro.request.method === 'POST' && isOwner && !error) {
   }
 }
 
+// Linked accounts follow their Clerk email; refresh before listing (best effort).
+if (Astro.request.method === 'GET' && isOwner && clerkMode && clerkReady) {
+  try { await syncClerkEmails(repo, Astro.locals); } catch { /* Clerk unavailable: keep stored emails */ }
+}
 const users = await repo.listUsers();
-const invitations = isOwner ? await repo.email.invitations() : [];
+type Row = { id: string; email: string; role: AuthInvitation['role']; state: string; expiresAt: number; name?: string };
+const invitations: Row[] = !isOwner ? [] : clerkMode ? (clerkReady ? await repo.auth.invitations(issuer) : []) : await repo.email.invitations();
+// Clerk identity linked to each local account (owners see who can sign in)
+const linked = new Map<string, string>(clerkMode && clerkReady
+  ? (await repo.auth.identities(issuer)).map((r) => [String(r.userId), String(r.subject)]) : []);
+const stateLabel: Record<string, [string, string]> = {
+  sending: ['Sending', 'scheduled'], pending: ['Pending', 'draft'], accepted: ['Accepted', 'published'],
+  revoked: ['Revoked', 'archived'], expired: ['Expired', 'archived'], failed: ['Failed', 'edited'],
+};
 const userById = new Map(users.map((u) => [u.id, u]));
 const devices = sessionUserId ? await repo.editor.listDevices(isOwner ? undefined : sessionUserId) : [];
 const showDevices = EDITOR.enabled || devices.length > 0;
@@ -101,25 +169,64 @@ const ago = (ms: number) => {
   const d = Math.round(h / 24); if (d < 45) return `${d} days ago`;
   return new Date(ms).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric' });
 };
+const initials = (name: string) => name.split(/\s+/).map((w) => w[0] ?? '').join('').slice(0, 2).toUpperCase() || '?';
+const pendingInvites = invitations.filter((i) => i.state === 'pending' || i.state === 'sending').length;
+// a failed drawer action re-renders with that person's drawer open
+const drawerOpen = (id: string) => !!error && failedId === id && ['update', 'link', 'delete'].includes(failedOp);
+const tab = failedOp === 'resend' || failedOp === 'revoke' ? 'invitations' : Astro.url.searchParams.has('signedOut') ? 'devices' : 'members';
 const day = (ms: number) => new Date(ms).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric' });
 const deviceGroups = [...new Set(devices.map((d) => d.userId))].map((uid) => ({ user: userById.get(uid), userId: uid, list: devices.filter((d) => d.userId === uid) }));
 ---
 
 <Admin title="Users" section="users">
   <div class="page-head">
-    <h1>Users</h1>
-    {isOwner && <button class="btn primary" type="button" data-modal="invite-user">Invite user</button>}
+    <div>
+      <h1>Users</h1>
+      <p class="sub">{users.length} {users.length === 1 ? 'person' : 'people'}{clerkMode && isOwner && clerkReady && <> · {linked.size} connected to Clerk</>}</p>
+    </div>
+    {isOwner && clerkReady && <button class="btn primary" type="button" data-modal="invite-user">Invite user</button>}
   </div>
 
   {!isOwner && (
-    <div class="flash error">Only owners can manage users. Ask an owner (or sign in with the owner password) to make changes.</div>
+    <div class="flash error">{clerkMode ? 'Only owners can manage users. Ask an owner to make changes.' : 'Only owners can manage users. Ask an owner (or sign in with the owner password) to make changes.'}</div>
+  )}
+  {error && (
+    <div class="flash error users-flash" role="alert">
+      <span>{error}</span>
+      {needsVerification && (
+        <span class="users-flash-actions">
+          <form class="inline-form" method="post" action="/admin/logout"><button class="btn sm" type="submit" data-acms-signin-again>Sign in again</button></form>
+        </span>
+      )}
+    </div>
   )}
-  {error && <div class="flash error">{error}</div>}
-  {notice && <div class="flash" role="status">{notice}</div>}
+  {notice && !error && <div class="flash" role="status">{notice}</div>}
+  {clerkMode && <ReverifyForms />}
 
-  {isOwner && (
+  <section class="card auth-strip" aria-labelledby="auth-h">
+    <span class="auth-mark" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6zM9 12l2 2 4-4" /></svg>
+    </span>
+    <div class="auth-main">
+      <h2 id="auth-h">{clerkMode ? 'Clerk' : 'Built-in'} sign-in
+        {clerkMode && <span class={`pill ${clerkReady ? 'published' : 'edited'}`}>{clerkReady ? 'Configured' : 'Needs configuration'}</span>}
+      </h2>
+      <p class="hint">
+        {clerkMode
+          ? 'Clerk handles passwords, verification and recovery. ACMS roles decide what each person can do; only invited or linked accounts get in.'
+          : 'People sign in with their email and a password they choose from their invitation. Password resets use your email settings.'}
+        {clerkMode && isOwner && clerkReady && ' Changes here ask you to verify it’s you.'}
+      </p>
+      {clerkMode && !clerkReady && (
+        <p class="hint">Set <code>PUBLIC_CLERK_PUBLISHABLE_KEY</code>, <code>CLERK_SECRET_KEY</code> and <code>CLERK_AUTHORIZED_PARTIES</code> in the deployment environment.</p>
+      )}
+    </div>
+    <p class="hint auth-where">Set in the deployment configuration</p>
+  </section>
+
+  {isOwner && clerkReady && (
     <Modal id="invite-user" title="Invite user" open={!!error && failedOp === 'create'}>
-      <form method="post">
+      <form method="post" data-reverify>
         <input type="hidden" name="op" value="create" />
         <div class="field-row">
           <label class="field">
@@ -137,72 +244,210 @@ const deviceGroups = [...new Set(devices.map((d) => d.userId))].map((uid) => ({
           <span>Email</span>
           <input type="email" name="email" placeholder="email@example.com" required />
         </label>
-        <p class="hint">They’ll receive a single-use invitation valid for seven days and choose their own password.</p>
+        <p class="hint">{clerkMode
+          ? 'Clerk emails them a sign-up link that’s valid for seven days. Their account gets this role once they accept.'
+          : 'They’ll receive a single-use invitation valid for seven days and choose their own password.'}</p>
         <div class="modal-foot">
           <button class="btn ghost" type="button" data-close>Cancel</button>
           <button class="btn primary" type="submit">Send invitation</button>
         </div>
-        <p class="hint modal-note">They sign in at <code>/admin/login</code> with email + password. Choose a default role for their account. Owners also manage users.</p>
+        <p class="hint modal-note">{clerkMode
+          ? <>Already have an ACMS account? Open it in the list and link its Clerk user ID instead, so posts and roles stay attached.</>
+          : <>They sign in at <code>/admin/login</code> with email + password. Choose a default role for their account. Owners also manage users.</>}</p>
       </form>
     </Modal>
   )}
 
-  {isOwner && <section class="card card-pad" style="margin-bottom:20px"><h2>Invitations</h2><p class="hint">Manage delivery in <a href="/admin/email">Email settings</a>. Resending revokes the previous link.</p>
-    <table class="list"><thead><tr><th>Email</th><th>Role</th><th>Status</th><th>Actions</th></tr></thead><tbody>
-      {invitations.map(i=><tr><td>{i.email}</td><td>{i.role}</td><td>{i.state}</td><td>{i.state!=='accepted'&&<form method="post" class="inline-form"><input type="hidden" name="id" value={i.id}/><button class="btn sm" name="op" value="resend">Resend</button>{i.state==='pending'&&<button class="btn sm ghost" name="op" value="revoke">Revoke</button>}</form>}</td></tr>)}
-      {!invitations.length&&<tr><td colspan="4">No invitations yet.</td></tr>}
-    </tbody></table></section>}
-  <div class="card">
-    <table class="list">
-      <thead><tr><th>User</th><th>Role</th><th></th></tr></thead>
+  {(isOwner && clerkReady || showDevices) && (
+    <div class="seg users-tabs" role="tablist" aria-label="Users sections">
+      <button type="button" role="tab" id="tab-members" aria-controls="panel-members" aria-selected={tab === 'members' ? 'true' : 'false'} data-users-tab="members">Members <span class="count">{users.length}</span></button>
+      {isOwner && clerkReady && <button type="button" role="tab" id="tab-invitations" aria-controls="panel-invitations" aria-selected={tab === 'invitations' ? 'true' : 'false'} data-users-tab="invitations">Invitations{pendingInvites > 0 && <span class="count">{pendingInvites}</span>}</button>}
+      {showDevices && <button type="button" role="tab" id="tab-devices" aria-controls="panel-devices" aria-selected={tab === 'devices' ? 'true' : 'false'} data-users-tab="devices">Signed-in apps{devices.length > 0 && <span class="count">{devices.length}</span>}</button>}
+    </div>
+  )}
+
+  <section class="card users-panel" id="panel-members" role="tabpanel" aria-labelledby="tab-members" data-users-panel="members" hidden={tab !== 'members'}>
+    <table class="list users-table">
+      <thead><tr><th>Name</th><th>Role</th>{clerkMode && isOwner && clerkReady && <th>Sign-in</th>}<th><span class="sr-only">Actions</span></th></tr></thead>
       <tbody>
         {users.map((u) => (
-          <tr>
+          <tr data-user-row={isOwner ? `user-${u.id}` : undefined}>
             <td>
-              {isOwner ? (
-                <form method="post" class="user-form">
-                  <input type="hidden" name="op" value="update" />
-                  <input type="hidden" name="id" value={u.id} />
-                  <input type="text" name="name" value={u.name} class="w-name" aria-label="Name" />
-                  <span class="t-sub user-email">{u.email}</span>
-                  <select name="role" class="w-role" aria-label="Role">
-                    {Role.options.map(role => <option value={role} selected={u.role === role}>{roleLabels[role]}</option>)}
-                  </select>
-                  <input type="password" name="password" placeholder="New password (optional)" class="w-pass" aria-label="New password" />
-                  <div class="user-form-row">
-                    <span class="t-sub">/author/</span>
-                    <input type="text" name="slug" value={u.slug} placeholder={authorSlug(u)} class="w-slug" aria-label="Author slug" />
-                    <input type="url" name="avatar" value={u.avatar} placeholder="Avatar URL (media library or https://…)" class="w-grow" aria-label="Avatar URL" />
-                  </div>
-                  <textarea name="bio" rows="2" placeholder="Short bio — shown on the author card under posts and on the author page" class="w-full" aria-label="Bio">{u.bio}</textarea>
-                  <button class="btn sm" type="submit">Save</button>
-                  <a class="btn sm ghost" href={`/author/${authorSlug(u)}`} target="_blank" rel="noopener">View profile ↗</a>
-                </form>
-              ) : (
-                <>
-                  <span class="t-title">{u.name}</span>
-                  <div class="t-sub">{u.email}</div>
-                </>
-              )}
+              <div class="user-cell">
+                <span class="avatar user-av">{u.avatar ? <img src={u.avatar} alt="" loading="lazy" /> : initials(u.name)}</span>
+                <span class="user-who">
+                  <span class="t-title">{u.name}{u.id === sessionUserId && <span class="user-you">You</span>}</span>
+                  <span class="t-sub">{u.email}</span>
+                </span>
+              </div>
             </td>
-            <td><span class="role-mark"><i class={u.role === 'owner' ? 'is-owner' : ''} aria-hidden="true"></i>{roleLabels[u.role]}</span></td>
+            <td><span class={`pill ${u.role === 'owner' ? 'draft' : 'scheduled'}`}>{roleLabels[u.role]}</span></td>
+            {clerkMode && isOwner && clerkReady && (
+              <td>{linked.has(u.id)
+                ? <span class="pill published" title={linked.get(u.id)}>Connected</span>
+                : <span class="pill archived">Not linked</span>}</td>
+            )}
             <td class="td-actions">
-              {isOwner && (
-                <form class="inline-form" method="post" onsubmit="return confirm('Delete this user? Their posts stay, attributed to no one.')">
-                  <input type="hidden" name="op" value="delete" />
-                  <input type="hidden" name="id" value={u.id} />
-                  <button class="btn sm ghost danger" type="submit">Delete</button>
-                </form>
-              )}
+              {isOwner && <button class="btn sm ghost" type="button" data-modal={`user-${u.id}`} aria-label={`Edit ${u.name}`}>Edit</button>}
             </td>
           </tr>
         ))}
-        {users.length === 0 && <tr><td colspan="3" class="hint">No user accounts yet — the owner password from <code>.env</code> is the only login. Invite accounts above to give posts real author bylines.</td></tr>}
+        {users.length === 0 && <tr><td colspan="4" class="hint">{clerkMode
+          ? 'No user accounts yet. The owner set in CLERK_OWNER_USER_ID gets an account on first sign-in; invite everyone else.'
+          : <>No user accounts yet — the owner password from <code>.env</code> is the only login. Invite accounts to give posts real author bylines.</>}</td></tr>}
       </tbody>
     </table>
-  </div>
+  </section>
+
+  {isOwner && users.map((u) => {
+    const isLinked = linked.has(u.id);
+    const self = clerkMode && u.id === sessionUserId;
+    const formId = `upd-${u.id}`;
+    return (
+      <>
+        <dialog class="modal drawer" id={`user-${u.id}`} aria-labelledby={`user-h-${u.id}`} open={drawerOpen(u.id)}>
+          <header class="drawer-head">
+            <span class="avatar drawer-av" data-avatar-preview>{u.avatar ? <img src={u.avatar} alt="" /> : initials(u.name)}</span>
+            <div class="drawer-title">
+              <h2 id={`user-h-${u.id}`}>{u.name}</h2>
+              <a class="t-sub" href={`/author/${authorSlug(u)}`} target="_blank" rel="noopener">/author/{authorSlug(u)} ↗</a>
+            </div>
+            <button class="modal-x" type="button" data-close aria-label="Close">✕</button>
+          </header>
+          <form id={formId} method="post" data-reverify>
+            <input type="hidden" name="op" value="update" />
+            <input type="hidden" name="id" value={u.id} />
+          </form>
+          <div class="drawer-body">
+            {drawerOpen(u.id) && <p class="flash error" role="alert">{error}</p>}
+            <section class="drawer-sec">
+              <h3>Account</h3>
+              <div class="drawer-kv">
+                <span class="k">Email</span>
+                <span class="v">
+                  <span class="drawer-email">{u.email}</span>
+                  {clerkMode && isLinked
+                    ? <span class="pill archived" title="Change it in Clerk; ACMS updates it when this page loads.">Managed by Clerk</span>
+                    : clerkReady && <button class="btn sm" type="button" data-modal={`email-${u.id}`}>Change</button>}
+                </span>
+              </div>
+              <label class="field">
+                <span>Role</span>
+                <select name="role" form={formId}>
+                  {Role.options.map(role => <option value={role} selected={u.role === role}>{roleLabels[role]}</option>)}
+                </select>
+              </label>
+              {!clerkMode && (
+                <label class="field">
+                  <span>New password <em class="hint">optional</em></span>
+                  <input type="password" name="password" form={formId} placeholder="Leave blank to keep it" minlength="12" maxlength="128" autocomplete="new-password" />
+                </label>
+              )}
+            </section>
+
+            {clerkMode && clerkReady && (
+              <section class="drawer-sec">
+                <h3>Sign-in</h3>
+                <div class="drawer-kv">
+                  <span class="k">Clerk account</span>
+                  <span class="v">{isLinked
+                    ? <span class="pill published" title={linked.get(u.id)}>Connected</span>
+                    : <span class="pill archived">Not linked</span>}</span>
+                </div>
+                {!isLinked && (
+                  <form method="post" class="drawer-link" data-reverify>
+                    <input type="hidden" name="op" value="link" />
+                    <input type="hidden" name="id" value={u.id} />
+                    <input type="text" name="subject" placeholder="user_…" pattern="user_[A-Za-z0-9]+" required autocomplete="off" spellcheck="false" aria-label="Clerk user ID" aria-describedby={`link-hint-${u.id}`} />
+                    <button class="btn sm" type="submit">Link</button>
+                    <small class="hint" id={`link-hint-${u.id}`}>Paste their Clerk user ID from the Clerk dashboard. Posts and role stay with this account.</small>
+                  </form>
+                )}
+              </section>
+            )}
+
+            <section class="drawer-sec">
+              <h3>Author profile</h3>
+              <label class="field">
+                <span>Display name</span>
+                <input type="text" name="name" form={formId} value={u.name} required data-avatar-name />
+              </label>
+              <label class="field">
+                <span>Profile URL</span>
+                <span class="slug-wrap"><span class="slug-prefix">/author/</span><input type="text" name="slug" form={formId} value={u.slug} placeholder={authorSlug(u)} /></span>
+              </label>
+              <label class="field">
+                <span>Avatar <em class="hint">image URL from the media library or https://</em></span>
+                <input type="url" name="avatar" form={formId} value={u.avatar} placeholder="https://…" data-avatar-input />
+              </label>
+              <label class="field">
+                <span>Bio</span>
+                <textarea name="bio" form={formId} rows="4" placeholder="Shown on the author card under posts and on the author page">{u.bio}</textarea>
+              </label>
+            </section>
+          </div>
+          <footer class="drawer-foot">
+            {!self && (
+              <form method="post" class="inline-form" data-reverify onsubmit="return confirm('Delete this user? Their posts stay, attributed to no one. Their apps are signed out.')">
+                <input type="hidden" name="op" value="delete" />
+                <input type="hidden" name="id" value={u.id} />
+                <button class="btn ghost danger" type="submit">Delete user</button>
+              </form>
+            )}
+            <span class="spacer"></span>
+            <button class="btn ghost" type="button" data-close>Cancel</button>
+            <button class="btn primary" type="submit" form={formId}>Save</button>
+          </footer>
+        </dialog>
+
+        {!(clerkMode && isLinked) && clerkReady && (
+          <Modal id={`email-${u.id}`} title="Change email" open={!!error && failedOp === 'email' && failedId === u.id}>
+            <form method="post" data-reverify>
+              <input type="hidden" name="op" value="email" />
+              <input type="hidden" name="id" value={u.id} />
+              {!!error && failedOp === 'email' && failedId === u.id && <p class="flash error" role="alert">{error}</p>}
+              <label class="field">
+                <span>Current</span>
+                <input type="email" value={u.email} readonly tabindex="-1" class="is-readonly" />
+              </label>
+              <label class="field">
+                <span>New email</span>
+                <input type="email" name="email" placeholder="name@example.com" required autocomplete="off" />
+              </label>
+              {clerkMode
+                ? <p class="callout">This account isn’t linked to Clerk yet, so the email is only used for notifications and the author page. Linking still uses their Clerk user ID.</p>
+                : <>
+                    <p class="callout warn">This email is their login. They’ll be signed out everywhere, including the editor app, and sign in with the new address.</p>
+                    <label class="check-row"><input type="checkbox" name="notify" value="1" checked /> <span>Let the previous address know about this change</span></label>
+                  </>}
+              <div class="modal-foot">
+                <button class="btn ghost" type="button" data-close>Cancel</button>
+                <button class="btn primary" type="submit">Change email</button>
+              </div>
+            </form>
+          </Modal>
+        )}
+      </>
+    );
+  })}
+
+  {isOwner && clerkReady && <section class="card users-panel" id="panel-invitations" role="tabpanel" aria-labelledby="tab-invitations" data-users-panel="invitations" hidden={tab !== 'invitations'}>
+    <p class="hint users-panel-hint">{clerkMode
+      ? 'Clerk delivers these emails; your email settings aren’t needed for them. Resending cancels the previous link.'
+      : <>Manage delivery in <a href="/admin/email">Email settings</a>. Resending revokes the previous link.</>}</p>
+    <table class="list"><thead><tr><th>Email</th><th>Role</th><th>Status</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody>
+      {invitations.map(i=>{
+        const [label, tone] = clerkMode ? (stateLabel[i.state] ?? [i.state, 'archived']) : [i.state, ''];
+        return <tr><td>{i.email}{clerkMode && i.name && i.name !== i.email && <div class="t-sub">{i.name}</div>}</td><td>{roleLabels[i.role] ?? i.role}</td>
+          <td>{clerkMode ? <span class={`pill ${tone}`}>{label}</span> : i.state}{clerkMode && i.state === 'pending' && <div class="t-sub">Expires {day(i.expiresAt)}</div>}</td>
+          <td class="td-actions">{i.state!=='accepted'&&<form method="post" class="inline-form" data-reverify><input type="hidden" name="id" value={i.id}/><button class="btn sm" name="op" value="resend">Resend</button>{(i.state==='pending'||(clerkMode&&i.state==='sending'))&&<button class="btn sm ghost" name="op" value="revoke">Revoke</button>}</form>}</td></tr>;
+      })}
+      {!invitations.length&&<tr><td colspan="4" class="hint">No invitations yet. Use <b>Invite user</b> to add someone.</td></tr>}
+    </tbody></table></section>}
+
   {showDevices && (
-    <section class="card devices-card" id="devices" aria-labelledby="devices-h">
+    <section class="card devices-card users-panel" id="panel-devices" role="tabpanel" aria-labelledby="tab-devices" data-users-panel="devices" hidden={tab !== 'devices'}>
+      <span id="devices"></span>
       <header class="devices-head">
         <div>
           <h2 id="devices-h">Signed-in apps</h2>
@@ -252,4 +497,50 @@ const deviceGroups = [...new Set(devices.map((d) => d.userId))].map((uid) => ({
       ))}
     </section>
   )}
+
+  <script>
+    // Tabs: Members / Invitations / Signed-in apps (the server picks the first one).
+    const tabs = [...document.querySelectorAll<HTMLButtonElement>('[data-users-tab]')];
+    const select = (name: string, push = false) => {
+      if (!tabs.some((t) => t.dataset.usersTab === name)) return;
+      for (const t of tabs) t.setAttribute('aria-selected', String(t.dataset.usersTab === name));
+      for (const p of document.querySelectorAll<HTMLElement>('[data-users-panel]')) p.hidden = p.dataset.usersPanel !== name;
+      if (push) history.replaceState(null, '', name === 'members' ? location.pathname + location.search : `#${name}`);
+    };
+    for (const t of tabs) t.addEventListener('click', () => select(t.dataset.usersTab!, true));
+    if (location.hash) select(location.hash.slice(1));
+
+    // A click anywhere on a member row opens their drawer.
+    document.querySelectorAll<HTMLElement>('tr[data-user-row]').forEach((row) => {
+      row.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).closest('a, button, input, select, textarea')) return;
+        const dlg = document.getElementById(row.dataset.userRow!);
+        if (dlg instanceof HTMLDialogElement && !dlg.open) dlg.showModal();
+      });
+    });
+
+    for (const dlg of document.querySelectorAll<HTMLDialogElement>('dialog.drawer')) {
+      const preview = dlg.querySelector<HTMLElement>('[data-avatar-preview]');
+      const avatar = dlg.querySelector<HTMLInputElement>('[data-avatar-input]');
+      const name = dlg.querySelector<HTMLInputElement>('[data-avatar-name]');
+      const paint = () => {
+        if (!preview) return;
+        const url = avatar?.value.trim() ?? '';
+        if (url && avatar?.checkValidity()) {
+          const img = document.createElement('img');
+          img.src = url; img.alt = '';
+          preview.replaceChildren(img);
+        } else {
+          preview.textContent = (name?.value ?? '').split(/\s+/).map((w) => w[0] ?? '').join('').slice(0, 2).toUpperCase() || '?';
+        }
+      };
+      avatar?.addEventListener('input', paint);
+      name?.addEventListener('input', () => { if (!avatar?.value.trim()) paint(); });
+      // closing without saving drops unsaved edits
+      dlg.addEventListener('close', () => {
+        dlg.querySelectorAll<HTMLFormElement>('form').forEach((f) => f.reset());
+        paint();
+      });
+    }
+  </script>
 </Admin>

package/src/pages/api/backup.ts

@@ -1,17 +1,14 @@
 import type { APIRoute } from 'astro';
-import { validateSession, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
+import { OWNER_ENV } from '../../lib/auth';
+import { validateRequestSession } from '../../lib/auth/request';
 import { getRepo } from '../../lib/repo';
-import { getMediaStore } from '../../lib/media/store';
-import { exportContent } from '../../lib/backup/content';
-import { zipStream, type ZipEntry } from '../../lib/backup/zip';
+import { backupArchive } from '../../lib/backup/archive';
 
-// Full-site backup as one ZIP download: content.json with every table,
-// fetched through the repo so sqlite and D1 both export the same shape,
-// plus the media binaries (originals + variants) under media/<key>.
-// Password hashes never leave the repo layer, so user accounts export
-// without them — after a restore, sign in with ADMIN_PASSWORD and reset.
-export const GET: APIRoute = async ({ cookies, locals }) => {
-  const sessionUserId = (await validateSession(cookies.get(SESSION_COOKIE)?.value, locals));
+// Full-site backup as one ZIP download (lib/backup/archive.ts). User
+// accounts export without password hashes — after a restore, sign in with
+// ADMIN_PASSWORD and reset.
+export const GET: APIRoute = async ({ request, cookies, locals }) => {
+  const sessionUserId = (await validateRequestSession(request, cookies, locals));
   if (!sessionUserId) {
     return Response.json({ error: 'Unauthorized' }, { status: 401 });
   }
@@ -23,23 +20,10 @@ export const GET: APIRoute = async ({ cookies, locals }) => {
   }
 
   const now = Date.now();
-  const content = await exportContent(repo, now);
-  const { media } = content;
-
-  const store = getMediaStore(locals);
-  async function* entries(): AsyncGenerator<ZipEntry> {
-    yield { name: 'content.json', data: new TextEncoder().encode(JSON.stringify(content, null, 2)) };
-    for (const m of media) {
-      for (const key of [m.key, ...m.variants.map((v) => v.key)]) {
-        const obj = await store.get(key);
-        if (!obj) throw new Error('Backup incomplete: a media object is missing.');
-        yield { name: `media/${key}`, data: new Uint8Array(await new Response(obj.body).arrayBuffer()) };
-      }
-    }
-  }
+  const archive = await backupArchive(repo, locals, now);
 
   const stamp = new Date(now).toISOString().slice(0, 10);
-  return new Response(zipStream(entries(), now), {
+  return new Response(archive, {
     headers: {
       'Content-Type': 'application/zip',
       'Cache-Control': 'no-store',