feat(events): schedule, recurrence and the calendar (Phase 4)

The four closed recurrence shapes computed in the definition's own IANA zone,
a fourteen-day materialisation horizon with projections beyond it, series as a
managed thing, and the admin calendar that replaces the plugin this feature
exists to replace. An event now happens on its own.

No schema change: Phase 1 built every column this needed.

- events/recurrence.js is the ONE place an occurrence is computed, so the
  runner's expansion and the calendar's forecast cannot disagree. No date
  library added — Node ships the tzdata one would vendor, behind Intl.
- The runner's materialise leg is now two halves: expand, then sweep. The
  window starts at `now - grace`, so an occurrence nobody could have seen is
  never invented retroactively; the horizon is what makes the missed sweep
  mean anything for a recurrence.
- Publishing is the schedule switch and archiving turns it off, and publishing
  re-pins every occurrence that has not started.
- A projection is never drawn over an instant a run occupies, so a cancelled
  occurrence does not reappear as a forecast.

54 new tests, incl. the DST fixture set the plan asked for and three new
statements proved against a real MariaDB. Suite 1768/1711/56 skipped/1 fail
(pre-existing CRLF). Walked end to end on the local review stack.

Docs: RunicGateway/docs#PENDING

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/App.jsx

@@ -50,6 +50,7 @@ import EngagementSendLog from './routes/admin/views/EngagementSendLog.jsx'
 import EngagementSuppressions from './routes/admin/views/EngagementSuppressions.jsx'
 import EngagementRetention from './routes/admin/views/EngagementRetention.jsx'
 import EventsAdmin from './routes/admin/views/EventsAdmin.jsx'
+import EventsCalendar from './routes/admin/views/EventsCalendar.jsx'
 import EventEditor from './routes/admin/views/EventEditor.jsx'
 import EventRun from './routes/admin/views/EventRun.jsx'
 import TeamsAdmin from './routes/admin/views/TeamsAdmin.jsx'
@@ -204,6 +205,7 @@ export default function App() {
                   route it calls. `runs/:runId` is declared before `:id` so the
                   literal segment is never read as a definition id. */}
               <Route path="events" element={<EventsAdmin />} />
+              <Route path="events/calendar" element={<EventsCalendar />} />
               <Route path="events/runs/:runId" element={<EventRun />} />
               <Route path="events/new" element={<EventEditor />} />
               <Route path="events/:id" element={<EventEditor />} />

client/src/api/client.js

@@ -487,6 +487,24 @@ export const api = {
     listEventVersions: (id) => req(`/admin/events/${id}/versions`),
     eventCatalog: () => req('/admin/events/catalog'),
     eventSeries: () => req('/admin/events/series'),
+    // Series writes are admin+editor rather than admin: naming an arc is
+    // authoring, and §N2's narrow gate is about committing the deployment to a
+    // run. The delete is a real delete and answers with how many definitions it
+    // detached — `series_id` is ON DELETE SET NULL, so nothing is destroyed.
+    createEventSeries: (body) => req('/admin/events/series', { method: 'POST', body }),
+    updateEventSeries: (id, body) => req(`/admin/events/series/${id}`, { method: 'PUT', body }),
+    deleteEventSeries: (id) => req(`/admin/events/series/${id}`, { method: 'DELETE' }),
+    // The calendar. `from`/`to` are UTC instants the caller computes from the
+    // month it is showing, in the READER's zone — the server never guesses it.
+    // A `status` or `scope` filter suppresses projections, which is why the
+    // month view sends neither.
+    eventCalendar: ({ from, to, status, scope, seriesId } = {}) => {
+      const qs = new URLSearchParams({ from, to })
+      if (status) qs.set('status', status)
+      if (scope) qs.set('scope', scope)
+      if (seriesId) qs.set('seriesId', String(seriesId))
+      return req(`/admin/events/calendar?${qs.toString()}`)
+    },
     startEventRun: (id, body) => req(`/admin/events/${id}/runs`, { method: 'POST', body }),
     listEventRuns: ({ definitionId, status, limit } = {}) => {
       const qs = new URLSearchParams()

client/src/lib/eventAuthoring.js

@@ -141,7 +141,7 @@ export function formFromDefinition(event) {
     concurrencyKey: event?.concurrencyKey || '',
     graceSeconds: event?.graceSeconds ?? 900,
     timezone: event?.timezone || 'UTC',
-    scheduleKind: spec.schedule?.kind || 'manual',
+    ...scheduleFormFrom(spec.schedule),
     phases: (spec.phases || []).map((p) => ({
       key: p.key || '',
       label: p.label || '',
@@ -204,11 +204,136 @@ export function payloadFromForm(form) {
       concurrencyKey: form.concurrencyKey || null,
       graceSeconds: Number(form.graceSeconds),
       timezone: form.timezone,
-      spec: { schedule: { kind: form.scheduleKind || 'manual' }, phases },
+      spec: { schedule: scheduleFromForm(form), phases },
     },
   }
 }
 
+
+// ── The schedule (Phase 4) ─────────────────────────────────────────────────
+//
+// The four closed shapes of §E, mirrored so the form can render one and the
+// preview can describe it. `events/spec.js` and `events/recurrence.js` remain
+// the deciders — this is what makes the form a form rather than a text box, and
+// it is the whole reason the schedule is not a cron string: a closed set has a
+// dropdown, and an operator can proofread a dropdown.
+
+export const WEEKDAYS = [
+  'sunday',
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+]
+
+export const SCHEDULE_KINDS = [
+  { value: 'manual', label: 'Started by hand' },
+  { value: 'once', label: 'Once, at a set time' },
+  { value: 'weekly', label: 'Weekly, on chosen days' },
+  { value: 'monthly', label: 'Monthly, on the nth weekday' },
+]
+
+// 1..4 and "last". There is no fifth: every month has a first through fourth of
+// every weekday, and "last" is what a month with five Fridays makes different
+// from "fourth" (org lead, 2026-09-02).
+export const MONTHLY_NTHS = [
+  { value: 1, label: 'First' },
+  { value: 2, label: 'Second' },
+  { value: 3, label: 'Third' },
+  { value: 4, label: 'Fourth' },
+  { value: -1, label: 'Last' },
+]
+
+const capitalise = (s) => String(s || '').charAt(0).toUpperCase() + String(s || '').slice(1)
+
+/**
+ * A schedule in words, in the event's own zone.
+ *
+ * The server says the same thing in `events/recurrence.js#describe`, and the two
+ * are allowed to differ on wording but not on meaning — this one is what an
+ * author reads while they are still typing, before anything has been saved.
+ */
+export function describeSchedule(schedule, timezone = 'UTC') {
+  if (!schedule || typeof schedule !== 'object') return 'No schedule'
+  const nth = MONTHLY_NTHS.find((n) => n.value === Number(schedule.nth))
+  switch (schedule.kind) {
+    case 'manual':
+      return 'Started by hand — nothing happens until an admin presses Start'
+    case 'once': {
+      if (!schedule.at) return 'Once — no date chosen yet'
+      return `Once, on ${String(schedule.at).replace('T', ' at ')} (${timezone})`
+    }
+    case 'weekly': {
+      const days = (schedule.days || []).map(capitalise)
+      if (!days.length || !schedule.time) return 'Weekly — choose days and a time'
+      const list =
+        days.length === 1
+          ? days[0]
+          : `${days.slice(0, -1).join(', ')} and ${days[days.length - 1]}`
+      return `Every ${list} at ${schedule.time} (${timezone})`
+    }
+    case 'monthly': {
+      if (!nth || !schedule.weekday || !schedule.time) {
+        return 'Monthly — choose a week, a weekday and a time'
+      }
+      return `The ${nth.label.toLowerCase()} ${capitalise(schedule.weekday)} of every month at ${schedule.time} (${timezone})`
+    }
+    default:
+      return 'No schedule'
+  }
+}
+
+/**
+ * The schedule half of the editor's working state.
+ *
+ * Every shape's fields are kept side by side rather than cleared when the kind
+ * changes, so an author who clicks Weekly, then Monthly, then back has not lost
+ * the days they picked. `scheduleFromForm` reads only the fields the chosen kind
+ * uses, which is what keeps the request body a clean single shape.
+ */
+export function scheduleFormFrom(schedule) {
+  const s = schedule || {}
+  return {
+    scheduleKind: s.kind || 'manual',
+    scheduleAt: s.kind === 'once' ? s.at || '' : '',
+    scheduleDays: s.kind === 'weekly' ? s.days || [] : [],
+    scheduleNth: s.kind === 'monthly' ? String(s.nth) : '1',
+    scheduleWeekday: s.kind === 'monthly' ? s.weekday || 'friday' : 'friday',
+    scheduleTime: s.kind === 'weekly' || s.kind === 'monthly' ? s.time || '20:00' : '20:00',
+  }
+}
+
+/** The schedule the form describes, as the spec object the server expects. */
+export function scheduleFromForm(form) {
+  switch (form.scheduleKind) {
+    case 'once':
+      return { kind: 'once', at: form.scheduleAt }
+    case 'weekly':
+      return { kind: 'weekly', days: form.scheduleDays || [], time: form.scheduleTime }
+    case 'monthly':
+      return {
+        kind: 'monthly',
+        nth: Number(form.scheduleNth),
+        weekday: form.scheduleWeekday,
+        time: form.scheduleTime,
+      }
+    default:
+      return { kind: 'manual' }
+  }
+}
+
+/**
+ * What a calendar entry is, and therefore what may be done with it.
+ *
+ * A `run` is a row: it has a console and somebody can cancel it. A `projected`
+ * entry is arithmetic the runner has not reached yet — there is nothing to open
+ * and nothing to stop, and an operator who treats one as a booking has been
+ * misled by the UI rather than by the server.
+ */
+export const isProjected = (entry) => entry?.kind === 'projected'
+
 /** An empty box is `{}`, not a parse error — a step may legitimately take none. */
 export function parseParams(text) {
   const raw = (text || '').trim()

client/src/routes/admin/AdminLayout.jsx

@@ -133,6 +133,10 @@ export const NAV = [
     title: 'Events',
     items: [
       { to: '/admin/events', label: 'Events', icon: IconCalendar, roles: ['admin', 'editor', 'moderator'] },
+      // Phase 4. The same staff gate as the list beside it: a calendar is a read,
+      // and the arcs it manages are authoring gated on the buttons rather than
+      // on the row.
+      { to: '/admin/events/calendar', label: 'Calendar', icon: IconCalendar, roles: ['admin', 'editor', 'moderator'] },
     ],
   },
   {
@@ -218,6 +222,7 @@ const TITLES = {
   '/admin/engagement/sends': 'Send Log',
   '/admin/engagement/retention': 'Retention',
   '/admin/events': 'Events',
+  '/admin/events/calendar': 'Event calendar',
   '/admin/events/new': 'New event',
 }
 

client/src/routes/admin/views/EventEditor.jsx

@@ -8,6 +8,11 @@ import {
   payloadFromForm,
   blankPhase,
   blankStep,
+  describeSchedule,
+  scheduleFromForm,
+  SCHEDULE_KINDS,
+  MONTHLY_NTHS,
+  WEEKDAYS,
 } from '../../../lib/eventAuthoring.js'
 
 // Admin → Events → the definition editor (EVENTS.md §I, Phase 3).
@@ -191,7 +196,13 @@ export default function EventEditor() {
       const result = await api.admin.publishEvent(id)
       setEvent(result.event)
       setVersions(await api.admin.listEventVersions(id).then((r) => r.versions || []))
-      setNotice(`Published as v${result.version}.`)
+      // The re-pin count is said out loud, because an editor who does not know
+      // their fix reached next Friday finds out on Friday.
+      setNotice(
+        result.repinned
+          ? `Published as v${result.version}. ${result.repinned} scheduled occurrence${result.repinned === 1 ? '' : 's'} moved to it.`
+          : `Published as v${result.version}.`,
+      )
     } catch (err) {
       setProblems(err.body?.errors || [err.message])
     } finally {
@@ -329,13 +340,94 @@ export default function EventEditor() {
       </div>
 
       {/* ── Schedule ── */}
+      {/*
+        Four closed shapes rendered as a form, never a cron string. A cron
+        expression is the one field an operator cannot proofread, and the whole
+        point of the closed set is that this panel can be read back in English —
+        which is what the preview line under it does.
+      */}
       <div className="panel-flat" style={{ padding: 14, marginBottom: 14 }}>
-        <h3 className="sans" style={{ margin: '0 0 6px', fontSize: '0.92rem' }}>Schedule</h3>
-        <p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>
-          <strong>Started by hand.</strong> Recurrence — once, weekly, monthly on the nth weekday —
-          is computed in the event&rsquo;s own timezone and arrives in the next phase, with the calendar.
-          Until then an occurrence exists because somebody pressed <em>Start now</em>, and the
-          schedule shape a definition may carry is deliberately the single one the runner honours.
+        <h3 className="sans" style={{ margin: '0 0 10px', fontSize: '0.92rem' }}>Schedule</h3>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 12 }}>
+          <label>
+            <span className="field-label">Repeats</span>
+            <select className="select" value={form.scheduleKind} disabled={archived}
+              onChange={(e) => set({ scheduleKind: e.target.value })}>
+              {SCHEDULE_KINDS.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
+            </select>
+          </label>
+
+          {form.scheduleKind === 'once' && (
+            <label>
+              <span className="field-label">Date and time</span>
+              <input className="input" type="datetime-local" value={form.scheduleAt} disabled={archived}
+                onChange={(e) => set({ scheduleAt: e.target.value.slice(0, 16) })} />
+            </label>
+          )}
+
+          {form.scheduleKind === 'monthly' && (
+            <>
+              <label>
+                <span className="field-label">Week</span>
+                <select className="select" value={form.scheduleNth} disabled={archived}
+                  onChange={(e) => set({ scheduleNth: e.target.value })}>
+                  {MONTHLY_NTHS.map((n) => <option key={n.value} value={n.value}>{n.label}</option>)}
+                </select>
+              </label>
+              <label>
+                <span className="field-label">Weekday</span>
+                <select className="select" value={form.scheduleWeekday} disabled={archived}
+                  onChange={(e) => set({ scheduleWeekday: e.target.value })}>
+                  {WEEKDAYS.map((d) => (
+                    <option key={d} value={d}>{d.charAt(0).toUpperCase() + d.slice(1)}</option>
+                  ))}
+                </select>
+              </label>
+            </>
+          )}
+
+          {(form.scheduleKind === 'weekly' || form.scheduleKind === 'monthly') && (
+            <label>
+              <span className="field-label">Time</span>
+              <input className="input" type="time" value={form.scheduleTime} disabled={archived}
+                onChange={(e) => set({ scheduleTime: e.target.value })} />
+            </label>
+          )}
+        </div>
+
+        {form.scheduleKind === 'weekly' && (
+          <div style={{ marginTop: 12 }}>
+            <span className="field-label">Days</span>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
+              {WEEKDAYS.map((day) => {
+                const on = (form.scheduleDays || []).includes(day)
+                return (
+                  <button key={day} type="button" className="pill" disabled={archived}
+                    aria-pressed={on}
+                    style={{ fontSize: '0.72rem', opacity: on ? 1 : 0.45 }}
+                    onClick={() => set({
+                      scheduleDays: on
+                        ? form.scheduleDays.filter((d) => d !== day)
+                        : WEEKDAYS.filter((d) => d === day || form.scheduleDays.includes(d)),
+                    })}>
+                    {day.charAt(0).toUpperCase() + day.slice(1, 3)}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        <p className="sans" style={{ margin: '12px 0 0', fontSize: '0.84rem' }}>
+          {describeSchedule(scheduleFromForm(form), form.timezone)}
+        </p>
+        <p className="sans dim" style={{ fontSize: '0.78rem', margin: '8px 0 0' }}>
+          Times are the event&rsquo;s own, in <code>{form.timezone}</code> — not the reader&rsquo;s. A
+          recurring schedule goes live when the definition is published and stops when it is
+          archived; occurrences become real runs a fortnight before they happen, and the
+          calendar forecasts the rest. A time that daylight saving skips moves forward to the next
+          one that exists, and an hour that happens twice takes the first.
         </p>
       </div>
 

client/src/routes/admin/views/EventsAdmin.jsx

@@ -20,9 +20,10 @@ import { runStatusWord, isTerminalRun } from '../../../lib/eventAuthoring.js'
 // comes from the run row itself (`waitingSteps`), so a run needs nobody to open
 // it before it can say so.
 //
-// What is NOT here: a calendar. Recurrence and the month view are Phase 4, and a
-// definition today can only carry `schedule: { kind: 'manual' }` — so the honest
-// list is a list, and the screen says as much rather than showing an empty grid.
+// **The calendar is a separate screen, not a third table here.** It answers
+// "when", this one answers "what" — and Phase 4, which built it, also made a
+// definition able to carry a recurrence, so the two questions stopped having the
+// same answer the moment an occurrence could exist before anybody pressed Start.
 
 const STATE_WORD = { draft: 'Draft', ready: 'Ready', archived: 'Archived' }
 
@@ -108,8 +109,9 @@ export default function EventsAdmin() {
         <p className="sans" style={{ margin: 0, fontSize: '0.86rem', color: 'var(--muted)', maxWidth: 620 }}>
           Scheduled, bounded, audited changes to the live world. A definition is authored as a draft,
           published as an immutable version, and every occurrence of it runs against the version it
-          pinned. Recurrence and the calendar arrive with the next phase — for now an occurrence is
-          started by hand.
+          pinned. A definition can repeat — once, weekly, or on the nth weekday of the month, in its
+          own timezone — and the <Link to="/admin/events/calendar">calendar</Link> is where those
+          occurrences are read.
         </p>
         <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
           <label>
@@ -121,6 +123,9 @@ export default function EventsAdmin() {
               <option value="archived">Archived</option>
             </select>
           </label>
+          <Link className="pill" style={{ fontSize: '0.74rem' }} to="/admin/events/calendar">
+            Calendar
+          </Link>
           {mayAuthor && (
             <Link className="pill" style={{ fontSize: '0.74rem' }} to="/admin/events/new">
               New event

client/src/routes/admin/views/EventsCalendar.jsx

@@ -0,0 +1,457 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Loading, ErrorState } from '../../../components/PageState.jsx'
+import { useAuth } from '../../../contexts/AuthContext.jsx'
+import { api } from '../../../api/client.js'
+import { runStatusWord, isProjected } from '../../../lib/eventAuthoring.js'
+
+// Admin → Events → Calendar (EVENTS.md §I, Phase 4).
+//
+// **This screen is the deliverable.** What this feature replaces is a WordPress
+// calendar plugin with no series field, no recurrence and no results — so a
+// month grid that knows about arcs, repeats and local time is not decoration
+// here, it is the point.
+//
+// **Two kinds of entry, drawn differently on purpose.** A solid one is a *run*:
+// a real row with a status, a pinned version and a console, and somebody can
+// cancel it. A dashed one is a *projection*: arithmetic past the runner's
+// fourteen-day horizon, with no row behind it, nothing committed and nothing to
+// open. An operator who treats a forecast as a booking has been misled by the
+// UI, not by the server, so the difference is drawn rather than merely stated —
+// and the legend says which is which.
+//
+// **The grid's date axis is the READER's zone; each entry's time is the
+// EVENT's.** §E gives the timezone to the event because every listing this
+// replaces is written in the shard's local zone, but "what is happening this
+// month" is a question about the month the person reading is living in. So the
+// cell an event lands in is the reader's date, and the time beside it always
+// carries the event's own zone — `20:00 Europe/Berlin` misreads as nothing.
+
+const DAY_MS = 86_400_000
+
+const STATUS_COLOR = {
+  failed: '#d98b84',
+  missed: '#d98b84',
+  paused: '#d9c184',
+  cancelled: 'var(--muted)',
+  running: '#8fc79a',
+}
+
+/** The event's own wall clock, which is the only time worth showing beside it. */
+function localTime(instant, timezone) {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      timeZone: timezone,
+      hour: '2-digit',
+      minute: '2-digit',
+      hourCycle: 'h23',
+    }).format(new Date(instant))
+  } catch {
+    return new Date(instant).toISOString().slice(11, 16)
+  }
+}
+
+/** The reader's own date key, which is what places an entry in a cell. */
+const readerDayKey = (instant) => {
+  const d = new Date(instant)
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`
+}
+
+/**
+ * The six-week grid a month view draws, Monday first.
+ *
+ * Always six weeks rather than however many the month needs: a grid that
+ * changes height as you page through it is a grid whose rows move under the
+ * cursor.
+ */
+function monthGrid(year, month) {
+  const first = new Date(year, month, 1)
+  const offset = (first.getDay() + 6) % 7
+  const start = new Date(year, month, 1 - offset)
+  return Array.from({ length: 42 }, (_, i) => new Date(start.getTime() + i * DAY_MS))
+}
+
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+]
+
+export default function EventsCalendar() {
+  const { user } = useAuth()
+  const today = useMemo(() => new Date(), [])
+  const [year, setYear] = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth())
+  const [view, setView] = useState('month')
+  const [seriesId, setSeriesId] = useState('')
+  const [series, setSeries] = useState([])
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [managingSeries, setManagingSeries] = useState(false)
+
+  const mayAuthor = user?.role === 'admin' || user?.role === 'editor'
+
+  // The window is the grid's own span, not the month's: an entry in the leading
+  // or trailing week of the grid belongs to a neighbouring month and still has
+  // to be fetched, or the first row of every month renders empty.
+  const grid = useMemo(() => monthGrid(year, month), [year, month])
+  const window = useMemo(() => {
+    if (view === 'month') {
+      return { from: grid[0], to: new Date(grid[41].getTime() + DAY_MS) }
+    }
+    // The list view answers a different question — "what is coming" — so it runs
+    // forward from now rather than over a calendar month.
+    const from = new Date()
+    return { from, to: new Date(from.getTime() + 60 * DAY_MS) }
+  }, [view, grid])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [calendar, seriesList] = await Promise.all([
+        api.admin.eventCalendar({
+          from: window.from.toISOString(),
+          to: window.to.toISOString(),
+          seriesId: seriesId || undefined,
+        }),
+        api.admin.eventSeries(),
+      ])
+      setData(calendar)
+      setSeries(seriesList.series || [])
+    } catch (err) {
+      setError(err)
+    } finally {
+      setLoading(false)
+    }
+  }, [window.from, window.to, seriesId])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  const byDay = useMemo(() => {
+    const map = new Map()
+    for (const entry of data?.entries || []) {
+      const key = readerDayKey(entry.scheduledFor)
+      if (!map.has(key)) map.set(key, [])
+      map.get(key).push(entry)
+    }
+    return map
+  }, [data])
+
+  const step = (delta) => {
+    const next = new Date(year, month + delta, 1)
+    setYear(next.getFullYear())
+    setMonth(next.getMonth())
+  }
+
+  if (loading && !data) return <Loading />
+  if (error && !data) return <ErrorState error={error} onRetry={load} />
+
+  const horizon = data?.horizon ? new Date(data.horizon) : null
+
+  return (
+    <>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', marginBottom: 12 }}>
+        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          {/*
+            The stepper belongs to the MONTH view only. The list answers "what is
+            coming" and runs sixty days forward from now whatever month is
+            selected -- so paging it would be three controls that visibly do
+            nothing, which is the one thing this feature has refused since Phase
+            1. The heading says which question is being asked instead.
+          */}
+          {view === 'month' && (
+            <>
+              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} onClick={() => step(-1)}>
+                &larr;
+              </button>
+              <strong className="sans" style={{ fontSize: '0.95rem', minWidth: 150, textAlign: 'center' }}>
+                {`${MONTH_NAMES[month]} ${year}`}
+              </strong>
+              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} onClick={() => step(1)}>
+                &rarr;
+              </button>
+              <button type="button" className="pill" style={{ fontSize: '0.72rem' }}
+                disabled={year === today.getFullYear() && month === today.getMonth()}
+                onClick={() => { setYear(today.getFullYear()); setMonth(today.getMonth()) }}>
+                Today
+              </button>
+            </>
+          )}
+          {view === 'list' && (
+            <strong className="sans" style={{ fontSize: '0.95rem' }}>The next 60 days</strong>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: 6, marginLeft: 'auto', alignItems: 'center' }}>
+          <select className="select" value={seriesId} onChange={(e) => setSeriesId(e.target.value)}
+            style={{ minWidth: 170 }}>
+            <option value="">Every series</option>
+            {series.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+          </select>
+          <button type="button" className="pill" aria-pressed={view === 'month'}
+            style={{ fontSize: '0.72rem', opacity: view === 'month' ? 1 : 0.5 }}
+            onClick={() => setView('month')}>
+            Month
+          </button>
+          <button type="button" className="pill" aria-pressed={view === 'list'}
+            style={{ fontSize: '0.72rem', opacity: view === 'list' ? 1 : 0.5 }}
+            onClick={() => setView('list')}>
+            List
+          </button>
+          {mayAuthor && (
+            <button type="button" className="pill" aria-pressed={managingSeries}
+              style={{ fontSize: '0.72rem', opacity: managingSeries ? 1 : 0.6 }}
+              onClick={() => setManagingSeries((v) => !v)}>
+              Series
+            </button>
+          )}
+          <Link to="/admin/events" className="pill" style={{ fontSize: '0.72rem' }}>Events</Link>
+        </div>
+      </div>
+
+      {/* The legend is not optional. The whole screen rests on the reader
+          knowing that a dashed entry is not a booking. */}
+      <p className="sans dim" style={{ fontSize: '0.78rem', margin: '0 0 12px' }}>
+        <span style={{ ...chip, borderStyle: 'solid' }}>Scheduled run</span> is a real occurrence with
+        a console — it can be opened, paused and cancelled.{' '}
+        <span style={{ ...chip, borderStyle: 'dashed', opacity: 0.7 }}>Forecast</span> is what the
+        recurrence works out to beyond the {data?.horizonDays ?? 14}-day horizon: nothing is
+        committed yet and there is nothing to open.
+        {horizon && ` Everything up to ${horizon.toLocaleDateString()} is real.`}
+      </p>
+
+      {managingSeries && <SeriesManager series={series} onChanged={load} />}
+
+      {data?.truncated && (
+        <p className="sans" style={{ fontSize: '0.8rem', color: '#d9c184' }}>
+          This window has more than the calendar will draw. Narrow it by series, or page to a
+          shorter span.
+        </p>
+      )}
+
+      {view === 'month' ? (
+        <div className="panel-flat" style={{ padding: 10 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 4 }}>
+            {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((d) => (
+              <div key={d} className="sans dim" style={{ fontSize: '0.72rem', textAlign: 'center', padding: '2px 0' }}>
+                {d}
+              </div>
+            ))}
+            {grid.map((day) => {
+              const entries = byDay.get(readerDayKey(day)) || []
+              const outside = day.getMonth() !== month
+              const isToday = readerDayKey(day) === readerDayKey(today)
+              return (
+                <div key={day.toISOString()}
+                  style={{
+                    minHeight: 84,
+                    padding: 4,
+                    borderRadius: 4,
+                    border: isToday ? '1px solid var(--accent, #8fc79a)' : '1px solid transparent',
+                    background: outside ? 'transparent' : 'rgba(255,255,255,0.03)',
+                    opacity: outside ? 0.4 : 1,
+                  }}>
+                  <div className="sans dim" style={{ fontSize: '0.7rem', marginBottom: 3 }}>
+                    {day.getDate()}
+                  </div>
+                  {entries.map((entry) => <EntryChip key={entryKey(entry)} entry={entry} />)}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="panel-flat" style={{ padding: 4 }}>
+          {(data?.entries || []).length === 0 ? (
+            <p className="sans dim" style={{ padding: 14, margin: 0, fontSize: '0.84rem' }}>
+              Nothing is scheduled in the next sixty days.{' '}
+              {mayAuthor && <Link to="/admin/events/new">Author an event</Link>}
+            </p>
+          ) : (
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>When</th>
+                  <th>Event</th>
+                  <th>Series</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(data?.entries || []).map((entry) => (
+                  <tr key={entryKey(entry)} style={{ opacity: isProjected(entry) ? 0.7 : 1 }}>
+                    <td className="sans" style={{ fontSize: '0.82rem', whiteSpace: 'nowrap' }}>
+                      {new Date(entry.scheduledFor).toLocaleDateString()}{' '}
+                      <span className="dim">
+                        {localTime(entry.scheduledFor, entry.timezone)} {entry.timezone}
+                      </span>
+                    </td>
+                    <td className="sans" style={{ fontSize: '0.84rem' }}>
+                      {entry.runId ? (
+                        <Link to={`/admin/events/runs/${entry.runId}`}>{entry.title}</Link>
+                      ) : (
+                        <Link to={`/admin/events/${entry.definitionId}`}>{entry.title}</Link>
+                      )}
+                      {entry.adjusted === 'gap' && (
+                        <span className="dim" title="Daylight saving skips the time this was authored at, so it moves forward to the next one that exists">
+                          {' '}(clocks change)
+                        </span>
+                      )}
+                    </td>
+                    <td className="sans dim" style={{ fontSize: '0.8rem' }}>{entry.seriesName || '—'}</td>
+                    <td className="sans" style={{ fontSize: '0.8rem', color: STATUS_COLOR[entry.status] }}>
+                      {isProjected(entry) ? <span className="dim">Forecast</span> : runStatusWord(entry.status)}
+                      {entry.waitingSteps > 0 && (
+                        <span style={{ color: '#d9c184' }}> · waiting on a person</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+// A projection has no run id, so the definition and the instant are its
+// identity — the same pair the server dedupes projections against.
+const entryKey = (entry) =>
+  entry.runId ? `run-${entry.runId}` : `proj-${entry.definitionId}-${entry.scheduledFor}`
+
+const chip = {
+  display: 'inline-block',
+  padding: '0 5px',
+  borderRadius: 3,
+  borderWidth: 1,
+  border: '1px solid var(--muted)',
+  fontSize: '0.72rem',
+}
+
+/**
+ * The arcs, managed where they are used.
+ *
+ * A series is a label, not authored content — nothing pins one and no run
+ * references one — so this is a small inline panel rather than a screen of its
+ * own, and it lives on the calendar because the calendar is what makes an arc
+ * visible in the first place. §I: *"Royal Spy Mission → Risky Partner → Message
+ * From the Void" is continuity that exists nowhere in the tooling this replaces.*
+ *
+ * The delete is a real delete, and it says what it will detach before it
+ * happens: `series_id` is ON DELETE SET NULL, so the definitions survive without
+ * an arc and re-attaching one is a dropdown in the editor. Nothing is destroyed,
+ * which is why this is the one delete in this feature that is not an archive.
+ */
+function SeriesManager({ series, onChanged }) {
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [problem, setProblem] = useState(null)
+
+  const run = async (fn) => {
+    setBusy(true)
+    setProblem(null)
+    try {
+      await fn()
+      await onChanged()
+    } catch (err) {
+      setProblem(err?.body?.errors?.join('; ') || err?.message || 'That did not work')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="panel-flat" style={{ padding: 14, marginBottom: 12 }}>
+      <h3 className="sans" style={{ margin: '0 0 4px', fontSize: '0.92rem' }}>Series</h3>
+      <p className="sans dim" style={{ margin: '0 0 10px', fontSize: '0.78rem' }}>
+        An arc several events form together. The order here is where a series sits among the
+        others; where an event sits <em>within</em> its arc is that event&rsquo;s own order, in the
+        editor.
+      </p>
+
+      {problem && (
+        <p className="sans" style={{ fontSize: '0.8rem', color: '#d98b84' }}>{problem}</p>
+      )}
+
+      {series.map((s) => (
+        <div key={s.id} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
+          <input className="input" defaultValue={s.name} disabled={busy} style={{ flex: 1 }}
+            onBlur={(e) => {
+              const next = e.target.value.trim()
+              if (next && next !== s.name) {
+                run(() => api.admin.updateEventSeries(s.id, { name: next, description: s.description, ordering: s.ordering }))
+              }
+            }} />
+          <input className="input" type="number" defaultValue={s.ordering} disabled={busy}
+            style={{ width: 72 }} aria-label={`Order of ${s.name}`}
+            onBlur={(e) => {
+              const next = Number(e.target.value)
+              if (Number.isInteger(next) && next !== s.ordering) {
+                run(() => api.admin.updateEventSeries(s.id, { name: s.name, description: s.description, ordering: next }))
+              }
+            }} />
+          <span className="sans dim" style={{ fontSize: '0.76rem', minWidth: 70 }}>
+            {s.definitionCount} event{s.definitionCount === 1 ? '' : 's'}
+          </span>
+          <button type="button" className="pill" disabled={busy} style={{ fontSize: '0.7rem' }}
+            onClick={() => {
+              // The count is in the question, because the consequence of this
+              // delete is entirely about the rows it does not delete.
+              const ask = s.definitionCount
+                ? `Delete "${s.name}"? ${s.definitionCount} event(s) will keep their content and lose this series.`
+                : `Delete "${s.name}"?`
+              // eslint-disable-next-line no-alert
+              if (window.confirm(ask)) run(() => api.admin.deleteEventSeries(s.id))
+            }}>
+            Delete
+          </button>
+        </div>
+      ))}
+
+      <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
+        <input className="input" value={name} placeholder="New series name" disabled={busy}
+          style={{ flex: 1 }} onChange={(e) => setName(e.target.value)} />
+        <button type="button" className="pill" disabled={busy || !name.trim()} style={{ fontSize: '0.72rem' }}
+          onClick={() => run(async () => {
+            await api.admin.createEventSeries({ name: name.trim() })
+            setName('')
+          })}>
+          Add
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function EntryChip({ entry }) {
+  const projected = isProjected(entry)
+  const to = entry.runId ? `/admin/events/runs/${entry.runId}` : `/admin/events/${entry.definitionId}`
+  return (
+    <Link
+      to={to}
+      className="sans"
+      title={`${entry.title} — ${localTime(entry.scheduledFor, entry.timezone)} ${entry.timezone}${projected ? ' (forecast)' : ` — ${runStatusWord(entry.status)}`}`}
+      style={{
+        display: 'block',
+        fontSize: '0.7rem',
+        padding: '1px 4px',
+        marginBottom: 2,
+        borderRadius: 3,
+        borderLeft: `2px ${projected ? 'dashed' : 'solid'} ${STATUS_COLOR[entry.status] || 'var(--accent, #8fc79a)'}`,
+        background: projected ? 'transparent' : 'rgba(255,255,255,0.05)',
+        opacity: projected ? 0.7 : 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        textDecoration: 'none',
+      }}>
+      <span className="dim">{localTime(entry.scheduledFor, entry.timezone)}</span> {entry.title}
+      {entry.waitingSteps > 0 && <span style={{ color: '#d9c184' }}> ●</span>}
+    </Link>
+  )
+}