@acms-subir/core 0.3.9 → 0.3.11

package/src/actions/index.ts

@@ -7,20 +7,21 @@ import { z } from 'astro:schema';
 import type { ActionAPIContext } from 'astro:actions';
 import { getRepo } from '../lib/repo';
 import { getMediaStore } from '../lib/media/store';
-import { validateSession, SESSION_COOKIE } from '../lib/auth';
+import { validateRequestSession } from '../lib/auth/request';
 import { DocTranslations, LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
 import { env } from '../lib/env';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { invalidateRedirectCache } from '../middleware';
-import { isPrivateHost } from '../lib/net';
+import { resolvesToPrivate } from '../lib/net';
 import { normalizeCalendarSrc } from '../lib/calendar/src';
+import { saveCalendar } from '../lib/calendar/admin';
 import { getCalendarEvents } from '../lib/calendar/ics';
 import { siteLocale } from '../lib/dates';
 import { normalizePageLocale, localeHomeUrl } from '../lib/i18n';
 import { CALENDAR, bookingsEnabled } from '../lib/calendar/config';
 import { holdConflicts } from '../lib/booking/holds';
 import { setBookingStatus } from '../lib/booking/service';
-import { eventTimeZone, featuredOccurrence, formatOccurrence, isValidTimeZone, normalizeEventTimes, safeColor } from '../lib/calendar/events';
+import { eventTimeZone, featuredOccurrence, formatOccurrence, isValidTimeZone, normalizeEventTimes } from '../lib/calendar/events';
 import { eventsFromCsv, eventsFromIcs, eventsFromVEvents } from '../lib/calendar/import';
 import { loadFeed } from '../lib/calendar/ics';
 import { NATIVE_ALL } from '../lib/calendar/render';
@@ -49,7 +50,7 @@ async function designChanges(repo: Awaited<ReturnType<typeof getRepo>>) {
 // All admin mutations live here. The middleware only guards /admin pages,
 // so every action re-checks the session itself.
 async function requireAdmin(ctx: ActionAPIContext) {
-  if (!(await validateSession(ctx.cookies.get(SESSION_COOKIE)?.value, ctx.locals))) {
+  if (!(await validateRequestSession(ctx.request, ctx.cookies, ctx.locals))) {
     throw new ActionError({ code: 'UNAUTHORIZED', message: 'Not signed in.' });
   }
 }
@@ -536,7 +537,7 @@ export const server = {
     applyDesign: defineAction({
       input: z.object({}),
       handler: async (_input, ctx) => {
-        const userId = await validateSession(ctx.cookies.get(SESSION_COOKIE)?.value, ctx.locals);
+        const userId = await validateRequestSession(ctx.request, ctx.cookies, ctx.locals);
         if (!userId) throw new ActionError({ code: 'UNAUTHORIZED', message: 'Not signed in.' });
         const repo = await getRepo(ctx.locals);
         const changes = await designChanges(repo);
@@ -775,7 +776,7 @@ export const server = {
         let res: Response | null = null;
         for (let hop = 0; hop < 5; hop++) {
           const u = new URL(current);
-          if (!/^https?:$/.test(u.protocol) || isPrivateHost(u.hostname)) {
+          if (!/^https?:$/.test(u.protocol) || await resolvesToPrivate(u.hostname)) {
             throw new ActionError({ code: 'BAD_REQUEST', message: 'That URL can’t be bookmarked.' });
           }
           res = await fetch(u.href, {
@@ -1212,32 +1213,11 @@ export const server = {
       handler: async ({ id, ...data }, ctx) => {
         await requireAdmin(ctx);
         const repo = await getRepo(ctx.locals);
-        const existing = id ? await repo.getCalendar(id) : null;
-        if (id && !existing) throw new ActionError({ code: 'NOT_FOUND', message: 'Calendar not found.' });
-        const kind = existing?.kind ?? data.kind ?? 'native';
-        let feedUrl = existing?.feedUrl ?? '';
-        if (kind === 'feed' && (data.feedUrl !== undefined || !existing)) {
-          const normalized = normalizeCalendarSrc(data.feedUrl ?? '');
-          if (!normalized) throw new ActionError({ code: 'BAD_REQUEST', message: 'Paste a Google Calendar link, a calendar ID, or an .ics feed URL.' });
-          feedUrl = normalized;
+        try { return { calendar: await saveCalendar(repo, id, data) }; }
+        catch (e) {
+          if (e instanceof ApiError) throw new ActionError({ code: e.status === 404 ? 'NOT_FOUND' : 'BAD_REQUEST', message: e.message });
+          throw e;
         }
-        const base = slugify(data.slug || data.name);
-        let slug = base;
-        for (let n = 2; ; n++) {
-          const clash = await repo.getCalendarBySlug(slug);
-          if (!clash || clash.id === id) break;
-          slug = `${base}-${n}`;
-        }
-        const fields = {
-          name: data.name, slug, color: safeColor(data.color ?? existing?.color ?? '#4f46e5'),
-          description: data.description ?? existing?.description ?? '', feedUrl,
-          visibility: data.visibility ?? existing?.visibility ?? 'public',
-        };
-        if (existing) {
-          await repo.updateCalendar(existing.id, fields);
-          return { calendar: (await repo.getCalendar(existing.id))! };
-        }
-        return { calendar: await repo.createCalendar({ ...fields, kind }) };
       },
     }),
     reorder: defineAction({

package/src/components/AppAccess.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import type { AppAccessState } from '../lib/mobile/access-admin';
+import type { MobileAccess } from '../lib/schema';
+
+// Admin → Mobile app → App access: what visitor and staff apps may do on
+// this site. Each change saves at once; switching something off makes its
+// app routes answer "turned off" immediately.
+
+const ENDPOINT = '/api/mobile/access';
+async function api(body?: Record<string, unknown>): Promise<AppAccessState> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as AppAccessState;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+const BLOCKER: Record<NonNullable<AppAccessState['guestSignIn']['blocker']>, string> = {
+  calendar: 'Turn on the calendar to use guest sign-in.',
+  email: 'Set up email sending in Settings → Email first; sign-in codes go out by email.',
+  encryption: 'Add EMAIL_ENCRYPTION_KEY to the server first; it protects codes waiting to be sent.',
+};
+
+export default function AppAccess() {
+  const [state, setState] = useState<AppAccessState | null>(null);
+  const [error, setError] = useState('');
+  const [saved, setSaved] = useState('');
+  // overlapping saves: only the newest reply may replace what's on screen
+  const latest = useRef(0);
+  useEffect(() => { api().then(setState, (e) => setError(errText(e))); }, []);
+  if (!state) return error ? <p className="flash error">{error}</p> : <div className="ma-skel" aria-busy="true" aria-label="Loading"><i /><i /></div>;
+  const a = state.access;
+
+  const save = async (patch: Partial<MobileAccess>, note = 'Saved.') => {
+    setError(''); setSaved('');
+    const n = ++latest.current;
+    // show the change at once; reload the server's copy if it is refused
+    setState((s) => s && { ...s, access: { ...s.access, ...patch } });
+    try { const next = await api({ action: 'save', access: patch }); if (n === latest.current) { setState(next); setSaved(note); } }
+    catch (e) { setError(errText(e)); if (n === latest.current) api().then(setState, () => {}); }
+  };
+  const signOutAll = async () => {
+    if (!confirm(`Sign out ${state.guestSignIn.devices === 1 ? 'the 1 device' : `all ${state.guestSignIn.devices} devices`}? People sign in again with a new code.`)) return;
+    try { setState(await api({ action: 'signOutGuests' })); setSaved('Everyone was signed out.'); } catch (e) { setError(errText(e)); }
+  };
+  const Switch = ({ on, label, onChange, disabled }: { on: boolean; label: string; onChange: (v: boolean) => void; disabled?: boolean }) => (
+    <button type="button" role="switch" aria-checked={on} aria-label={label} disabled={disabled} className={`acc-switch${on ? ' on' : ''}`} onClick={() => onChange(!on)}><i /></button>
+  );
+  const Num = ({ value, min, max, label, field }: { value: number; min: number; max: number; label: string; field: 'bookingsPerEmailDay' | 'responsesPerFormDay' }) => (
+    <input className="acc-num" type="number" inputMode="numeric" min={min} max={max} defaultValue={value} aria-label={label}
+      onBlur={(e) => { const n = Math.round(Number(e.currentTarget.value)); if (Number.isFinite(n) && n !== value && n >= min && n <= max) save({ [field]: n }); else e.currentTarget.value = String(value); }} />
+  );
+  const guest = state.guestSignIn;
+
+  return (
+    <div className="acc">
+      {(error || saved) && <p className={`flash ${error ? 'error' : 'ok'}`} role="status">{error || saved}</p>}
+      <section className="card card-pad">
+        <div className="card-head"><b>App access</b><span className="hint">What visitor apps can do on this site</span></div>
+        {state.modules.calendar && (
+          <div className="acc-row">
+            <div><b>Change bookings from the app</b><small>Visitors can view, cancel and move a booking with its private link.</small></div>
+            <Switch on={a.bookingChanges} label="Change bookings from the app" onChange={(v) => save({ bookingChanges: v })} />
+          </div>
+        )}
+        {state.modules.calendar && (
+          <div className="acc-row">
+            <div>
+              <b>Guest sign-in</b>
+              <small>“My bookings” with a code sent by email. {guest.devices > 0 ? `${guest.devices.toLocaleString()} ${guest.devices === 1 ? 'device' : 'devices'} signed in.` : 'No devices signed in.'}</small>
+              {guest.blocker && a.guestSignIn && <small className="acc-warn">{BLOCKER[guest.blocker]}</small>}
+            </div>
+            <div className="acc-actions">
+              {guest.devices > 0 && <button type="button" className="btn sm ghost danger" onClick={signOutAll}>Sign out all</button>}
+              <Switch on={a.guestSignIn} label="Guest sign-in" onChange={(v) => save({ guestSignIn: v })} />
+            </div>
+          </div>
+        )}
+        <div className="acc-row">
+          <div><b>Form responses from the app</b><small>Published forms can be filled in from the app.</small></div>
+          <Switch on={a.forms} label="Form responses from the app" onChange={(v) => save({ forms: v })} />
+        </div>
+        <div className="acc-row">
+          <div><b>Links page</b><small>The app can show your links page.</small></div>
+          <Switch on={a.links} label="Links page" onChange={(v) => save({ links: v })} />
+        </div>
+      </section>
+
+      <section className="card card-pad">
+        <div className="card-head"><b>Limits</b><span className="hint">0 means no limit</span></div>
+        {state.modules.calendar && (
+          <div className="acc-row">
+            <div><b>Bookings per email per day</b><small>New bookings and RSVPs from one address, on the website and in apps. Staff bookings don’t count.</small></div>
+            <Num value={a.bookingsPerEmailDay} min={0} max={1000} label="Bookings per email per day" field="bookingsPerEmailDay" />
+          </div>
+        )}
+        <div className="acc-row">
+          <div><b>Responses per form per day</b><small>From apps. Extra responses are refused until tomorrow.</small></div>
+          <Num value={a.responsesPerFormDay} min={0} max={100000} label="Responses per form per day" field="responsesPerFormDay" />
+        </div>
+        {state.modules.calendar && (
+          <div className="acc-row">
+            <div><b>Who changes rooms, hours and calendars</b><small>In the staff app. Bookings, events and content stay open to all staff.</small></div>
+            <div className="seg" role="group" aria-label="Who changes rooms, hours and calendars">
+              <button type="button" aria-pressed={a.scheduleRoles === 'admins'} onClick={() => a.scheduleRoles !== 'admins' && save({ scheduleRoles: 'admins' })}>Admins + owners</button>
+              <button type="button" aria-pressed={a.scheduleRoles === 'staff'} onClick={() => a.scheduleRoles !== 'staff' && save({ scheduleRoles: 'staff' })}>All staff</button>
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/components/DesignManager.tsx

@@ -7,12 +7,13 @@ import ThemeSectionsEditor, { SectionsReview, useDesignApi, type SectionFocus }
 import { checkLayouts, type Check } from './sections/checks';
 import { EMPTY_TARGETS } from './sections/SectionFields';
 import DesignAccess from './DesignAccess';
+import ThemeTransfer, { type ThemeTransferHandle } from './ThemeTransfer';
 import '../styles/theme-editor.css';
 
 // Design screen: pick a code-first theme (src/themes/<slug>/), layer sparse
 // token overrides on top (saved to settings.designOverrides — the theme files
-// are never written to), set the site logo, and export the effective design
-// as a committable theme.json.
+// are never written to), set the site logo, and export/import the design as
+// an .acms-theme.zip (ThemeTransfer) or the effective tokens as theme.json.
 //
 // Every change stages into settings.draftDesign — the preview iframe renders
 // the staged design (?designPreview=1, admin-only) while visitors keep the
@@ -30,6 +31,8 @@ interface ThemeInfo {
   version: string;
   templateCount: number;
   sectionCount: number;
+  /** from the project's src/themes/ (its code lives in the site repo) */
+  project: boolean;
 }
 
 // post-page toggles: designOverrides key + which theme default backs it
@@ -147,6 +150,8 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
   const [faviconPickerOpen, setFaviconPickerOpen] = useState(false);
   const [coverPickerOpen, setCoverPickerOpen] = useState(false);
   const [copied, setCopied] = useState(false);
+  const transferRef = useRef<ThemeTransferHandle>(null);
+  const [justPublished, setJustPublished] = useState(false);
   const [tick, setTick] = useState(0);
   const [previewPage, setPreviewPage] = useState<'home' | 'post'>('home');
   // open on the device you're most likely designing for: desktop on a wide
@@ -301,6 +306,7 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
     setPending(false);
     setChanges([]);
     setVersions(null);
+    setJustPublished(true);
     setTick((t) => t + 1);
     void designApi.reload();
   };
@@ -348,6 +354,12 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
     location.reload();
   };
 
+  // export/import read the stored draft: land queued edits first
+  const flushAll = async () => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; if (!(await doSave())) return false; }
+    return flushSections.current();
+  };
+
   const discardDesign = async () => {
     if (!window.confirm('Discard the staged design changes and go back to the live design? This cannot be undone.')) return;
     if (timer.current) { clearTimeout(timer.current); timer.current = null; }
@@ -433,7 +445,11 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
               <span className={`lm-savestate ${saveState}`}>
                 {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? (saveMessage || 'Save failed') : null}
               </span>
-              {!editorOnly && <button className="btn sm ghost" type="button" onClick={() => void openHistory()}>History</button>}
+              {!editorOnly && <>
+                <button className="btn sm ghost" type="button" onClick={() => transferRef.current?.openImport()} title="Bring in a theme exported from another site or machine">Import</button>
+                <button className="btn sm ghost" type="button" onClick={() => transferRef.current?.openExport()} title="Download this design as a theme file">Export</button>
+                <button className="btn sm ghost" type="button" onClick={() => void openHistory()}>History</button>
+              </>}
             </div>
           </div>
 
@@ -442,7 +458,9 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
               {hasDraft ? (
                 <><span className="dm-st is-draft">Draft</span><span className="dm-st-sub">· {changes.length > 0 ? `${changes.length} ${changes.length === 1 ? 'change' : 'changes'}` : 'page layouts'}, not live</span></>
               ) : (
-                <><span className="dm-st is-live">Live</span><span className="dm-st-sub">· no unpublished changes</span></>
+                <><span className="dm-st is-live">Live</span><span className="dm-st-sub">· {justPublished && !editorOnly
+                  ? <>published. Working on another machine? <button className="dm-resetlink" type="button" onClick={() => transferRef.current?.openExport()}>Export this theme</button></>
+                  : 'no unpublished changes'}</span></>
               )}
               <span className="dm-status-actions">
                 {overrideCount > 0 && !editorOnly && (
@@ -633,7 +651,7 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
                 <span className="dm-theme-name">{t.name}</span>
                 <span className="dm-theme-desc">{t.description.split(' — ')[0]}</span>
                 <span className="dm-chip">v{t.version} · {t.sectionCount} sections</span>
-                <span className="dm-theme-desc">{t.templateCount} custom templates · installed</span>
+                <span className="dm-theme-desc">{t.templateCount} custom templates · {t.project ? 'project theme' : 'built-in'}</span>
               </button>
             ))}
           </div>
@@ -789,13 +807,12 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
 
           <div className="dm-row">
             <div className="dm-lab">
-              <span>Export</span>
-              <small>Effective design (theme + your overrides) as a committable <code>theme.json</code></small>
+              <span>Move this theme</span>
+              <small>Export your design as one file and import it on another site or machine</small>
             </div>
             <div className="dm-ctl">
-              <button className="btn sm" type="button" onClick={copyThemeJson}>
-                {copied ? 'Copied ✓' : 'Copy as theme.json'}
-              </button>
+              <button className="btn sm" type="button" onClick={() => transferRef.current?.openExport()}>Export…</button>
+              <button className="btn sm" type="button" onClick={() => transferRef.current?.openImport()}>Import…</button>
             </div>
           </div>
           </div>
@@ -1032,6 +1049,8 @@ export default function DesignManager({ settings, pendingDesign, themes, pairing
         </div>
       </dialog>
 
+      <ThemeTransfer ref={transferRef} theme={theme} flush={flushAll} onCopyThemeJson={copyThemeJson} copied={copied} />
+
       <ImagePicker
         open={logoPickerOpen}
         unsplashEnabled={unsplashEnabled}

package/src/components/EmailSettings.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
 import type { Credentials, EmailConfig, PublicEmailSettings } from '../lib/email/types';
+import { checkReverified, signInAgain } from './auth/clerk';
 import '../styles/email-settings.css';
 
 // Settings → Email: Setup, Notifications, Templates, Activity over /api/email/settings.
 // Secrets are write-only: inputs start empty, blank keeps the saved value, and a
 // successful save wipes password and secret fields. Nothing goes to browser
 // storage, nothing polls, and no email is sent unless the owner types an address.
+// Saves are confirmed with the current password, or, when the site signs in
+// with Clerk, by a sign-in from the last ten minutes.
 
 type Choice = EmailConfig['provider'];
 type Job = PublicEmailSettings['activity'][number];
@@ -72,11 +75,12 @@ async function api<T>(body?: unknown, signal?: AbortSignal): Promise<T> {
     body: body === undefined ? undefined : JSON.stringify(body),
   });
   const data = await res.json().catch(() => null);
-  if (!res.ok) throw new Error(data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  if (!res.ok) throw Object.assign(new Error(data?.error || `${res.status} ${res.statusText || 'Request failed'}`), { status: res.status });
   if (!data) throw new Error('The server sent an empty response.');
   return data as T;
 }
 const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const refused = (e: unknown) => (e as { status?: number } | null)?.status === 403;
 const validAddress = (s: string) => s.length <= 254 && /^[^\s<>@,;]+@[^\s<>@,;]+\.[^\s<>@,;]+$/.test(s);
 // mirrors the server's parseFrom: `address` or `Name <address>`
 function validSender(raw: string) {
@@ -115,6 +119,8 @@ export default function EmailSettings() {
   const [notifyMsg, setNotifyMsg] = useState(NO_MSG);
   const [testMsg, setTestMsg] = useState(NO_MSG);
   const [actMsg, setActMsg] = useState(NO_MSG);
+  // Clerk: the sign-in is too old for a save; offer to sign in again
+  const [stale, setStale] = useState(false);
 
   const live = (c = ctl.current) => !!c && !c.signal.aborted;
 
@@ -175,6 +181,22 @@ export default function EmailSettings() {
   const hbStale = !data.heartbeat || Date.now() - data.heartbeat > 15 * 60000;
   const set = <K extends keyof EmailConfig>(k: K, v: EmailConfig[K]) => setForm((f) => f && { ...f, [k]: v });
   const savedOff = data.config.provider === 'none' || !data.config.enabled;
+  const clerk = data.authProvider === 'clerk';
+
+  // Clerk: check for a recent sign-in before saving, keeping the edits on the
+  // page when it's too old. If Clerk can't be reached the save still goes
+  // through and the server decides.
+  async function confirmIdentity(fail: (err: string) => void) {
+    if (!clerk) return true;
+    const r = await checkReverified();
+    if (!live()) return false;
+    if (r === 'needed') { setStale(true); fail('Saving needs a sign-in from the last ten minutes. Nothing was saved; your edits are still here.'); return false; }
+    setStale(false);
+    return true;
+  }
+  function reSignIn() {
+    if (confirm('Sign in again? You’ll come back to this page, but unsaved edits here are cleared.')) void signInAgain();
+  }
 
   function pickProvider(next: Choice) {
     setCreds({});
@@ -194,31 +216,33 @@ export default function EmailSettings() {
     if (f.from && !validSender(f.from)) return fail('Sender must be an address or Name <address>.');
     if (f.replyTo && !validSender(f.replyTo)) return fail('Reply-to must be an address or Name <address>.');
     if (f.provider === 'mailgun' && !usesEnv && !/^[a-z0-9.-]+$/i.test(f.domain)) return fail('Enter the Mailgun sending domain, like mg.example.com.');
-    if (!setupPw) return fail('Enter your current password to save.');
+    if (!clerk && !setupPw) return fail('Enter your current password to save.');
     const credentials: Credentials = {};
     if (!usesEnv) for (const c of CREDS[f.provider]) { const v = creds[c.key]?.trim(); if (v) credentials[c.key] = v; }
     await run('save', async () => {
       try {
-        const next = await api<PublicEmailSettings>({ action: 'save', config: f, credentials, reauthPassword: setupPw });
+        if (!await confirmIdentity(fail)) return;
+        const next = await api<PublicEmailSettings>({ action: 'save', config: f, credentials, reauthPassword: clerk ? '' : setupPw });
         if (!live()) return;
         adopt(next); setTested(false);
         setSetupMsg({
           ok: next.configured ? 'Saved. The configuration is valid; send a test to check the connection.' : `Saved, but email isn’t ready yet: ${next.error || 'no provider is configured.'}`,
           err: '',
         });
-      } catch (e) { if (live()) { setSetupPw(''); fail(errText(e)); } }
+      } catch (e) { if (live()) { setSetupPw(''); fail(errText(e)); setStale(clerk && refused(e)); } }
     });
   }
 
   async function saveNotify() {
     setNotifyMsg(NO_MSG);
-    if (!notify.pw) return setNotifyMsg({ ok: '', err: 'Enter your current password to save.' });
+    if (!clerk && !notify.pw) return setNotifyMsg({ ok: '', err: 'Enter your current password to save.' });
     const config = { ...data!.config, reminders: notify.reminders, staffNotifications: notify.staff };
     await run('notify', async () => {
       try {
-        const next = await api<PublicEmailSettings>({ action: 'save', config, credentials: {}, reauthPassword: notify.pw });
+        if (!await confirmIdentity((err) => setNotifyMsg({ ok: '', err }))) return;
+        const next = await api<PublicEmailSettings>({ action: 'save', config, credentials: {}, reauthPassword: clerk ? '' : notify.pw });
         if (live()) { adopt(next, 'notify'); setNotifyMsg({ ok: 'Notification settings saved.', err: '' }); }
-      } catch (e) { if (live()) { setNotify((n) => ({ ...n, pw: '' })); setNotifyMsg({ ok: '', err: errText(e) }); } }
+      } catch (e) { if (live()) { setNotify((n) => ({ ...n, pw: '' })); setNotifyMsg({ ok: '', err: errText(e) }); setStale(clerk && refused(e)); } }
     });
   }
 
@@ -262,7 +286,22 @@ export default function EmailSettings() {
       <div className="ems-status" role="alert">{m.err && <p className="flash error">{m.err}</p>}</div>
     </>
   );
-  const pwField = (value: string, onChange: (v: string) => void, key: string) => (
+  const pwField = (value: string, onChange: (v: string) => void, key: string) => clerk ? (
+    <div className="ems-verify" id={id(key)}>
+      <span className="ems-verify-mark" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="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>
+      <p>
+        <b>Confirmed with your sign-in.</b>{' '}
+        {stale ? 'Your sign-in is more than ten minutes old. Sign in again, then save; your edits stay here until you do.' : 'Saving needs a sign-in from the last ten minutes. If yours is older, you’ll be asked to sign in again.'}
+      </p>
+      {stale && (
+        <span className="ems-verify-actions">
+          <button type="button" className="btn sm" onClick={reSignIn} disabled={!!busy}>Sign in again</button>
+        </span>
+      )}
+    </div>
+  ) : (
     <label className="field ems-pw">
       <span>Your current password</span>
       <input type="password" autoComplete="current-password" value={value} onChange={(e) => onChange(e.target.value)} aria-describedby={id(key)} />
@@ -427,9 +466,10 @@ export default function EmailSettings() {
         <form className="ems-card" onSubmit={(e) => { e.preventDefault(); void saveNotify(); }} noValidate>
           <header className="ems-head"><div><h2>Always sent</h2><p>Essential messages go out whenever email is on and a provider is configured, unless the address is suppressed after a bounce or complaint.</p></div></header>
           <ul className="ems-list">
-            <li>Account invitations, password resets and password-changed notices</li>
+            {!clerk && <li>Account invitations, password resets and password-changed notices</li>}
             <li>Booking received, confirmed, declined, cancelled and rescheduled</li>
           </ul>
+          {clerk && <p className="hint">Sign-in email (invitations, verification codes and password recovery) comes from Clerk, not from this connection.</p>}
           <h3 className="ems-sub">Optional</h3>
           <label className="ems-toggle">
             <input type="checkbox" checked={notify.reminders} onChange={(e) => setNotify((n) => ({ ...n, reminders: e.target.checked }))} />
@@ -452,7 +492,7 @@ export default function EmailSettings() {
           <header className="ems-head"><div><h2>Built-in templates</h2><p>Every message has HTML and plain-text versions. The logo, name and colors come from your site settings. This sample uses made-up example.com data; real account links are never previewed.</p></div></header>
           <div className="ems-row">
             <div className="seg" role="group" aria-label="Sample message">
-              {(Object.keys(SAMPLES) as (keyof typeof SAMPLES)[]).map((k) => (
+              {(Object.keys(SAMPLES) as (keyof typeof SAMPLES)[]).filter((k) => !clerk || !ACCOUNT_SAMPLES.has(k)).map((k) => (
                 <button key={k} type="button" aria-pressed={tpl === k} onClick={() => setTpl(k)}>{SAMPLES[k].label}</button>
               ))}
             </div>
@@ -461,7 +501,7 @@ export default function EmailSettings() {
               <button type="button" aria-pressed={plain} onClick={() => setPlain(true)}>Plain text</button>
             </div>
           </div>
-          <Preview s={SAMPLES[tpl]} plain={plain} />
+          <Preview s={SAMPLES[clerk && ACCOUNT_SAMPLES.has(tpl) ? 'booking' : tpl]} plain={plain} />
         </div>
       </section>
 
@@ -506,6 +546,8 @@ const SAMPLES = {
   reset: { label: 'Password reset', subject: 'Reset your Example Studio password', heading: 'Reset your password', body: ['Someone asked to reset the password for sam@example.com.', 'The link works once and expires in 30 minutes.'], action: 'Choose a new password', foot: 'If this wasn’t you, ignore this email; your password stays the same.' },
   booking: { label: 'Booking confirmed', subject: 'Confirmed: Studio tour, Tue 14 Oct', heading: 'Your booking is confirmed', body: ['Studio tour with Example Studio', 'Tuesday 14 October 2026, 10:00–10:45 (America/New_York)', '123 Example Street, Springfield'], action: 'Manage booking', ics: true, foot: 'Need to change it? Use the link above or reply to this email.' },
 } satisfies Record<string, Sample>;
+// sign-in email that Clerk sends instead when the site uses Clerk
+const ACCOUNT_SAMPLES = new Set<keyof typeof SAMPLES>(['invite', 'reset']);
 
 function Preview({ s, plain }: { s: Sample; plain: boolean }) {
   const text = [s.heading, '', ...s.body, '', `${s.action}: [link omitted in preview]`, '', s.foot, '', '— Example Studio'].join('\n');

package/src/components/MonitoringSettings.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import type { MonitoringState, MonitorStatus } from '../lib/monitoring';
+
+// Settings → Monitoring: this site's own health, its Uptime Kuma monitors
+// (read from a public Kuma status page) and the scheduler's push URL.
+
+const ENDPOINT = '/api/monitoring';
+async function api(body?: Record<string, unknown>): Promise<MonitoringState> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as MonitoringState;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+function ago(iso: string | null, now = Date.now()) {
+  if (!iso) return '';
+  const s = Math.max(0, Math.round((now - Date.parse(iso)) / 1000));
+  if (s < 60) return `${s} s`;
+  if (s < 3600) return `${Math.round(s / 60)} min`;
+  if (s < 86_400) return `${Math.round(s / 3600)} h`;
+  return `${Math.round(s / 86_400)} d`;
+}
+// 99.98%, 50%, 100%: never rounds a bad day up to 100%
+const pct = (n: number | null) => (n === null ? '' : `${String(Math.floor(n * 10_000) / 100)}%`);
+const WORD: Record<MonitorStatus['status'], string> = { up: 'Up', down: 'Down', pending: 'Pending', maintenance: 'Maintenance', unknown: 'No data' };
+const CHECK: Record<string, string> = { ok: 'OK', down: 'down', stalled: 'stopped', stuck: 'stuck', off: 'off' };
+
+function Tile({ m }: { m: MonitorStatus }) {
+  // segments never break inside ("100%\u00a0(24\u00a0h)")
+  const sub = m.status === 'unknown' ? ['No checks yet']
+    : [`${WORD[m.status]}${m.since ? ` for ${ago(m.since)}` : ''}`, m.uptime24h !== null ? `${pct(m.uptime24h)} (24 h)` : ''].filter(Boolean);
+  return (
+    <div className={`mon-tile${m.status === 'down' ? ' is-down' : ''}`}>
+      <div className="mon-name"><span className={`mon-dot ${m.status}`} aria-hidden="true" />{m.name}</div>
+      <div className="mon-sub">{sub.map((s, i) => <span key={i}>{i > 0 && ' · '}<span className="nw">{s}</span></span>)}</div>
+      {m.status === 'down' && m.message && <div className="mon-msg">{m.message}</div>}
+      <div className="mon-beats" aria-hidden="true">{m.recent.map((b, i) => <i key={i} className={b} />)}</div>
+    </div>
+  );
+}
+
+export default function MonitoringSettings() {
+  const [state, setState] = useState<MonitoringState | null>(null);
+  const [error, setError] = useState('');
+  const [note, setNote] = useState('');
+  const [busy, setBusy] = useState('');
+  const [push, setPush] = useState('');
+  const [page, setPage] = useState('');
+  useEffect(() => { api().then((s) => { setState(s); setPage(s.statusPage); }, (e) => setError(errText(e))); }, []);
+  if (!state) return error ? <p className="flash error">{error}</p> : <div className="ma-skel" aria-busy="true" aria-label="Loading"><i /><i /></div>;
+
+  const run = async (what: string, body: Record<string, unknown>, done: string) => {
+    setBusy(what); setError(''); setNote('');
+    try { const s = await api(body); setState(s); setPage(s.statusPage); setPush(''); setNote(done); }
+    catch (e) { setError(errText(e)); }
+    finally { setBusy(''); }
+  };
+  const save = () => run('save', { action: 'save', statusPage: page, ...(push.trim() ? { pushUrl: push } : {}) }, 'Saved.');
+  const h = state.health;
+  const changed = page.trim() !== state.statusPage || push.trim() !== '';
+
+  return (
+    <div className="mon">
+      {(error || note) && <p className={`flash ${error ? 'error' : ''}`} role="status">{error || note}</p>}
+
+      <div className="mon-self">
+        <div><span className={`mon-dot ${h.status === 'ok' ? 'up' : h.status === 'degraded' ? 'pending' : 'down'}`} aria-hidden="true" /><b>This site</b></div>
+        <span>Database {CHECK[h.checks.database]}</span>
+        <span>Scheduler {CHECK[h.checks.scheduler]}{state.lastRun ? `, last ran ${ago(state.lastRun)} ago` : ', never ran'}</span>
+        <span>Email {CHECK[h.checks.email]}</span>
+        <a href="/api/health" target="_blank" rel="noreferrer">/api/health</a>
+      </div>
+
+      {state.statusPage && state.monitors === null && <p className="flash error">Couldn’t read the status page. Check the address and that the page is published in Kuma.</p>}
+      {state.monitors && (state.monitors.length
+        ? <div className="mon-grid">{state.monitors.map((m) => <Tile key={m.id} m={m} />)}</div>
+        : <p className="hint">The status page has no monitors yet. Add them to it in Kuma.</p>)}
+      {!state.statusPage && (
+        <div className="mon-empty">
+          <b>Set up Uptime Kuma</b>
+          <p>From the site folder, run:</p>
+          <code className="mon-cmd">npx acms monitor kuma --url https://your-site --kuma https://your-kuma</code>
+          <p>It creates the website, app API, staff app API, health and scheduler monitors plus a status page in Kuma, and prints the two addresses to paste below.</p>
+        </div>
+      )}
+
+      <div className="mon-fields">
+        <label className="mon-field">
+          <span>Scheduler heartbeat <small>Kuma push monitor URL{state.pushFromEnv ? ' (set by UPTIME_PUSH_URL on the server)' : ''}</small></span>
+          <div className="mon-inline">
+            <input type="url" inputMode="url" placeholder={state.pushUrl || 'https://uptime.example.com/api/push/…'} value={push} onChange={(e) => setPush(e.currentTarget.value)} disabled={state.pushFromEnv} aria-label="Kuma push URL" />
+            <button type="button" className="btn" disabled={!state.pushUrl || !!busy} onClick={() => run('test', { action: 'test' }, 'Kuma received the test beat.')}>{busy === 'test' ? 'Sending…' : 'Send test'}</button>
+          </div>
+          {state.pushUrl && !state.pushFromEnv && <small>Saved as <code>{state.pushUrl}</code> · paste a new one to replace it</small>}
+        </label>
+        <label className="mon-field">
+          <span>Status page <small>Public Kuma status page with this site’s monitors</small></span>
+          <input type="url" inputMode="url" placeholder="https://uptime.example.com/status/my-site" value={page} onChange={(e) => setPage(e.currentTarget.value)} aria-label="Kuma status page" />
+        </label>
+        <div className="mon-actions">
+          {state.pushUrl && !state.pushFromEnv && <button type="button" className="btn ghost danger" disabled={!!busy} onClick={() => run('save', { action: 'save', pushUrl: '' }, 'Heartbeat removed.')}>Remove heartbeat</button>}
+          <button type="button" className="btn primary" disabled={!changed || !!busy} onClick={save}>{busy === 'save' ? 'Saving…' : 'Save'}</button>
+        </div>
+      </div>
+    </div>
+  );
+}