@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/admin/index.astro

@@ -3,65 +3,262 @@ import Admin from '../../layouts/Admin.astro';
 import { getRepo } from '../../lib/repo';
 import { userConfig } from 'virtual:acms-config';
 import { CONTENT } from '../../lib/content';
+import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../../lib/auth';
+import { getTraffic, umamiReadEnabled } from '../../lib/umami';
+import { collectionUrl } from '../../lib/content';
 
 const coreVersion = userConfig.coreVersion;
 const repo = await getRepo(Astro.locals);
-const [stats, pages, posts, links] = await Promise.all([
+const sessionUserId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const [stats, pages, posts, links, settings, nav, users] = await Promise.all([
   repo.getStats(),
   repo.listPages(),
   repo.listPosts(),
   repo.listLinks(),
+  repo.getSettings(),
+  repo.listNavItems(),
+  repo.listUsers(),
 ]);
+const traffic = await getTraffic(settings, 30);
+const me = sessionUserId && sessionUserId !== OWNER_ENV ? users.find((u) => u.id === sessionUserId) : null;
+const firstName = me?.name.split(/\s+/)[0] ?? '';
 
+const tz = settings.timezone ? { timeZone: settings.timezone } : {};
+const safe = <T,>(f: () => T, fb: T) => { try { return f(); } catch { return fb; } };
+const hour = safe(() => Number(new Intl.DateTimeFormat('en-US', { hour: 'numeric', hourCycle: 'h23', ...tz }).format(new Date())), new Date().getHours());
+const greeting = hour < 5 ? 'Working late' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+const when = (ts: number) => safe(() => new Date(ts).toLocaleString('en-US', { weekday: 'short', hour: 'numeric', minute: '2-digit', ...tz }), '');
+function ago(ts: number) {
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+const noun = (key: string) => (CONTENT.collections[key] ?? CONTENT.posts).singular;
+const firstKey = Object.keys(CONTENT.collections)[0] ?? 'posts';
+const drafts = posts.filter((p) => p.status === 'draft');
+const scheduled = posts.filter((p) => p.status === 'scheduled' && p.scheduledAt).sort((a, b) => a.scheduledAt! - b.scheduledAt!);
+const published = posts.filter((p) => p.status === 'published');
+const summary = [
+  drafts.length ? `${drafts.length} ${drafts.length === 1 ? 'draft' : 'drafts'} waiting` : '',
+  scheduled.length ? `${scheduled.length === 1 ? `1 ${noun(scheduled[0].collection).toLowerCase()}` : `${scheduled.length} items`} going live ${when(scheduled[0].scheduledAt!)}` : '',
+].filter(Boolean).join(' · ') || 'Everything is published. Nice.';
+
+// continue writing: drafts + scheduled, most recently touched first
+const continueRows = [...drafts, ...scheduled].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, 4);
 const recent = [
   ...pages.map((p) => ({ kind: 'Page', title: p.title, href: `/admin/pages/${p.id}`, at: p.updatedAt, status: p.status })),
-  ...posts.map((p) => ({
-    kind: (CONTENT.collections[p.collection] ?? CONTENT.posts).singular,
-    title: p.title,
-    href: `/admin/c/${p.collection}/${p.id}`,
-    at: p.updatedAt,
-    status: p.status,
-  })),
-]
-  .sort((a, b) => b.at - a.at)
-  .slice(0, 8);
-
-// per-collection counts for the stat row; content whose collection key was
-// removed from config would otherwise be invisible, so it gets a notice
+  ...posts.map((p) => ({ kind: noun(p.collection), title: p.title, href: `/admin/c/${p.collection}/${p.id}`, at: p.updatedAt, status: p.status })),
+].sort((a, b) => b.at - a.at).slice(0, 5);
+const topLinks = [...links].filter((l) => l.clicks > 0).sort((a, b) => b.clicks - a.clicks).slice(0, 5);
+
+// content whose collection key was removed from config would otherwise be invisible
 const countByCollection = new Map<string, number>();
 for (const p of posts) countByCollection.set(p.collection, (countByCollection.get(p.collection) ?? 0) + 1);
 const orphaned = [...countByCollection.entries()].filter(([key]) => !CONTENT.collections[key]);
 
-const topLinks = [...links].sort((a, b) => b.clicks - a.clicks).slice(0, 5);
+// setup checklist — disappears once everything is done
+const steps = [
+  { label: 'Add your site URL', done: Boolean(settings.siteUrl), href: '/admin/settings#site' },
+  { label: 'Connect analytics', done: Boolean(settings.analytics?.umami?.enabled), href: '/admin/settings#analytics' },
+  { label: 'Set up navigation', done: nav.length > 0, href: '/admin/navigation' },
+  { label: `Publish your first ${noun(firstKey).toLowerCase()}`, done: published.length > 0, href: `/admin/c/${firstKey}?new=1` },
+  { label: 'Invite a teammate', done: users.length > 0, href: '/admin/users?new=1' },
+];
+const doneCount = steps.filter((s) => s.done).length;
 
-function ago(ts: number) {
-  const s = Math.floor((Date.now() - ts) / 1000);
-  if (s < 60) return 'just now';
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
+// traffic → KPI tiles + chart
+const fmtN = (n: number) => (n >= 10000 ? `${(n / 1000).toFixed(1)}k` : n.toLocaleString('en-US'));
+const delta = (v: number, prev: number) => (prev > 0 ? Math.round(((v - prev) / prev) * 100) : null);
+const dur = (s: number) => (s >= 60 ? `${Math.floor(s / 60)}m ${s % 60}s` : `${s}s`);
+function areaPath(vals: number[], w: number, h: number, pad = 3) {
+  if (vals.length < 2) return { line: '', fill: '' };
+  const max = Math.max(...vals, 1), step = (w - pad * 2) / (vals.length - 1);
+  const pts = vals.map((v, i) => [pad + i * step, h - pad - (v / max) * (h - pad * 2)]);
+  const line = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
+  return { line, fill: `${line} L${pts[pts.length - 1][0].toFixed(1)} ${h} L${pad} ${h}Z` };
 }
+const views = traffic?.series.map((s) => s.views) ?? [];
+const chart = areaPath(views, 700, 150);
+const spark = (vals: number[]) => areaPath(vals.slice(-14), 120, 26).line;
+const titleByPath = new Map<string, string>([
+  ...posts.map((p) => [collectionUrl(p.collection, p.slug), p.title] as [string, string]),
+  ...pages.map((p) => [`/${p.slug}`, p.title] as [string, string]),
+]);
+const topContent = (traffic?.topPaths ?? []).filter((p) => titleByPath.has(p.path)).slice(0, 5);
+const kpis = traffic
+  ? [
+      { label: 'Visitors · 30d', value: fmtN(traffic.visitors), d: delta(traffic.visitors, traffic.visitorsPrev), spark: spark(traffic.series.map((s) => s.visitors)) },
+      { label: 'Pageviews', value: fmtN(traffic.pageviews), d: delta(traffic.pageviews, traffic.pageviewsPrev), spark: spark(views) },
+      { label: 'Avg. visit', value: dur(traffic.avgSeconds), d: null, spark: '' },
+      { label: 'Link clicks', value: fmtN(stats.linkClicks), d: null, spark: '' },
+    ]
+  : [
+      { label: 'Published', value: fmtN(published.length + stats.publishedPages), d: null, spark: '' },
+      { label: 'Drafts', value: fmtN(stats.drafts), d: null, spark: '' },
+      { label: 'Scheduled', value: fmtN(scheduled.length), d: null, spark: '' },
+      { label: 'Link clicks', value: fmtN(stats.linkClicks), d: null, spark: '' },
+    ];
+const umamiOnNoKey = Boolean(settings.analytics?.umami?.enabled) && !umamiReadEnabled(settings);
+const axis = traffic?.series.length
+  ? [0, Math.floor(traffic.series.length / 3), Math.floor((traffic.series.length * 2) / 3)].map((i) =>
+      safe(() => new Date(traffic.series[i].t).toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...tz }), ''))
+  : [];
+const I = {
+  write: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4',
+  page: 'M7 3h8l4 4v14H7zM15 3v4h4M10 12h6M10 16h6',
+  upload: 'M12 16V4M7 9l5-5 5 5M4 17v3h16v-3',
+  links: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  check: 'M5 12l5 5L20 7',
+};
+const tiles = [
+  { icon: I.write, title: `Write a ${noun(firstKey).toLowerCase()}`, sub: 'Start a draft in the editor', href: `/admin/c/${firstKey}?new=1` },
+  { icon: I.page, title: 'Add a page', sub: 'Same editor, lives at /your-slug', href: '/admin/pages?new=1' },
+  { icon: I.upload, title: 'Upload media', sub: 'Drop images, get WebP variants', href: '/admin/media' },
+  { icon: I.links, title: 'Edit links page', sub: `${links.length} blocks · ${fmtN(stats.linkClicks)} clicks`, href: '/admin/links' },
+];
 ---
 
-<Admin title="Dashboard" section="dashboard">
-  <div class="page-head">
-    <h1>Dashboard</h1>
-    <div style="display:flex;gap:8px">
-      {Object.entries(CONTENT.collections).map(([key, c]) => (
-        <a class="btn" href={`/admin/c/${key}?new=1`}>New {c.singular.toLowerCase()}</a>
+<Admin title="Overview" section="dashboard">
+  <div class="dash">
+    <div class="page-head">
+      <div>
+        <h1>{greeting}{firstName ? `, ${firstName}` : ''}</h1>
+        <p class="sub">{summary}</p>
+      </div>
+      <div class="page-actions">
+        <a class="btn primary" href={`/admin/c/${firstKey}?new=1`}>New {noun(firstKey).toLowerCase()}</a>
+      </div>
+    </div>
+
+    <div id="acms-update" hidden data-current={coreVersion} class="notice">
+      <div class="grow-text">
+        <b>ACMS <span id="acms-update-latest"></span> is available</b>
+        <span class="hint">you're on {coreVersion} — run <code>npx acms update</code>; it prints the deploy steps for your setup.</span>
+      </div>
+      <a id="acms-update-notes" class="btn sm ghost" href="https://www.npmjs.com/package/@acms-subir/core" target="_blank" rel="noopener">What's new</a>
+      <button id="acms-update-dismiss" class="icon-btn" type="button" aria-label="Dismiss until the next release" title="Dismiss until the next release">×</button>
+    </div>
+
+    {orphaned.length > 0 && (
+      <div class="notice warn">
+        <div>
+          <b>Content in removed collections</b>
+          <p class="hint tight">
+            {orphaned.map(([key, n]) => `${n} ${n === 1 ? 'entry' : 'entries'} belong${n === 1 ? 's' : ''} to "${key}"`).join(' · ')}
+            — nothing was deleted; re-add the key under content.collections in astro.config to restore them.
+          </p>
+        </div>
+      </div>
+    )}
+
+    <div class="kpis">
+      {kpis.map((k) => (
+        <div class="kpi">
+          <small>{k.label}</small>
+          <b>{k.value}{k.d !== null && <span class={`delta ${k.d < 0 ? 'down' : ''}`}>{k.d > 0 ? '+' : ''}{k.d}%</span>}</b>
+          {k.spark && <svg class="spark" viewBox="0 0 120 26" preserveAspectRatio="none" aria-hidden="true"><path d={k.spark} /></svg>}
+        </div>
       ))}
-      <a class="btn primary" href="/admin/pages?new=1">New page</a>
     </div>
-  </div>
 
-  <div id="acms-update" hidden data-current={coreVersion} class="card card-pad" style="display:none;align-items:center;gap:10px;margin-bottom:14px;border-left:3px solid var(--accent)">
-    <div>
-      <b>ACMS <span id="acms-update-latest"></span> is available</b>
-      <span class="hint" style="margin-left:6px">you're on {coreVersion} — run <code>npx acms update</code>; it prints the deploy steps for your setup.</span>
+    {traffic && views.length > 1 && (
+      <div class="card card-pad chart-card">
+        <div class="card-head"><b>Pageviews</b><span class="hint">Last 30 days · Umami</span></div>
+        <svg class="chart" viewBox="0 0 700 150" preserveAspectRatio="none" role="img" aria-label="Pageviews over the last 30 days">
+          <path class="fill" d={chart.fill} /><path class="line" d={chart.line} />
+        </svg>
+        <div class="chart-axis">{axis.map((a) => <span>{a}</span>)}<span>Today</span></div>
+      </div>
+    )}
+    {umamiOnNoKey && (
+      <p class="hint dash-hint">Umami is tracking visitors. Add a <code>UMAMI_API_TOKEN</code> (self-hosted) or <code>UMAMI_API_KEY</code> (Cloud) environment variable to see traffic here.</p>
+    )}
+
+    <div class="dash-two">
+      <div>
+        <div class="section-title">Start something</div>
+        <div class="tiles">
+          {tiles.map((t) => (
+            <a class="tile" href={t.href}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={t.icon} /></svg>
+              <b>{t.title}</b><small>{t.sub}</small>
+            </a>
+          ))}
+        </div>
+      </div>
+      {doneCount < steps.length ? (
+        <div class="card card-pad">
+          <div class="card-head"><b>Finish setting up</b><span class="hint">{doneCount} of {steps.length}</span></div>
+          <div class="progress"><i style={`width:${(doneCount / steps.length) * 100}%`} /></div>
+          {steps.map((s) => (
+            <a class={`step ${s.done ? 'done' : ''}`} href={s.href}>
+              <span class="step-dot">{s.done && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d={I.check} /></svg>}</span>
+              {s.label}
+              {!s.done && <em>Set up →</em>}
+            </a>
+          ))}
+        </div>
+      ) : (
+        <div class="card card-pad">
+          <div class="card-head"><b>Top links</b><a class="hint" href="/admin/links">Links page →</a></div>
+          {topLinks.length ? topLinks.map((l) => (
+            <div class="kv-row"><span>{l.label}</span><b>{l.clicks.toLocaleString('en-US')}</b></div>
+          )) : <p class="hint tight">No clicks yet.</p>}
+        </div>
+      )}
+    </div>
+
+    {continueRows.length > 0 && (
+      <>
+        <div class="section-title">Continue writing</div>
+        <div class="mini-rows">
+          {continueRows.map((p) => (
+            <a class="mini-row" href={`/admin/c/${p.collection}/${p.id}`}>
+              <span class="crow-thumb">{p.cover ? <img src={p.cover} alt="" /> : null}</span>
+              <span class="grow"><b>{p.title || 'Untitled'}</b><small>{noun(p.collection)} · edited {ago(p.updatedAt)}</small></span>
+              <span class={`status ${p.status}`}>{p.status === 'scheduled' ? `Scheduled · ${when(p.scheduledAt!)}` : 'Draft'}</span>
+            </a>
+          ))}
+        </div>
+      </>
+    )}
+
+    <div class="dash-two">
+      <div>
+        <div class="section-title">{topContent.length ? 'Top content · 30d' : 'Recently edited'}</div>
+        <div class="mini-rows">
+          {topContent.length
+            ? topContent.map((t) => (
+                <a class="mini-row bar-row" href={t.path} target="_blank" rel="noopener">
+                  <i style={`width:${(t.views / topContent[0].views) * 100}%`} />
+                  <span class="grow">{titleByPath.get(t.path)}</span><b>{t.views.toLocaleString('en-US')}</b>
+                </a>
+              ))
+            : recent.map((r) => (
+                <a class="mini-row" href={r.href}>
+                  <span class="grow"><b>{r.title || 'Untitled'}</b><small>{r.kind} · {ago(r.at)}</small></span>
+                  <span class={`status ${r.status}`}>{r.status[0].toUpperCase() + r.status.slice(1)}</span>
+                </a>
+              ))}
+          {!topContent.length && recent.length === 0 && <p class="hint">Nothing yet — create a page or {CONTENT.posts.singular.toLowerCase()}.</p>}
+        </div>
+      </div>
+      {doneCount < steps.length && (
+        <div>
+          <div class="section-title">Top links</div>
+          <div class="mini-rows">
+            {topLinks.length ? topLinks.map((l) => (
+              <div class="mini-row"><span class="grow">{l.label}</span><b>{l.clicks.toLocaleString('en-US')}</b></div>
+            )) : <p class="hint">No link clicks yet.</p>}
+          </div>
+        </div>
+      )}
     </div>
-    <a id="acms-update-notes" class="btn sm ghost" style="margin-left:auto" href="https://www.npmjs.com/package/@acms-subir/core" target="_blank" rel="noopener">What's new</a>
-    <button id="acms-update-dismiss" class="btn sm ghost" type="button" aria-label="Dismiss until the next release" title="Dismiss until the next release">×</button>
   </div>
+
   <script>
     // Ghost-style update nudge: npm registry check, cached a day, silent on
     // any failure (offline, unpublished package, CORS). Dismissal is stored
@@ -105,58 +302,8 @@ function ago(ts: number) {
       document.getElementById('acms-update-dismiss')?.addEventListener('click', () => {
         try { localStorage.setItem(DISMISSED, latest); } catch {}
         el.hidden = true;
-        el.style.display = 'none';
       });
       el.hidden = false;
-      el.style.display = 'flex';
     })();
   </script>
-
-  {orphaned.length > 0 && (
-    <div class="card card-pad" style="margin-bottom:14px;border-left:3px solid var(--warn, #c77700)">
-      <b>Content in removed collections</b>
-      <p class="hint" style="margin:4px 0 0">
-        {orphaned.map(([key, n]) => `${n} ${n === 1 ? 'entry' : 'entries'} belong${n === 1 ? 's' : ''} to "${key}"`).join(' · ')}
-        — nothing was deleted; re-add the key under content.collections in astro.config to restore them.
-      </p>
-    </div>
-  )}
-
-  <div class="stats">
-    <div class="stat"><div class="label">Published pages</div><div class="value">{stats.publishedPages}</div></div>
-    {Object.entries(CONTENT.collections).map(([key, c]) => (
-      <div class="stat"><div class="label">{c.plural}</div><div class="value">{countByCollection.get(key) ?? 0}</div></div>
-    ))}
-    <div class="stat"><div class="label">Drafts</div><div class="value">{stats.drafts}</div></div>
-    <div class="stat"><div class="label">Link clicks</div><div class="value">{stats.linkClicks}</div></div>
-  </div>
-
-  <div class="dash-grid">
-    <div class="card card-pad">
-      <p class="card-title">Recently edited</p>
-      <ul class="recent">
-        {recent.map((r) => (
-          <li>
-            <span class={`pill ${r.status}`}>{r.status}</span>
-            <a href={r.href}>{r.title}</a>
-            <span class="t-sub">{r.kind}</span>
-            <span class="when">{ago(r.at)}</span>
-          </li>
-        ))}
-        {recent.length === 0 && <li class="hint">Nothing yet — create a page or {CONTENT.posts.singular.toLowerCase()}.</li>}
-      </ul>
-    </div>
-    <div class="card card-pad">
-      <p class="card-title">Top links</p>
-      <ul class="recent">
-        {topLinks.map((l) => (
-          <li>
-            <span>{l.label}</span>
-            <span class="when">{l.clicks} clicks</span>
-          </li>
-        ))}
-        {topLinks.length === 0 && <li class="hint">No links yet.</li>}
-      </ul>
-    </div>
-  </div>
 </Admin>

package/src/pages/admin/integrations.astro

@@ -0,0 +1,237 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import Modal from '../../components/Modal.astro';
+import { getRepo } from '../../lib/repo';
+import { API_SCOPES, WEBHOOK_EVENTS, type ApiScope } from '../../lib/schema';
+import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../../lib/auth';
+import { CALENDAR, bookingsEnabled, calendarFeedUrl } from '../../lib/calendar/config';
+import { issueApiKey } from '../../lib/api-keys';
+import { attemptDelivery, generateWebhookSecret, validateWebhookUrl } from '../../lib/webhooks';
+import { resolveConfig } from '../../lib/email/config';
+import { env } from '../../lib/env';
+import { siteOrigin } from '../../lib/seo';
+
+// Site-wide integrations. Owners manage keys and webhook subscriptions;
+// calendar-specific feeds and API help appear only when enabled.
+const repo = await getRepo(Astro.locals);
+const sessionId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const me = sessionId && sessionId !== OWNER_ENV ? await repo.getUser(sessionId) : null;
+const isOwner = sessionId === OWNER_ENV || me?.role === 'owner';
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+let notice = '';
+let error = '';
+let newKey = '';
+let newSecret = '';
+const dev = import.meta.env.DEV;
+
+if (Astro.request.method === 'POST') {
+  if (!isOwner) return new Response('Owners only', { status: 403 });
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  try {
+    if (op === 'key') {
+      const scopes = form.getAll('scopes').map(String).filter((s): s is ApiScope => (API_SCOPES as readonly string[]).includes(s));
+      if (!scopes.length) throw new Error('Pick at least one permission.');
+      const { key } = await issueApiKey(repo, String(form.get('name') || 'API key').slice(0, 80), scopes);
+      newKey = key;
+    } else if (op === 'revoke') {
+      await repo.deleteApiKey(String(form.get('id')));
+      notice = 'Key revoked — anything using it stops working now.';
+    } else if (op === 'hook') {
+      const url = validateWebhookUrl(String(form.get('url') || ''), dev);
+      const events = form.getAll('events').map(String).filter((e) => (WEBHOOK_EVENTS as readonly string[]).includes(e));
+      if (!events.length) throw new Error('Pick at least one event.');
+      const secret = generateWebhookSecret();
+      await repo.createWebhook({ url, secret, events });
+      newSecret = secret;
+    } else if (op === 'subscriptions') {
+      const events = form.getAll('events').map(String).filter(e => (WEBHOOK_EVENTS as readonly string[]).includes(e));
+      if (!events.length) throw new Error('Pick at least one event.');
+      await repo.updateWebhook(String(form.get('id')), { events });
+      notice = 'Event subscriptions saved.';
+    } else if (op === 'toggle') {
+      const h = (await repo.listWebhooks()).find((w) => w.id === form.get('id'));
+      if (h) await repo.updateWebhook(h.id, { active: !h.active });
+    } else if (op === 'delhook') {
+      await repo.deleteWebhook(String(form.get('id')));
+      notice = 'Webhook removed.';
+    } else if (op === 'test') {
+      const h = (await repo.listWebhooks()).find((w) => w.id === form.get('id'));
+      if (h) {
+        const now = Date.now();
+        const d = { id: crypto.randomUUID(), webhookId: h.id, event: 'ping', payload: JSON.stringify({ type: 'ping', createdAt: new Date(now).toISOString(), data: { message: 'Test delivery from acms' } }), status: 'pending' as const, attempts: 0, nextAt: now, responseCode: null, createdAt: now, deliveredAt: null };
+        await repo.createDeliveries([d]);
+        await attemptDelivery(repo, d, h);
+        const last = (await repo.listDeliveries(h.id, 1))[0];
+        notice = last?.responseCode ? `Test sent — the endpoint answered ${last.responseCode}.` : 'Test sent — the endpoint didn’t answer.';
+      }
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Something went wrong.';
+  }
+}
+
+const [keys, hooks, calendars] = await Promise.all([repo.listApiKeys(), repo.listWebhooks(), repo.listCalendars()]);
+const logs = new Map(await Promise.all(hooks.map(async (h) => [h.id, await repo.listDeliveries(h.id, 5)] as const)));
+const emailConfig = resolveConfig(await repo.email.config(), Astro.locals);
+const provider = emailConfig.error ? 'none' : emailConfig.provider;
+const ago = (ts: number | null) => {
+  if (!ts) return 'never';
+  const s = Math.floor((Date.now() - ts) / 1000);
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : `${Math.floor(s / 86400)} d ago`;
+};
+const SCOPE_LABEL: Record<string, string> = {
+  'events:read': 'Read events (incl. private calendars)', 'events:write': 'Create and edit events',
+  'bookings:read': 'Read bookings and guest details', 'bookings:write': 'Create, confirm and cancel bookings',
+  'resources:read': 'Read resources and links', 'resources:write': 'Edit resources and links',
+};
+const feeds = [
+  { label: 'Everything public', url: origin + calendarFeedUrl() },
+  ...calendars.filter((c) => c.kind === 'native' && c.visibility !== 'private').map((c) => ({ label: c.name, url: origin + calendarFeedUrl(c.slug) })),
+];
+---
+
+<Admin title="API & webhooks" section="integrations">
+  <div class="card" style="padding:20px;margin-bottom:20px">
+    <h2>Live video</h2><p>Connect your own Twitch or YouTube app to discover broadcasts automatically on your homepage and links page.</p>
+    <a class="btn" href="/admin/live">Set up live video →</a>
+  </div>
+
+  <div class="page-head">
+    <div>
+      <h1>API &amp; webhooks</h1>
+      <p class="sub">Connect content, design, media{CALENDAR.enabled ? ', calendars' : ''}{bookingsEnabled() ? ' and bookings' : ''} to your automations. <a href="/api/webhooks/docs" target="_blank" rel="noopener">API reference ↗</a></p>
+    </div>
+  </div>
+  {notice && <p class="notice" role="status">{notice}</p>}
+  {error && <p class="notice warn" role="alert">{error}</p>}
+  {!isOwner && <p class="notice">Only owners can create keys or webhooks.</p>}
+  {newKey && (
+    <div class="notice reveal">
+      <b>Copy this key now — it won’t be shown again.</b>
+      <div class="cal-feed"><input type="text" class="mono" readonly value={newKey} /><button class="btn sm" type="button" data-copy={newKey}>Copy</button></div>
+      <span class="hint">Send it as <code>Authorization: Bearer {newKey.slice(0, 14)}…</code></span>
+    </div>
+  )}
+  {newSecret && (
+    <div class="notice reveal">
+      <b>Signing secret — copy it into the receiver now.</b>
+      <div class="cal-feed"><input type="text" class="mono" readonly value={newSecret} /><button class="btn sm" type="button" data-copy={newSecret}>Copy</button></div>
+      <span class="hint">Verify <code>X-Acms-Signature</code> = <code>sha256=</code>HMAC-SHA256(secret, <code>{'{X-Acms-Timestamp}.{body}'}</code>).</span>
+    </div>
+  )}
+
+  <div class="res-grid">
+    <div>
+      <section class="card card-pad">
+        <div class="card-head"><b>API keys</b>{isOwner && <button class="btn sm" type="button" data-modal="new-key">New key</button>}</div>
+        {keys.length === 0 && <p class="hint">No keys yet. Public calendars and bookings don’t need one — keys unlock private data and changes.</p>}
+        {keys.map((k) => (
+          <div class="int-row">
+            <div><b>{k.name}</b> <code>{k.prefix}…</code><div class="int-scopes">{k.scopes.map((s) => <span class="pill lang">{s}</span>)}</div></div>
+            <span class="hint">used {ago(k.lastUsedAt)}</span>
+            {isOwner && <form method="post"><input type="hidden" name="op" value="revoke" /><input type="hidden" name="id" value={k.id} /><button class="btn sm ghost danger" data-confirm={`Revoke “${k.name}”?`}>Revoke</button></form>}
+          </div>
+        ))}
+        <p class="hint">Content-agent keys can access calendar integrations. Design and media APIs require explicitly scoped keys.</p>
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Webhooks</b>{isOwner && <button class="btn sm" type="button" data-modal="new-hook">Add endpoint</button>}</div>
+        {hooks.length === 0 && <p class="hint">Get a signed POST when content goes live, a design is published, media changes or a booking comes in.</p>}
+        {hooks.map((h) => {
+          const log = logs.get(h.id) ?? [];
+          const ok = h.lastStatus !== null && h.lastStatus >= 200 && h.lastStatus < 300;
+          return (
+            <div class="int-hook">
+              <div class="int-row">
+                <div><b class="mono">{h.url.replace(/^https?:\/\//, '').slice(0, 60)}</b><div class="int-scopes">{h.events.map((e) => <span class="pill lang">{e}</span>)}</div></div>
+                <span class={`int-status ${h.lastStatus === null ? '' : ok ? 'ok' : 'bad'}`}>{h.lastStatus === null ? 'no deliveries yet' : `${h.lastStatus || 'no answer'} · ${ago(h.lastAt)}`}</span>
+                {isOwner && (
+                  <form method="post" class="int-acts">
+                    <input type="hidden" name="id" value={h.id} />
+                    <button class="btn sm" name="op" value="test">Send test</button>
+                    <button class="btn sm ghost" name="op" value="toggle">{h.active ? 'Pause' : 'Resume'}</button>
+                    <button class="btn sm ghost danger" name="op" value="delhook" data-confirm="Remove this webhook?">Remove</button>
+                  </form>
+                )}
+              </div>
+              {isOwner && <details class="int-log">
+                <summary>Edit event subscriptions</summary>
+                <form method="post">
+                  <input type="hidden" name="op" value="subscriptions" />
+                  <input type="hidden" name="id" value={h.id} />
+                  {WEBHOOK_EVENTS.map(e => <label class="check-row"><input type="checkbox" name="events" value={e} checked={h.events.includes(e) || h.events.includes('*')} /> <code>{e}</code></label>)}
+                  <button class="btn sm" type="submit">Save events</button>
+                </form>
+              </details>}
+              {log.length > 0 && (
+                <details class="int-log"><summary>Last {log.length} deliveries</summary>
+                  {log.map((d) => <div><span class={`status ${d.status === 'delivered' ? 'published' : d.status === 'failed' ? 'archived' : 'scheduled'}`}>{d.status}</span> <code>{d.event}</code> <span class="hint">{d.responseCode ?? '—'} · {d.attempts} attempt{d.attempts === 1 ? '' : 's'} · {ago(d.createdAt)}</span></div>)}
+                </details>
+              )}
+              {!h.active && <p class="hint">Paused — nothing is sent.</p>}
+            </div>
+          );
+        })}
+      </section>
+    </div>
+
+    <div class="res-side">
+      <section class="card card-pad">
+        <div class="card-head"><b>Email</b><span class={`int-status ${provider === 'none' ? 'bad' : 'ok'}`}>{provider === 'none' ? 'Not set up' : ({cloudflare:'Cloudflare Email',resend:'Resend',mailgun:'Mailgun',ses:'Amazon SES'})[provider]}</span></div>
+        {provider === 'none' ? (
+          <p class="hint">Choose Resend, Mailgun, Amazon SES or Cloudflare in <a href="/admin/email">Email settings</a>. Configure a sender and review delivery activity there.</p>
+        ) : <p class="hint">Sending as <code>{emailConfig.config.from}</code>. Guests get confirmations, updates and a reminder the day before.</p>}
+      </section>
+      {CALENDAR.enabled && <section class="card card-pad">
+        <div class="card-head"><b>Subscribe feeds</b></div>
+        {feeds.map((f) => <div class="int-feed"><span>{f.label}</span><div class="cal-feed"><input type="text" class="mono" readonly value={f.url} /><button class="btn sm" type="button" data-copy={f.url}>Copy</button></div></div>)}
+        <p class="hint">Private calendars and resource staff feeds have secret links on their own screens.</p>
+      </section>}
+      <section class="card card-pad">
+        <div class="card-head"><b>Quick start</b></div>
+        <p class="hint">Use publication events to refresh search indexes, clear caches or trigger builds. Media events can start asset processing. A restore event tells consumers to resync.</p>
+        <p><a href="/api/webhooks/docs" target="_blank" rel="noopener">Webhook events and payloads ↗</a></p>
+        {CALENDAR.enabled && <p><a href="/api/calendar/docs" target="_blank" rel="noopener">Calendar API reference ↗</a></p>}
+      </section>
+    </div>
+  </div>
+
+  <Modal id="new-key" title="New API key">
+    <form method="post">
+      <input type="hidden" name="op" value="key" />
+      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Zapier, lobby screen…" required /></label>
+      <div class="field"><span>Permissions</span>
+        {API_SCOPES.filter((s) => (CALENDAR.enabled || !s.startsWith('events:')) && (bookingsEnabled() || !s.startsWith('bookings:') && !s.startsWith('resources:'))).map((s) => (
+          <label class="check-row"><input type="checkbox" name="scopes" value={s} checked={s.endsWith(':read')} /> {SCOPE_LABEL[s] ?? s} <code>{s}</code></label>
+        ))}
+      </div>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Create key</button></div>
+    </form>
+  </Modal>
+  <Modal id="new-hook" title="Add webhook endpoint">
+    <form method="post">
+      <input type="hidden" name="op" value="hook" />
+      <label class="field"><span>Endpoint URL</span><input type="url" class="mono" name="url" placeholder="https://hooks.zapier.com/…" required /></label>
+      <div class="field"><span>Send these events</span>
+        {WEBHOOK_EVENTS.filter((e) => (CALENDAR.enabled || !e.startsWith('event.')) && (bookingsEnabled() || !e.startsWith('booking.'))).map((e) => <label class="check-row"><input type="checkbox" name="events" value={e} checked={e === 'post.published' || e === 'page.published'} /> <code>{e}</code></label>)}
+      </div>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Add endpoint</button></div>
+      <p class="hint modal-note">Deliveries are signed and retried 3 times over about an hour.</p>
+    </form>
+  </Modal>
+</Admin>
+
+<script>
+  document.addEventListener('click', async (e) => {
+    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (c && !confirm(c.dataset.confirm)) { e.preventDefault(); return; }
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (!b) return;
+    await navigator.clipboard.writeText(b.dataset.copy ?? '');
+    b.textContent = 'Copied';
+    setTimeout(() => (b.textContent = 'Copy'), 1200);
+  });
+</script>

package/src/pages/admin/links.astro

@@ -11,11 +11,11 @@ const [links, settings] = await Promise.all([repo.listLinks(), repo.getSettings(
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 ---
 
-<Admin title="Links" section="links">
+<Admin title="Links page" section="links">
   <div class="page-head">
-    <h1>Links</h1>
+    <div><h1>Links page</h1><p class="sub">Your link-in-bio page at /links</p></div>
     <a class="btn sm" href="/links" target="_blank" rel="noopener">View links page ↗</a>
   </div>
 
-  <LinksManager client:only="react" links={links} settings={{ ...settings, draftsApiKey: '' }} unsplashEnabled={unsplashEnabled} />
+  <LinksManager client:only="react" links={links} settings={{ ...settings, draftsApiKey: '', ai: { ...settings.ai, encryptedKey: '' }, agent: { ...settings.agent, keyHash: '' } }} unsplashEnabled={unsplashEnabled} />
 </Admin>

package/src/pages/admin/live.astro

@@ -0,0 +1,12 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import LiveManager from '../../components/LiveManager';
+import { getRepo } from '../../lib/repo';
+import { requireSession } from '../../lib/api';
+const repo = await getRepo(Astro.locals);
+try { await requireSession(Astro.request, Astro.cookies, repo, true); }
+catch { return new Response('Owner access is required.', { status: 403 }); }
+---
+<Admin title="Live video" section="integrations">
+  <LiveManager client:only="react" />
+</Admin>