Start a run now

setRehearsal(e.target.checked)} /> Rehearsal.{' '} A real run — every world change actually happens — with its announcements ceilinged to staff, so no player is told. This is not the dry run.

Scope (optional) setScope(e.target.value)} /> Passed to the module verbatim. Core never parses it. Run params (optional)

setParamsText(e.target.value)} />
          <span className="sans dim" style={{ fontSize: '0.74rem' }}>
            What the concurrency key’s <code>{'{placeholders}'}</code> are filled from.
          </span>
        </label>
      </div>

{problem && (
        <p className="sans" style={{ fontSize: '0.8rem', color: '#d98b84', margin: '10px 0 0' }}>{problem}</p>
      )}

<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy} onClick={go}>
          Start it
        </button>
        <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy} onClick={onCancel}>
          Cancel
        </button>
      </div>
    </div>
  )
}

const DORMANT_NOTE =
  'The module that registered this action is not installed. The step is kept exactly as authored — nothing was dropped — but the definition cannot be published until it is resolved.'

export default function EventEditor() {
  const { id } = useParams()
  const navigate = useNavigate()
  const { user } = useAuth()
  const isNew = id === 'new'

const [form, setForm] = useState(null)
  const [event, setEvent] = useState(null)
  const [catalog, setCatalog] = useState(null)
  const [series, setSeries] = useState([])
  const [versions, setVersions] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [problems, setProblems] = useState([])
  const [notice, setNotice] = useState(null)
  const [busy, setBusy] = useState(false)
  // The dry run's answer (Phase 6). Cleared on every save and every publish,
  // because a report is a statement about a spec and both of those change it —
  // a stale green report beside an edited plan is worse than no report.
  const [report, setReport] = useState(null)
  // Phase 13. The meter's answer, and whether the plan has moved since it was
  // asked — `stale` is what stops the number reading as current while a request
  // is in flight, which on a debounce it very often is not.
  const [priced, setPriced] = useState(null)
  const [priceStale, setPriceStale] = useState(false)
  // The start dialog is open. Not a modal: this screen is long, and a dialog
  // that covers the plan hides the thing being started.
  const [starting, setStarting] = useState(false)

const isAdmin = user?.role === 'admin'
  // Reads here are staff-wide (§K), so a moderator reaches this screen legitimately
  // — the run console is their whole job and a definition is what a run is OF. But
  // authoring is `admin` + `editor`, so Save has to follow the route it calls.
  // Offering it and letting the server answer 403 is the shape §K calls "a gate
  // nobody notices was missing", only inverted: a button that does nothing.
  const mayAuthor = isAdmin || user?.role === 'editor'

const load = useCallback(async () => {
    const [cat, ser] = await Promise.all([api.admin.eventCatalog(), api.admin.eventSeries()])
    setCatalog(cat)
    setSeries(ser.series || [])
    if (isNew) {
      setEvent(null)
      setVersions([])
      setForm(formFromDefinition({ spec: { schedule: { kind: 'manual' }, phases: [] } }))
      return
    }
    const [{ event: loaded }, { versions: history }] = await Promise.all([
      api.admin.getEvent(id),
      api.admin.listEventVersions(id),
    ])
    setEvent(loaded)
    setVersions(history || [])
    setForm(formFromDefinition(loaded))
  }, [id, isNew])

useEffect(() => {
    let alive = true
    ;(async () => {
      setLoading(true)
      try {
        await load()
        if (alive) setError(null)
      } catch (err) {
        if (alive) setError(err.message)
      } finally {
        if (alive) setLoading(false)
      }
    })()
    return () => {
      alive = false
    }
  }, [load])

const actions = useMemo(() => catalog?.actions || [], [catalog])
  const actionById = useMemo(() => new Map(actions.map((a) => [a.id, a])), [actions])
  // Phase 5. Served with the actions on the same route, so an EDITOR sees the
  // same catalog an admin does — `/admin/engagement/triggers` is admin-only, and
  // an editor writing a trigger id from memory into a field the save path then
  // refuses is the failure this avoids.
  const triggers = useMemo(() => catalog?.triggers || [], [catalog])
  const triggerById = useMemo(() => new Map(triggers.map((t) => [t.id, t])), [triggers])

// Phase 7. source id -> { state: 'loading' | 'ok' | 'failed', options, reason }.
  //
  // Resolved LAZILY, one request per source, and only for the sources the steps
  // on this page actually name. A definition uses two or three of them; a
  // deployment with a game module installed may register a dozen, and asking a
  // shard for eight hundred creature names to draw a form that needs none of
  // them is a page that opens slowly for no one's benefit.
  const [sources, setSources] = useState({})

// **The guard is a ref, and it has to be.** `setSources` QUEUES its updater
  // rather than running it, so a "have I already asked for this?" check written
  // inside the updater cannot be read on the next line — it has not run yet. The
  // first draft did exactly that and the field sat on *Reading the list…* for
  // ever, having never made the request at all: state is the wrong tool for a
  // question that must be answered synchronously, at the call.
  const requested = useRef(new Set())
  const loadSource = useCallback(async (sourceId) => {
    if (requested.current.has(sourceId)) return
    requested.current.add(sourceId)
    setSources((s) => ({ ...s, [sourceId]: { state: 'loading', options: [] } }))
    try {
      const answer = await api.admin.eventOptions(sourceId)
      setSources((s) => ({
        ...s,
        [sourceId]: answer?.ok
          // `searchable` is the SOURCE's answer about itself (Phase 12b), not a
          // guess from how long the list came back. A source bounded at 2,000
          // that happens to have 40 entries on this deployment is still the one
          // that has to be searched on the shard where it has 6,707.
          ? {
            state: 'ok',
            label: answer.label,
            searchable: Boolean(answer.searchable),
            options: answer.options || [],
          }
          : { state: 'failed', options: [], reason: answer?.reason || 'this list could not be read' },
      }))
    } catch (err) {
      // The route answers a refusal with a 200, so reaching here means the
      // REQUEST failed rather than the source — and the field's behaviour is the
      // same either way: it degrades to free text and says why.
      setSources((s) => ({
        ...s,
        [sourceId]: { state: 'failed', options: [], reason: err.message || 'this list could not be read' },
      }))
    }
  }, [])

// Phase 7. Every option source the steps on this page name, resolved once.
  //
  // An effect rather than a lookup at render time, because resolving one is a
  // request and a request started during render is a render with a side effect.
  // `sources` is deliberately NOT a dependency: `loadSource` keeps its own ref of
  // what it has already asked for, so re-running this on every answer would be a
  // pass over the same set, changing nothing.
  useEffect(() => {
    const wanted = new Set()
    for (const phase of form?.phases || []) {
      for (const step of phase.steps || []) {
        for (const p of actionById.get(step.actionId)?.params || []) {
          if (p.source) wanted.add(p.source)
        }
      }
    }
    for (const id of wanted) loadSource(id)
  }, [form, actionById, loadSource])

/**
   * The live cap meter (§I, Phase 13).
   *
   * **A debounce and a generation counter, and the counter is not optional.**
   * Requests started 400ms apart do not necessarily answer in that order, and an
   * older answer landing last would leave the meter showing the cost of a plan
   * the author has already changed — stale in the one direction that matters,
   * silently, with nothing on the screen to say so.
   *
   * A failure leaves the LAST answer standing rather than blanking the meter or
   * raising an error box: this is an aid to authoring, and the plan is still
   * saveable, dry-runnable and publishable without it. The staleness marker is
   * how the screen stays honest about it.
   */
  const priceGeneration = useRef(0)
  useEffect(() => {
    if (!form || !worthPricing(form)) {
      setPriced(null)
      setPriceStale(false)
      return undefined
    }
    setPriceStale(true)
    const generation = ++priceGeneration.current
    const timer = setTimeout(async () => {
      try {
        const answer = await api.admin.priceEvent(priceBodyFrom(form))
        if (priceGeneration.current !== generation) return
        setPriced(answer)
        setPriceStale(false)
      } catch {
        if (priceGeneration.current !== generation) return
        // Left stale on purpose: a number the screen cannot vouch for is shown
        // dimmed rather than replaced by nothing.
        setPriceStale(true)
      }
    }, 400)
    return () => clearTimeout(timer)
  }, [form])

/** The meter's per-phase rollup, by ordinal, for the timeline. */
  const drawByPhase = useMemo(
    () => new Map((priced?.phases || []).map((p) => [p.phase, p.draw])),
    [priced],
  )
  const budgets = useMemo(() => catalog?.budgets || [], [catalog])

const set = (patch) => setForm((f) => ({ ...f, ...patch }))

const setPhase = (pi, patch) =>
    setForm((f) => ({
      ...f,
      phases: f.phases.map((p, i) => (i === pi ? { ...p, ...patch } : p)),
    }))

const setStep = (pi, si, patch) =>
    setForm((f) => ({
      ...f,
      phases: f.phases.map((p, i) =>
        i === pi ? { ...p, steps: p.steps.map((s, j) => (j === si ? { ...s, ...patch } : s)) } : p,
      ),
    }))

const movePhase = (pi, delta) =>
    setForm((f) => {
      const next = [...f.phases]
      const to = pi + delta
      if (to < 0 || to >= next.length) return f
      ;[next[pi], next[to]] = [next[to], next[pi]]
      return { ...f, phases: next }
    })

const moveStep = (pi, si, delta) =>
    setForm((f) => ({
      ...f,
      phases: f.phases.map((p, i) => {
        if (i !== pi) return p
        const steps = [...p.steps]
        const to = si + delta
        if (to < 0 || to >= steps.length) return p
        ;[steps[si], steps[to]] = [steps[to], steps[si]]
        return { ...p, steps }
      }),
    }))

/**
   * Changing a step's action REPLACES its params with the new action's examples.
   *
   * The alternative — keeping what was typed — leaves an object whose keys belong
   * to a different action, and the save refuses it with "x is not a param of y"
   * for every one of them. Replacing is the honest move and it is not
   * destructive in any way an author minds: they have just said this step does
   * something else.
   */
  const changeAction = (pi, si, actionId) => {
    const action = actionById.get(actionId)
    const fresh = blankStep(action)
    setStep(pi, si, { actionId, label: fresh.label, paramsText: fresh.paramsText, onFailure: '' })
  }

const save = async () => {
    setBusy(true)
    setProblems([])
    setNotice(null)
    // A report describes a spec, and saving changes it. A green report left
    // standing beside an edited plan is worse than no report at all.
    setReport(null)
    // The declared variable types, so the builder's literals are coerced to
    // them before the request rather than compared as strings by a server that
    // will rightly refuse them.
    const built = payloadFromForm(form, { triggersById: triggerById })
    if (!built.ok) {
      setProblems(built.errors)
      setBusy(false)
      return
    }
    try {
      if (isNew) {
        const result = await api.admin.createEvent(built.payload)
        navigate(`/admin/events/${result.event.id}`, { replace: true })
      } else {
        const result = await api.admin.updateEvent(id, built.payload)
        setEvent(result.event)
        setForm(formFromDefinition(result.event))
        setNotice('Saved.')
      }
    } catch (err) {
      // The server answers with every problem rather than the first, so an author
      // fixing a spec does it in one pass rather than six round trips.
      setProblems(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

const publish = async () => {
    setBusy(true)
    setProblems([])
    setNotice(null)
    setReport(null)
    try {
      const result = await api.admin.publishEvent(id)
      setEvent(result.event)
      setVersions(await api.admin.listEventVersions(id).then((r) => r.versions || []))
      // 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 {
      setBusy(false)
    }
  }

/**
   * The dry run (Phase 6).
   *
   * `admin, editor` — it dispatches nothing. What it verifies follows the
   * definition's state, and the server says which: a `ready` definition is
   * checked against its PUBLISHED version, because that is the only thing that
   * ever actually runs and it is that pass §K's gate is about; a draft is checked
   * against the working spec the author is still holding.
   *
   * Findings arrive with a 200 — the request succeeded, the plan has problems —
   * so they are rendered rather than thrown into the error box.
   */
  const verify = async () => {
    setBusy(true)
    setProblems([])
    setNotice(null)
    setReport(null)
    try {
      const result = await api.admin.verifyEvent(id)
      setReport(result)
      if (result.recorded) setEvent(await api.admin.getEvent(id).then((r) => r.event))
    } catch (err) {
      setProblems(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

/**
   * Start a run, with what the dialog collected (Phase 13).
   *
   * The route has taken `rehearsal`, `scope` and `params` since Phase 10 and this
   * screen sent `{}` — so rehearsal, the affordance §I asks for by name, was
   * unreachable, and an event whose concurrency key names a `{placeholder}` could
   * not be started correctly at all: every manual run rendered the same key and
   * the second was refused as an overlap with the first.
   */
  const start = async (body) => {
    setBusy(true)
    setProblems([])
    try {
      const result = await api.admin.startEventRun(id, body)
      navigate(`/admin/events/runs/${result.run.id}`)
    } catch (err) {
      setProblems(err.body?.errors || [err.message])
      setStarting(false)
    } finally {
      setBusy(false)
    }
  }

// **The error is checked BEFORE the form.** `!form` is true for every failed
  // load, so testing it first put the error state permanently behind a spinner:
  // the screen that could not load said "Loading…" for ever and named nothing.
  if (error) return <ErrorState message={error} />
  if (loading || !form) return <Loading />

const archived = event?.state === 'archived'

return (
    <section>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap', marginBottom: 14 }}>
        <div>
          <h2 className="sans" style={{ margin: 0, fontSize: '1.05rem' }}>
            {isNew ? 'New event' : event?.title}
          </h2>
          <p className="sans dim" style={{ margin: '4px 0 0', fontSize: '0.8rem' }}>
            {isNew ? (
              'The slug is derived from the title once and frozen afterwards — the public event page lives at it.'
            ) : (
              <>
                {event?.slug} · {event?.state}
                {event?.currentVersion ? ` · published v${event.currentVersion}` : ' · never published'}
              </>
            )}
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {mayAuthor && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={save}>
              {isNew ? 'Create draft' : 'Save'}
            </button>
          )}
          {/* The dry run is admin+editor, deliberately wider than publish: an
              author should be able to find out what their event would cost
              before asking an admin to commit the deployment to it. */}
          {!isNew && mayAuthor && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={verify}>
              Dry run
            </button>
          )}
          {/* Publish and start are admin ONLY (§N2) and not the same gate as the
              live controls: publishing commits a definition a schedule will later
              start unattended. */}
          {!isNew && isAdmin && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={publish}>
              Publish
            </button>
          )}
          {!isNew && isAdmin && event?.state === 'ready' && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy}
              onClick={() => setStarting((s) => !s)}>
              Start now
            </button>
          )}
        </div>
      </div>

{!mayAuthor && (
        <p className="sans dim" style={{ fontSize: '0.82rem' }}>
          You can read this definition and watch its runs. Editing and publishing an event are an
          admin or editor's, and starting one is an admin's alone — live control of a run already in
          flight is yours.
        </p>
      )}

{archived && (
        <p className="sans" style={{ fontSize: '0.84rem', color: '#d9c184' }}>
          This definition is archived. It is kept so its past runs can still be explained, and it
          cannot be edited or run again.
        </p>
      )}

{/* ── §K's gate, said where it can still be acted on ──
          A published version that nobody has dry-run will not start on its
          schedule. The alternative to saying so here is an operator finding out
          on the Friday it did not run, so it is a banner rather than a log line —
          and only for a definition that actually HAS a schedule to be held. */}
      {!isNew && event?.state === 'ready' && !event?.currentVersionVerifiedAt && !archived && (
        <div className="panel-flat" style={{ padding: '10px 14px', marginBottom: 14, borderLeft: '3px solid #d9c184' }}>
          <p className="sans" style={{ margin: 0, fontSize: '0.84rem' }}>
            <strong>This version has not been dry-run.</strong> Scheduled occurrences are held until it
            is — an event that starts while nobody is watching gets one review, and this is it.
            Starting it by hand is unaffected.
          </p>
        </div>
      )}

{report && (
        <div
          className="panel-flat"
          style={{
            padding: '10px 14px',
            marginBottom: 14,
            borderLeft: `3px solid ${report.report.ok ? '#8fc79a' : '#d98b84'}`,
          }}
        >
          <p className="sans" style={{ margin: '0 0 6px', fontSize: '0.84rem' }}>
            <strong>
              {report.report.ok ? 'Dry run passed' : 'Dry run found problems'}
            </strong>{' '}
            <span className="dim">
              · {report.report.steps} step{report.report.steps === 1 ? '' : 's'} checked against{' '}
              {/* Which spec was checked. The two answer different questions, and a
                  report that did not say would be read as the other one. */}
              {report.target === 'version' ? `published v${report.version}` : 'the working draft'}
              {report.recorded && ' · recorded, so scheduled occurrences may now start'}
            </span>
          </p>

{report.report.findings.length > 0 && (
            <ul className="sans" style={{ margin: '0 0 6px', paddingLeft: 18, fontSize: '0.82rem' }}>
              {report.report.findings.map((f, i) => (
                <li key={`${f.phase}-${f.seq}-${f.code}-${i}`} style={{ color: f.level === 'warning' ? '#d9c184' : undefined }}>
                  {f.phase !== null && (
                    <code className="dim" style={{ fontSize: '0.78rem' }}>
                      {f.phase} · step {f.seq + 1}
                      {f.actionId ? ` · ${f.actionId}` : ''}
                    </code>
                  )}
                  {f.phase !== null && ' — '}
                  {f.message}
                </li>
              ))}
            </ul>
          )}

{/* The whole-plan cost, which is the finding no other path can make: a
              step that fits on its own and does not fit alongside its siblings. */}
          {report.report.cost.length > 0 && (
            <table className="sans" style={{ fontSize: '0.8rem', borderCollapse: 'collapse' }}>
              <tbody>
                {report.report.cost.map((c) => (
                  <tr key={c.dimension} style={{ color: c.over ? '#d98b84' : undefined }}>
                    <td style={{ paddingRight: 12 }}><code style={{ fontSize: '0.78rem' }}>{c.dimension}</code></td>
                    <td style={{ paddingRight: 12 }}>{c.total}</td>
                    <td className="dim">
                      {c.cap === null ? 'no cap' : `of ${c.cap} per run${c.from ? ` (${c.from})` : ''}`}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

{report.report.findings.length === 0 && report.report.cost.length === 0 && (
            <p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>
              Nothing this event does costs a capped resource.
            </p>
          )}
        </div>
      )}

{starting && (
        <StartDialog busy={busy} onCancel={() => setStarting(false)} onStart={start} />
      )}

{notice && <p className="sans" style={{ fontSize: '0.84rem', color: '#8fc79a' }}>{notice}</p>}

{problems.length > 0 && (
        <div className="panel-flat" style={{ padding: '10px 14px', marginBottom: 14, borderLeft: '3px solid #d98b84' }}>
          <p className="sans" style={{ margin: '0 0 6px', fontSize: '0.84rem' }}>That did not save:</p>
          <ul className="sans" style={{ margin: 0, paddingLeft: 18, fontSize: '0.82rem' }}>
            {problems.map((p) => <li key={p}>{p}</li>)}
          </ul>
        </div>
      )}

{/* ── Basics ── */}
      <div className="panel-flat" style={{ padding: 14, marginBottom: 14 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 12 }}>
          <label>
            <span className="field-label">Title</span>
            <input className="input" value={form.title} onChange={(e) => set({ title: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Series</span>
            <select className="select" value={form.seriesId} onChange={(e) => set({ seriesId: e.target.value })}>
              <option value="">Not part of a series</option>
              {series.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </label>
          <label>
            <span className="field-label">Timezone</span>
            <input className="input" value={form.timezone} onChange={(e) => set({ timezone: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Grace window (seconds)</span>
            <input className="input" type="number" min="0" value={form.graceSeconds}
              onChange={(e) => set({ graceSeconds: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Concurrency key</span>
            <input className="input" value={form.concurrencyKey} placeholder="invasion:{region}"
              onChange={(e) => set({ concurrencyKey: e.target.value })} />
          </label>
        </div>
        <label style={{ display: 'block', marginTop: 12 }}>
          <span className="field-label">Summary</span>
          <input className="input" value={form.summary} onChange={(e) => set({ summary: e.target.value })} />
        </label>
        <label style={{ display: 'block', marginTop: 12 }}>
          <span className="field-label">Storyline</span>
          <textarea className="input" rows={4} value={form.body} onChange={(e) => set({ body: e.target.value })} />
        </label>
        {/* Announcement, not permission. Publishing is what makes an event
            RUNNABLE, so without this switch a surprise invasion would have to be
            advertised a fortnight in advance in order to be allowed to happen. */}
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
          <input
            type="checkbox"
            checked={Boolean(form.listed)}
            onChange={(e) => set({ listed: e.target.checked })}
          />
          <span className="field-label" style={{ margin: 0 }}>Show on the public calendar</span>
        </label>
        <p className="sans dim" style={{ fontSize: '0.78rem', margin: '10px 0 0' }}>
          The grace window is how late this event may still start: past it an occurrence becomes
          <em> missed</em> rather than beginning hours after it was announced. Two runs sharing a
          concurrency key never overlap — <code>{'{placeholders}'}</code> are filled from the run’s own
          params. An event that is <em>not</em> shown publicly still schedules, still runs and is
          still on this calendar — it is simply not announced, and its lifecycle mails carry no
          link because there is no page to link to.
        </p>
      </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 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’s own, in <code>{form.timezone}</code> — not the reader’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>

{/* ── The live cap meter (Phase 13) ──
          Above the timeline rather than under it, because what a plan draws is a
          fact about the whole plan and an author scrolling twelve steps to find
          out they are over is an author who finds out too late. */}
      <CapMeter report={priced} budgets={budgets} stale={priceStale} />

{/* ── The phase timeline ── */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <h3 className="sans" style={{ margin: 0, fontSize: '0.95rem' }}>Phases</h3>
        <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={archived}
          onClick={() => set({ phases: [...form.phases, blankPhase(form.phases)] })}>
          Add phase
        </button>
      </div>

{form.phases.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.85rem' }}>
          No phases yet. An event needs at least one phase with at least one step before it can be
          published.
        </p>
      )}

{form.phases.map((phase, pi) => (
        <div key={pi} className="panel-flat" style={{ padding: 14, marginBottom: 12, borderLeft: '3px solid var(--accent, #6d7f9c)' }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <label style={{ flex: '1 1 200px' }}>
              <span className="field-label">Phase {pi + 1} — label</span>
              <input className="input" value={phase.label} onChange={(e) => setPhase(pi, { label: e.target.value })} />
            </label>
            <label style={{ flex: '0 1 180px' }}>
              <span className="field-label">Key</span>
              <input className="input" value={phase.key} onChange={(e) => setPhase(pi, { key: e.target.value })} />
            </label>
            <div style={{ display: 'flex', gap: 6 }}>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={pi === 0} onClick={() => movePhase(pi, -1)}>↑</button>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={pi === form.phases.length - 1} onClick={() => movePhase(pi, 1)}>↓</button>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }}
                onClick={() => set({ phases: form.phases.filter((_, i) => i !== pi) })}>Remove</button>
            </div>
          </div>
          <p className="sans dim" style={{ fontSize: '0.76rem', margin: '8px 0 0' }}>
            The key is what the run console groups by and what “phase 3 has not started” names, so it
            cannot change once runs exist.
          </p>

{/* §I asks the timeline for "phases in order, each with its steps, its
              advance condition, its cap draw and its failure policy". This is
              the cap draw, and it is the phase's own rather than a share of the
              total: an author moving a step between phases is asking exactly
              this question. */}
          {(drawByPhase.get(pi) || []).length > 0 && (
            <p className="sans dim" style={{ fontSize: '0.76rem', margin: '4px 0 0' }}>
              Draws{' '}
              {(drawByPhase.get(pi) || [])
                .map((d) => `${d.total} ${budgets.find((b) => b.id === d.dimension)?.label || d.dimension}`)
                .join(' · ')}
            </p>
          )}

{/* ── The advance condition (Phase 5) ──
              A gate is an ADDITIONAL condition and never a replacement, which is
              what the caption has to say: a phase whose steps are still running
              is not advanced by a boss that spawned early. */}
          <div style={{ marginTop: 12, borderTop: '1px solid var(--rule, #2a2f3a)', paddingTop: 12 }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <label style={{ flex: '1 1 240px' }}>
                <span className="field-label">This phase advances</span>
                <select className="input" value={phase.advance?.kind || ''}
                  onChange={(e) => setPhase(pi, { advance: { ...(phase.advance || blankAdvance()), kind: e.target.value } })}>
                  {ADVANCE_KINDS.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
                </select>
              </label>
              {phase.advance?.kind === 'after' && (
                <label style={{ flex: '0 1 160px' }}>
                  <span className="field-label">Delay</span>
                  <input className="input" value={phase.advance.after}
                    onChange={(e) => setPhase(pi, { advance: { ...phase.advance, after: e.target.value } })}
                    placeholder="30m" />
                </label>
              )}
              {phase.advance?.kind === 'on' && (
                <>
                  <label style={{ flex: '1 1 240px' }}>
                    <span className="field-label">Trigger</span>
                    {/* Changing the trigger CLEARS the predicate, for the same
                        reason changing a step's action replaces its params:
                        every clause names a variable of the old trigger, and the
                        save would refuse each of them by name. Keeping them
                        would look like tolerance and behave like a form that
                        cannot be saved. */}
                    <select className="input" value={phase.advance.on}
                      onChange={(e) => setPhase(pi, {
                        advance: { ...phase.advance, on: e.target.value, ...blankWhere() },
                      })}>
                      <option value="">Choose a trigger…</option>
                      {triggers.map((t) => <option key={t.id} value={t.id}>{t.label} — {t.id}</option>)}
                    </select>
                  </label>
                  <label style={{ flex: '0 1 110px' }}>
                    <span className="field-label">How many</span>
                    <input className="input" type="number" min="1" value={phase.advance.count}
                      onChange={(e) => setPhase(pi, { advance: { ...phase.advance, count: e.target.value } })} />
                  </label>
                </>
              )}
            </div>

{phase.advance?.kind === 'on' && (
              <WhereBuilder
                advance={phase.advance}
                trigger={triggerById.get(phase.advance.on)}
                operators={catalog?.operators || []}
                disabled={archived}
                onChange={(patch) => setPhase(pi, { advance: { ...phase.advance, ...patch } })}
              />
            )}

<p className="sans dim" style={{ fontSize: '0.76rem', margin: '8px 0 0' }}>
              {phase.advance?.kind
                ? 'This is in ADDITION to its steps: the phase waits until every step has finished AND this is met. Nothing times out — if the condition never happens, the run is marked stalled and a person advances it from the run console.'
                : 'The phase advances the moment every one of its steps is finished.'}
            </p>
          </div>

<div style={{ marginTop: 12 }}>
            {phase.steps.map((step, si) => {
              const action = actionById.get(step.actionId)
              // Phase 13. Which editor this step gets, and — when it is not the
              // author's choice — why.
              const mode = paramsMode(step, action)
              return (
                <div key={si} style={{ borderTop: '1px solid var(--rule, #2a2f3a)', paddingTop: 12, marginTop: 12 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
                    <label style={{ flex: '1 1 220px' }}>
                      <span className="field-label">Step {si + 1} — action</span>
                      <select className="select" value={step.actionId} onChange={(e) => changeAction(pi, si, e.target.value)}>
                        <option value="">Pick an action…</option>
                        {actions.map((a) => <option key={a.id} value={a.id}>{a.label} — {a.id}</option>)}
                        {/* A step whose module has been uninstalled keeps its
                            action id, so the select must be able to show a value
                            that is not in the catalog rather than silently
                            resetting the step to nothing. */}
                        {step.actionId && !action && <option value={step.actionId}>{step.actionId} (not installed)</option>}
                      </select>
                    </label>
                    <label style={{ flex: '0 1 200px' }}>
                      <span className="field-label">If it fails</span>
                      <select className="select" value={step.onFailure} onChange={(e) => setStep(pi, si, { onFailure: e.target.value })}>
                        <option value="">
                          Default{action ? ` — ${catalog?.onFailureByRisk?.[action.risk] || 'pause'}` : ''}
                        </option>
                        {(catalog?.onFailure || []).map((f) => <option key={f} value={f}>{f}</option>)}
                      </select>
                    </label>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={si === 0} onClick={() => moveStep(pi, si, -1)}>↑</button>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={si === phase.steps.length - 1} onClick={() => moveStep(pi, si, 1)}>↓</button>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }}
                        onClick={() => setPhase(pi, { steps: phase.steps.filter((_, j) => j !== si) })}>Remove</button>
                    </div>
                  </div>

{step.dormant && (
                    <p className="sans" style={{ fontSize: '0.78rem', color: '#d9c184', margin: '8px 0 0' }}>{DORMANT_NOTE}</p>
                  )}

{action && (
                    <p className="sans dim" style={{ fontSize: '0.78rem', margin: '8px 0 0' }}>
                      {action.description} <span style={{ opacity: 0.75 }}>· risk: {action.risk} · reversible: {action.reversible}</span>
                    </p>
                  )}

{/* ── The params (Phase 13) ──
                      A form of the action's own declaration, with the JSON box
                      kept as the escape hatch. A step the form cannot hold
                      without losing something opens in JSON and says why — the
                      condition builder's rule, and the same one, because
                      dropping an undeclared param and flattening a nested
                      condition are the same failure: a save that looks clean
                      and means something else. */}
                  <div style={{ marginTop: 10 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
                      <span className="field-label" style={{ marginBottom: 0 }}>Params</span>
                      {!mode.forced && action && (action.params || []).length > 0 && (
                        <button type="button" className="pill" style={{ fontSize: '0.7rem' }}
                          onClick={() => setStep(pi, si, {
                            paramsMode: mode.mode === PARAM_JSON ? PARAM_FORM : PARAM_JSON,
                          })}>
                          {mode.mode === PARAM_JSON ? 'Edit as a form' : 'Edit as JSON'}
                        </button>
                      )}
                    </div>

{mode.forced && (
                      <p className="sans" style={{ fontSize: '0.76rem', color: '#d9c184', margin: '6px 0 0' }}>
                        Opened as JSON: {mode.reason}. Nothing has been dropped — what is here is
                        exactly what was authored.
                      </p>
                    )}

{mode.mode === PARAM_FORM ? (
                      <div style={{ marginTop: 8 }}>
                        {(action?.params || []).map((p) => (
                          <ParamField
                            key={p.name}
                            param={p}
                            value={paramValue(step, p.name)}
                            sourceEntry={p.source ? sources[p.source] : null}
                            disabled={archived}
                            onChange={(raw) => setStep(pi, si, { paramsText: setParam(step, p.name, raw, p.type) })}
                          />
                        ))}
                        {action && (action.params || []).length === 0 && (
                          <p className="sans dim" style={{ fontSize: '0.78rem', margin: 0 }}>
                            This action takes no params.
                          </p>
                        )}
                        {!action && (
                          <p className="sans dim" style={{ fontSize: '0.78rem', margin: 0 }}>
                            Pick an action and its fields appear here, straight from what the module
                            declared.
                          </p>
                        )}
                      </div>
                    ) : (
                      <>
                        <textarea className="input" rows={Math.max(4, (step.paramsText || '').split('\n').length)}
                          style={{ fontFamily: 'var(--mono, monospace)', fontSize: '0.8rem', marginTop: 8 }}
                          value={step.paramsText} onChange={(e) => setStep(pi, si, { paramsText: e.target.value })} />
                        {action && (action.params || []).length > 0 && (
                          <span className="sans dim" style={{ fontSize: '0.74rem' }}>
                            <code>{action.id}</code> declares{' '}
                            {(action.params || []).map((p) => `${p.name} (${p.type}${p.required ? ', required' : ''})`).join(', ')}.
                          </span>
                        )}
                      </>
                    )}
                  </div>
                </div>
              )
            })}

<button type="button" className="pill" style={{ fontSize: '0.72rem', marginTop: 12 }} disabled={archived}
              onClick={() => setPhase(pi, { steps: [...phase.steps, blankStep(actions[0])] })}>
              Add step
            </button>
          </div>
        </div>
      ))}

{!isNew && versions.length > 0 && (
        <div className="panel-flat" style={{ padding: 14, marginTop: 14 }}>
          <h3 className="sans" style={{ margin: '0 0 6px', fontSize: '0.92rem' }}>Versions</h3>
          <p className="sans dim" style={{ margin: '0 0 8px', fontSize: '0.8rem' }}>
            Publishing snapshots the whole spec into a version nothing ever edits. Editing this
            definition while a run is live is free — <strong>the live run keeps the version it
            pinned</strong> and is unaffected by anything on this screen.
          </p>
          <table className="adm-table">
            <tbody>
              {versions.map((v) => (
                <tr key={v.id}>
                  <td className="adm-td" style={{ fontSize: '0.82rem' }}>v{v.version}{v.current && <span className="dim"> · current</span>}</td>
                  <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{new Date(v.publishedAt).toLocaleString()}</td>
                  <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{v.publishedByUsername || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  )
}

What this plan draws {stale && · recalculating…}

Start a run now