feat(events): the public calendar, event pages and participation history (Phase 14a)

The anonymous surface an event was always for: GET /public/events,
/public/events/:slug and /public/events/series/:slug, plus
GET /player/events/history, and the four screens over them.

Four org-lead decisions taken up front: split Phase 14 into 14a (website)
and 14b (the app); add a `listed` flag rather than letting `state` mean both
schedulable and announced; put the `events` capability string in the version
block rather than publishing core as a pseudo-module; and drop "venue" from
the spec rather than adding a field nothing had ever built.

`listed` is announcement, not permission. Publishing is what makes a
definition runnable, so without a separate flag a surprise event would have
to be advertised in order to be allowed to happen. It is a column, a switch
in Phase 13's editor, and three SQL predicates -- never a filter applied
after a read, which works exactly as well until the first caller that forgets.

The public shapes are a projection, and the projection is the security
boundary: nothing is spread, so a column added to event_runs next year does
not ride out through it. The spec, health, cleanup, claims, errors and
member_key are all absent by construction.

The six public event triggers gained `eventUrl` (version 1 -> 2), carrying
?run= because the page lives at the definition's slug while every trigger is
about one occurrence. notify.event-started gained the button, at seedVersion 2.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016wDDVXWMDz82WqE1i969r4

client/src/routes/public/EventPage.jsx

@@ -0,0 +1,190 @@
+// One event's public page (EVENTS.md § API surface, Phase 14a).
+//
+// The storyline, its arc, what is live, what is next, what happened recently,
+// and a results table once an occurrence has published one.
+//
+// **`?run=` is read from the URL and passed straight through**, because that is
+// what an announcement's link carries. The page lives at the definition's slug —
+// one stable address, so a link posted in Discord survives a retitle — and the
+// occurrence has to be in the query string or a mail about last Friday's
+// invasion would open next Friday's.
+//
+// **The error is checked before the form.** Phase 13 found the inverse of this
+// on the admin editor: `if (loading || !form) return <Loading/>` above the error
+// branch left a failed load spinning for ever with nothing on screen naming the
+// problem. Order matters, and the order is error first.
+
+import { useParams, useSearchParams, Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+import { eventDateTime, statusWord } from '../../lib/eventCalendar.js'
+
+export default function EventPage() {
+  const { slug } = useParams()
+  const [params] = useSearchParams()
+  const run = params.get('run')
+  const { loading, error, data } = useAsync(() => api.publicEvent(slug, run), [slug, run])
+
+  if (error) {
+    return (
+      <PublicLayout section="website">
+        <div className="shell-mid page-body">
+          <ErrorState message="That event could not be found." />
+          <p style={{ marginTop: 16 }}>
+            <Link to="/site/events">Back to the calendar</Link>
+          </p>
+        </div>
+      </PublicLayout>
+    )
+  }
+  if (loading || !data) {
+    return (
+      <PublicLayout section="website">
+        <div className="shell-mid page-body">
+          <Loading />
+        </div>
+      </PublicLayout>
+    )
+  }
+
+  const event = data.event
+  const headline = event.current || event.next
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-mid page-body">
+        <PageHeader
+          eyebrow={event.series ? event.series.name : 'Event'}
+          title={event.title}
+          lead={event.summary || ''}
+        />
+
+        {event.series && (
+          <p className="sans" style={{ marginTop: -12 }}>
+            <Link to={`/site/events/series/${event.series.slug}`}>Part of {event.series.name}</Link>
+          </p>
+        )}
+
+        {/* The one fact a visitor came for, before the storyline rather than
+            after it: whether it is happening now, and if not, when it next is. */}
+        <div
+          className="panel"
+          style={{
+            padding: '18px 22px',
+            marginBottom: 24,
+            borderColor: event.live ? '#8fc79a' : undefined,
+          }}
+        >
+          {event.live ? (
+            <>
+              <div
+                className="sans"
+                style={{ color: '#8fc79a', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', fontSize: '0.74rem' }}
+              >
+                Happening now
+              </div>
+              <div style={{ marginTop: 6, color: 'var(--head)', fontSize: '1.1rem' }}>
+                {/* The phase LABEL, and only while it is live. The plan behind
+                    the event is never published. */}
+                {event.current.phase || 'Under way'}
+              </div>
+            </>
+          ) : event.next ? (
+            <>
+              <div className="sans dim" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', fontSize: '0.74rem' }}>
+                Next
+              </div>
+              <div style={{ marginTop: 6, color: 'var(--head)', fontSize: '1.1rem' }}>
+                {eventDateTime(event.next.scheduledFor, event.next.timezone)}
+              </div>
+            </>
+          ) : (
+            <div className="dim">Nothing scheduled at the moment.</div>
+          )}
+        </div>
+
+        {event.body && (
+          <article
+            className="panel"
+            style={{ padding: 28, marginBottom: 24 }}
+            // Sanitized on write, the treatment a wiki page and a forum post get.
+            dangerouslySetInnerHTML={{ __html: event.body }}
+          />
+        )}
+
+        {event.results && (
+          <section style={{ marginBottom: 24 }}>
+            <h2 className="display" style={{ fontSize: '1.3rem', color: 'var(--head)' }}>
+              Results
+            </h2>
+            <p className="dim sans" style={{ marginTop: -6, fontSize: '0.85rem' }}>
+              {eventDateTime(event.results.scheduledFor, event.timezone)}
+            </p>
+            {event.results.participants.length === 0 ? (
+              <EmptyState>Results were published with nobody recorded.</EmptyState>
+            ) : (
+              <table className="table" style={{ width: '100%' }}>
+                <thead>
+                  <tr>
+                    <th style={{ width: 60 }}>#</th>
+                    <th>Who</th>
+                    <th style={{ width: 120, textAlign: 'right' }}>Score</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {event.results.participants.map((p, i) => (
+                    <tr key={`${p.name || 'anon'}-${i}`}>
+                      <td>{p.rank ?? '—'}</td>
+                      {/* A module supplies a display name in `meta` or it does
+                          not; the member key is never published, so there is
+                          genuinely nothing else to render. */}
+                      <td>{p.name || <span className="dim">Unnamed</span>}</td>
+                      <td style={{ textAlign: 'right' }}>{p.score}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </section>
+        )}
+
+        <Occurrences title="Coming up" list={event.upcoming} slug={event.slug} timezone={event.timezone} />
+        <Occurrences title="Previously" list={event.past} slug={event.slug} timezone={event.timezone} past />
+
+        {!headline && event.past.length === 0 && (
+          <EmptyState>This event has not been scheduled yet.</EmptyState>
+        )}
+      </div>
+    </PublicLayout>
+  )
+}
+
+function Occurrences({ title, list, slug, timezone, past = false }) {
+  if (!list || list.length === 0) return null
+  return (
+    <section style={{ marginBottom: 24 }}>
+      <h2 className="display" style={{ fontSize: '1.3rem', color: 'var(--head)' }}>
+        {title}
+      </h2>
+      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {list.map((o) => (
+          <li key={o.runId} className="panel" style={{ padding: '12px 18px', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <span style={{ flex: 1, minWidth: 220 }}>{eventDateTime(o.scheduledFor, o.timezone || timezone)}</span>
+            <span className="dim sans" style={{ fontSize: '0.78rem' }}>{statusWord(o.status, o.scheduledFor)}</span>
+            {/* Only a past occurrence gets its own link, and only when it has
+                results: on any other, `?run=` would change nothing a reader
+                could see. */}
+            {past && o.resultsPublishedAt && (
+              <Link className="sans" style={{ fontSize: '0.78rem' }} to={`/site/events/${slug}?run=${o.runId}`}>
+                Results
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

client/src/routes/public/EventSeries.jsx

@@ -0,0 +1,78 @@
+// One arc (EVENTS.md §I, Phase 14a).
+//
+// **The arc is the thing the tooling this replaces could not express at all.**
+// A WordPress calendar plugin has no series field, so "Royal Spy Mission → Risky
+// Partner → Message From the Void" existed only in a GM's head and in whatever
+// the forum post said. This page is that continuity, in the order an editor
+// arranged it — which is why the events are numbered rather than dated: an arc
+// has an order, and its parts may be months apart or run out of sequence.
+
+import { useParams, Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+
+export default function EventSeries() {
+  const { slug } = useParams()
+  const { loading, error, data } = useAsync(() => api.publicEventSeries(slug), [slug])
+
+  // Error first, then loading — the order Phase 13 had to fix on the admin
+  // editor, where a failed load sat behind a spinner that never stopped.
+  if (error) {
+    return (
+      <PublicLayout section="website">
+        <div className="shell-mid page-body">
+          <ErrorState message="That series could not be found." />
+          <p style={{ marginTop: 16 }}>
+            <Link to="/site/events">Back to the calendar</Link>
+          </p>
+        </div>
+      </PublicLayout>
+    )
+  }
+  if (loading || !data) {
+    return (
+      <PublicLayout section="website">
+        <div className="shell-mid page-body">
+          <Loading />
+        </div>
+      </PublicLayout>
+    )
+  }
+
+  const series = data.series
+  return (
+    <PublicLayout section="website">
+      <div className="shell-mid page-body">
+        <PageHeader eyebrow="Series" title={series.name} lead={series.description || ''} />
+        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {series.events.map((e, i) => (
+            <li key={e.slug}>
+              <Link to={`/site/events/${e.slug}`} style={{ textDecoration: 'none' }}>
+                <div className="panel" style={{ padding: '18px 22px', display: 'flex', gap: 18 }}>
+                  <span
+                    className="display"
+                    style={{ color: 'var(--accent)', fontSize: '1.4rem', minWidth: 36, textAlign: 'right' }}
+                  >
+                    {i + 1}
+                  </span>
+                  <span>
+                    <span className="display" style={{ fontSize: '1.15rem', color: 'var(--head)' }}>
+                      {e.title}
+                    </span>
+                    {e.summary && <p style={{ margin: '6px 0 0', color: 'var(--text)' }}>{e.summary}</p>}
+                  </span>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ol>
+        <p className="sans" style={{ marginTop: 24 }}>
+          <Link to="/site/events">Back to the calendar</Link>
+        </p>
+      </div>
+    </PublicLayout>
+  )
+}

client/src/routes/public/Events.jsx

@@ -0,0 +1,131 @@
+// The public event calendar (EVENTS.md §I, Phase 14a).
+//
+// **A list, not a month grid.** The admin calendar draws a grid because an
+// operator's question is "what does this month look like" — coverage, clashes,
+// the gap on the third weekend. A visitor's question is "what is on, and when is
+// the next one", which a chronological list answers in one glance and a grid
+// answers by making them count squares. Same data, different question.
+//
+// **A projection is drawn differently from a run, and the reason is the
+// operator's reason one tier along.** Past the materialisation horizon there is
+// no row: nothing is committed to, nothing can be cancelled, and a forecast
+// rendered identically to a booking would be the page promising something the
+// server has not. It is dashed and labelled "expected".
+//
+// The date heading is the READER's day and the time beside each entry is the
+// EVENT's own zone. That split is §I's: the shard's evening is what "8pm" means
+// to everyone reading it, but "this month" is the month the reader is living in.
+
+import { Link } from 'react-router-dom'
+import PublicLayout from '../../components/PublicLayout.jsx'
+import PageHeader from '../../components/PageHeader.jsx'
+import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
+import { useAsync } from '../../lib/useAsync.js'
+import { api } from '../../api/client.js'
+import { eventTime, readerDayLabel, statusWord } from '../../lib/eventCalendar.js'
+
+export default function Events() {
+  const { loading, error, data } = useAsync(() => api.publicEvents())
+  const entries = data?.entries || []
+
+  // Grouped by the reader's own day, in order. The server already sorted by
+  // instant, so this preserves that order rather than re-sorting.
+  const days = []
+  for (const entry of entries) {
+    const label = readerDayLabel(entry.scheduledFor)
+    const last = days[days.length - 1]
+    if (last && last.label === label) last.entries.push(entry)
+    else days.push({ label, entries: [entry] })
+  }
+
+  return (
+    <PublicLayout section="website">
+      <div className="shell-mid page-body">
+        <PageHeader
+          eyebrow="What's on"
+          title="Events"
+          lead="Everything scheduled, live and recently finished. Times are shown in the shard's own timezone."
+        />
+        <section style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
+          {loading && <Loading />}
+          {error && <ErrorState message="Could not load the calendar right now." />}
+          {!loading && !error && entries.length === 0 && (
+            <EmptyState>Nothing on the calendar just yet — check back soon.</EmptyState>
+          )}
+          {days.map((day) => (
+            <div key={day.label}>
+              <h2
+                className="sans"
+                style={{
+                  margin: '0 0 12px',
+                  fontSize: '0.74rem',
+                  letterSpacing: '0.08em',
+                  textTransform: 'uppercase',
+                  color: 'var(--muted)',
+                }}
+              >
+                {day.label}
+              </h2>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                {day.entries.map((entry) => (
+                  <EventRow key={`${entry.slug}-${entry.scheduledFor}-${entry.kind}`} entry={entry} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </section>
+      </div>
+    </PublicLayout>
+  )
+}
+
+function EventRow({ entry }) {
+  const projected = entry.kind === 'projected'
+  const body = (
+    <div
+      className="panel"
+      style={{
+        padding: '16px 20px',
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 16,
+        flexWrap: 'wrap',
+        // The whole visual difference between a booking and a forecast, and it
+        // is deliberately not subtle.
+        borderStyle: projected ? 'dashed' : undefined,
+        opacity: projected ? 0.72 : 1,
+      }}
+    >
+      <span className="sans" style={{ fontWeight: 700, color: 'var(--accent)', minWidth: 96 }}>
+        {eventTime(entry.scheduledFor, entry.timezone)}
+      </span>
+      <span style={{ flex: 1, minWidth: 200 }}>
+        <span className="display" style={{ fontSize: '1.15rem', color: 'var(--head)' }}>
+          {entry.title}
+        </span>
+        {entry.seriesName && (
+          <span className="dim" style={{ marginLeft: 10, fontSize: '0.9rem' }}>
+            {entry.seriesName}
+          </span>
+        )}
+      </span>
+      <span
+        className="sans"
+        style={{
+          fontSize: '0.72rem',
+          letterSpacing: '0.06em',
+          textTransform: 'uppercase',
+          color: entry.live ? '#8fc79a' : 'var(--muted)',
+          fontWeight: entry.live ? 700 : 400,
+        }}
+      >
+        {projected ? 'Expected' : statusWord(entry.status, entry.scheduledFor)}
+      </span>
+    </div>
+  )
+
+  // A projection has no page of its own worth linking to any differently — the
+  // event page IS the definition's — so both link to the same place. It is the
+  // OCCURRENCE that does not exist yet, not the event.
+  return <Link to={`/site/events/${entry.slug}`} style={{ textDecoration: 'none' }}>{body}</Link>
+}