feat(moments): the human door onto mounts, mappings and per-moment telemetry (milestone 458 step 6, #4924)

Everything an agent can do with moments, a person can now see and change
in the app.

- Rule editor: a moment picker beside the trigger. Catalog moments are
  ticked; a named procedure's `skill.<name>` is typed and checked as the
  server checks it. `moments` is always sent, so unticking the last moment
  unmounts the rule.
- Settings, Moments section (General tab): for each moment, what it
  means, the actions that reach it on this install (shipped ones can be
  switched off, the install's own removed), how many rules are mounted on
  it, and deliveries and agent opens over the window. Below that: named
  procedures with mounts, switched-off defaults with Restore, and a form to
  add an action.
- retrieval_telemetry.moment_usage: per moment, `delivered`, `rules`,
  `opened` (agent pulls after the first delivery there; an upper bound, as
  by_source is) and `last_delivered_at`. No ratio, because a mount is a
  person's statement, not a ranker's guess. Guarded on its own, and also
  reported in retrieval_summary as `moment_usage`.
- rulebooks.mount_counts; mounted_moments now derives from it.
- GET /api/retrieval/moments carries `mounted` and `usage` (?days=).
  DELETE /moments/mappings also reads the mapping from query parameters,
  since the browser's DELETE sends no body.

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

frontend/src/components/rules/RuleEditorSlideOver.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch, onMounted } from "vue";
 import { useRulebooksStore } from "@/stores/rulebooks";
 import { useCanonicalSystemsStore } from "@/stores/canonicalSystems";
+import { useMomentsStore } from "@/stores/moments";
 import RuleHistoryPanel from "@/components/rules/RuleHistoryPanel.vue";
 import RuleHomePicker from "@/components/rules/RuleHomePicker.vue";
 import type { Rule, RuleKind } from "@/api/rulebooks";
@@ -11,6 +12,7 @@ const emit = defineEmits<{ close: [] }>();
 
 const store = useRulebooksStore();
 const canon = useCanonicalSystemsStore();
+const momentsStore = useMomentsStore();
 const title = ref("");
 const statement = ref("");
 const whenToApply = ref("");
@@ -20,6 +22,18 @@ const whenToApply = ref("");
 // session may quietly rewrite.
 const kind = ref<RuleKind>("rule");
 const systemIds = ref<number[]>([]);
+// The moments this rule is mounted on (milestone 458). Catalog moments are
+// ticked; a named procedure's moment (`skill.<name>`) is typed, since its
+// name is the procedure's own and no list here could know it.
+const ruleMoments = ref<string[]>([]);
+const procedureDraft = ref("");
+const procedureError = ref("");
+const SKILL_PREFIX = "skill.";
+const SKILL_NAME = /^[a-z0-9][a-z0-9_:-]*$/;
+const momentCatalog = computed(() => momentsStore.data?.moments ?? []);
+const procedureMoments = computed(() =>
+  ruleMoments.value.filter((m) => m.startsWith(SKILL_PREFIX)),
+);
 const why = ref("");
 const howToApply = ref("");
 const verifyWith = ref("");
@@ -46,6 +60,26 @@ function relationLabel(kind: string, direction: "outgoing" | "incoming") {
   return RELATION_LABEL[kind]?.[direction] ?? kind;
 }
 
+function toggleMoment(name: string) {
+  const at = ruleMoments.value.indexOf(name);
+  if (at >= 0) ruleMoments.value.splice(at, 1);
+  else ruleMoments.value.push(name);
+}
+
+// The same check the server makes (services/moments.is_moment), so a typo is
+// caught at the field rather than as a failed save.
+function addProcedureMoment() {
+  const raw = procedureDraft.value.trim().toLowerCase();
+  const name = raw.startsWith(SKILL_PREFIX) ? raw : SKILL_PREFIX + raw;
+  if (!SKILL_NAME.test(name.slice(SKILL_PREFIX.length))) {
+    procedureError.value = "A procedure name is lowercase letters, digits, - _ and :, with no spaces.";
+    return;
+  }
+  procedureError.value = "";
+  if (!ruleMoments.value.includes(name)) ruleMoments.value.push(name);
+  procedureDraft.value = "";
+}
+
 function toggleSystem(id: number) {
   const at = systemIds.value.indexOf(id);
   if (at >= 0) systemIds.value.splice(at, 1);
@@ -85,6 +119,7 @@ async function load() {
       whenToApply.value = r.when_to_apply || "";
       kind.value = r.kind;
       systemIds.value = (r.systems ?? []).map((sys) => sys.id);
+      ruleMoments.value = [...(r.moments ?? [])];
       why.value = r.why || "";
       howToApply.value = r.how_to_apply || "";
       verifyWith.value = r.verify_with || "";
@@ -96,12 +131,15 @@ async function load() {
     whenToApply.value = "";
     kind.value = "rule";
     systemIds.value = [];
+    ruleMoments.value = [];
     why.value = "";
     howToApply.value = "";
     verifyWith.value = "";
     expiresWhen.value = "";
   }
-  await canon.fetchCatalog();
+  procedureDraft.value = "";
+  procedureError.value = "";
+  await Promise.all([canon.fetchCatalog(), momentsStore.fetch()]);
 }
 
 async function save() {
@@ -117,6 +155,9 @@ async function save() {
     // Always sent, so clearing the last area actually clears it — the server
     // reads a list as "these ARE the areas now".
     system_ids: systemIds.value,
+    // Always sent, for system_ids' reason: the server reads the list as the
+    // whole set, so unticking the last moment actually unmounts the rule.
+    moments: ruleMoments.value,
     why: why.value,
     how_to_apply: howToApply.value,
     // Always sent, including empty. The REST door maps "" to NULL, so
@@ -210,6 +251,54 @@ watch(() => props.ruleId, load);
         its trigger, so an empty trigger leaves the rule findable by nobody.
       </p>
 
+      <fieldset v-if="momentCatalog.length" class="moments">
+        <legend>Moments it arrives at</legend>
+        <p class="field-note intro">
+          Whenever one of these happens, this rule is delivered — whatever the
+          words of the work look like. Use it for a rule about <em>when</em>
+          something is done rather than what it is about: a rule on when work
+          counts as finished belongs where work is finished and reported, and
+          nothing said there needs to resemble it.
+        </p>
+        <label v-for="m in momentCatalog" :key="m.name" class="area-opt">
+          <input
+            type="checkbox"
+            :checked="ruleMoments.includes(m.name)"
+            @change="toggleMoment(m.name)"
+          />
+          <span>
+            <code class="moment-name">{{ m.name }}</code>
+            <span class="moment-means">{{ m.means }}</span>
+          </span>
+        </label>
+        <div v-if="procedureMoments.length" class="procedure-moments">
+          <span v-for="m in procedureMoments" :key="m" class="rule-chip procedure-chip">
+            <code>{{ m }}</code>
+            <button
+              type="button"
+              class="chip-remove"
+              :aria-label="`Unmount from ${m}`"
+              @click="toggleMoment(m)"
+            >×</button>
+          </span>
+        </div>
+        <div class="procedure-add">
+          <input
+            v-model="procedureDraft"
+            aria-label="A named procedure this rule arrives with"
+            placeholder="skill.release-notes — when a named procedure is loaded"
+            @keydown.enter.prevent="addProcedureMoment"
+          />
+          <button
+            type="button"
+            class="btn-secondary btn-sm"
+            :disabled="!procedureDraft.trim()"
+            @click="addProcedureMoment"
+          >Add</button>
+        </div>
+        <p v-if="procedureError" class="trigger-warning">{{ procedureError }}</p>
+      </fieldset>
+
       <fieldset v-if="canon.catalog.length" class="areas">
         <legend>Areas this rule is about</legend>
         <label v-for="entry in canon.catalog" :key="entry.id" class="area-opt">
@@ -370,6 +459,17 @@ legend { padding: 0 0.35rem; font-size: 0.8rem; color: var(--fs-text-tertiary);
 .area-opt { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
 .area-opt input { width: auto; margin-top: 0.2rem; accent-color: var(--fs-accent); }
 .trigger-missing textarea { border-color: var(--fs-warning); }
+/* The moment picker (milestone 458): the name is what a session reads in a
+   delivered line, so it is shown as written; the meaning is the gloss. */
+.moments { margin-bottom: 1rem; }
+.moments .intro { margin-top: 0; margin-bottom: var(--fs-space-3); }
+.moments .moment-name { font-size: var(--fs-size-tiny); }
+.moment-means { display: block; font-size: var(--fs-size-tiny); color: var(--fs-text-tertiary); line-height: var(--fs-leading-body); }
+.procedure-moments { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); margin: var(--fs-space-2) 0; }
+.procedure-chip { display: inline-flex; align-items: center; gap: var(--fs-space-1); }
+.procedure-add { display: flex; gap: var(--fs-space-2); align-items: center; margin-top: var(--fs-space-2); }
+.procedure-add input { margin-top: 0; }
+.procedure-add .btn-sm { flex: none; }
 /* --fs-warning-fg, not --fs-warning: the token set draws the distinction
    between the warning HUE and warning text, and this is text. */
 .trigger-warning {
@@ -422,3 +522,4 @@ legend { padding: 0 0.35rem; font-size: 0.8rem; color: var(--fs-text-tertiary);
      panes already use, loaded here because the slide-over can open with no
      pane that loads it (a link straight to ?rule=N). -->
 <style src="@/assets/rules-shared.css" />
+<style src="@/assets/moments-shared.css" />