feat(ourmoji): username-based pairing invites

Replace the raw-user-id field on /ourmoji/experiments with an invite
flow. Inviter picks a partner from a dropdown of ourmoji-enabled users,
proposes dates, sends. Invitee accepts/declines in an Incoming
Invitations section; on accept the experiment run is created via the
existing service.

- New table `ourmoji_invites` (migration 0024).
- New service `app/server/services/ourmoji/invites.ts` with
  listOurmojiPartners, createInvite, listInvitesForViewer,
  acceptInvite, declineInvite, cancelInvite.
- New endpoints under /api/ourmoji/:
    GET  /partners
    GET  /invites
    POST /invites
    POST /invites/:id/accept
    POST /invites/:id/decline
    POST /invites/:id/cancel
- ExperimentRunManager.vue rewritten: partner <select>, incoming +
  outgoing invite sections, existing runs list preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: InfantLab

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.4] - 2026-04-21
+
+### Added
+
+- **Ourmoji pairing invites**: replaces the raw-user-id field on the experiments page with a username-based invite flow. The inviter picks a partner from a dropdown of ourmoji-enabled users, sets dates, and sends. The invitee sees the invite in an "Incoming invitations" section and accepts or declines. On accept, the experiment run is created automatically via the existing service.
+- New endpoints: `GET /api/ourmoji/partners`, `GET /api/ourmoji/invites`, `POST /api/ourmoji/invites`, and `POST /api/ourmoji/invites/:id/{accept,decline,cancel}`.
+- New `ourmoji_invites` table (migration `0024_ourmoji_invites.sql`).
+
 ## [0.6.3] - 2026-04-20
 
 ### Added

app/components/ourmoji/ExperimentRunManager.vue

@@ -2,71 +2,134 @@
 /**
  * ExperimentRunManager
  *
- * Minimal admin UI for Ourmoji experiment runs (US4).
- * Lists existing runs, lets the operator create a new one, and exposes
- * pause/resume controls. Statistics + assignment management land in
- * later phases.
+ * UI for pairing + running Ourmoji experiments. Invite flow: pick a
+ * partner by username, propose dates, send. The invitee sees the invite
+ * in the "Incoming invitations" section and accepts or declines. On
+ * accept, the underlying experiment run is created automatically.
  */
 
 import type { OurmojiExperimentRun } from "~/types/ourmoji";
 
-interface CreateForm {
+interface Partner {
+  id: string;
+  username: string;
+}
+
+interface Invite {
+  id: string;
+  fromUserId: string;
+  toUserId: string;
+  fromUsername: string;
+  toUsername: string;
+  name: string;
+  startDate: string;
+  endDate: string;
+  status: "pending" | "accepted" | "declined" | "cancelled";
+  runId: string | null;
+  createdAt: string;
+  respondedAt: string | null;
+}
+
+interface InviteForm {
+  toUserId: string;
   name: string;
   startDate: string;
   endDate: string;
-  participantUserIds: string; // comma-separated
 }
 
 const runs = ref<OurmojiExperimentRun[]>([]);
+const partners = ref<Partner[]>([]);
+const incoming = ref<Invite[]>([]);
+const outgoing = ref<Invite[]>([]);
 const loading = ref(false);
 const error = ref<string | null>(null);
 
-const form = reactive<CreateForm>({
+const form = reactive<InviteForm>({
+  toUserId: "",
   name: "",
   startDate: "",
   endDate: "",
-  participantUserIds: "",
 });
 
 async function refresh() {
   loading.value = true;
   error.value = null;
   try {
-    const res = await $fetch<{ runs: OurmojiExperimentRun[] }>(
-      "/api/ourmoji/experiments",
-    );
-    runs.value = res.runs;
+    const [runsRes, partnersRes, invitesRes] = await Promise.all([
+      $fetch<{ runs: OurmojiExperimentRun[] }>("/api/ourmoji/experiments"),
+      $fetch<{ partners: Partner[] }>("/api/ourmoji/partners"),
+      $fetch<{ incoming: Invite[]; outgoing: Invite[] }>(
+        "/api/ourmoji/invites",
+      ),
+    ]);
+    runs.value = runsRes.runs;
+    partners.value = partnersRes.partners;
+    incoming.value = invitesRes.incoming;
+    outgoing.value = invitesRes.outgoing;
   } catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : "Failed to load runs";
+    error.value = err instanceof Error ? err.message : "Failed to load data";
   } finally {
     loading.value = false;
   }
 }
 
-async function createRun() {
+async function sendInvite() {
   error.value = null;
+  if (!form.toUserId) {
+    error.value = "Pick a partner";
+    return;
+  }
   try {
-    const ids = form.participantUserIds
-      .split(",")
-      .map((s) => s.trim())
-      .filter(Boolean);
-    await $fetch("/api/ourmoji/experiments", {
+    await $fetch("/api/ourmoji/invites", {
       method: "POST",
       body: {
+        toUserId: form.toUserId,
         name: form.name,
         startDate: form.startDate,
         endDate: form.endDate,
-        participantUserIds: ids,
       },
     });
+    form.toUserId = "";
     form.name = "";
     form.startDate = "";
     form.endDate = "";
-    form.participantUserIds = "";
     await refresh();
   } catch (err: unknown) {
     error.value =
-      err instanceof Error ? err.message : "Failed to create experiment";
+      err instanceof Error ? err.message : "Failed to send invite";
+  }
+}
+
+async function accept(id: string) {
+  error.value = null;
+  try {
+    await $fetch(`/api/ourmoji/invites/${id}/accept`, { method: "POST" });
+    await refresh();
+  } catch (err: unknown) {
+    error.value =
+      err instanceof Error ? err.message : "Failed to accept invite";
+  }
+}
+
+async function decline(id: string) {
+  error.value = null;
+  try {
+    await $fetch(`/api/ourmoji/invites/${id}/decline`, { method: "POST" });
+    await refresh();
+  } catch (err: unknown) {
+    error.value =
+      err instanceof Error ? err.message : "Failed to decline invite";
+  }
+}
+
+async function cancel(id: string) {
+  error.value = null;
+  try {
+    await $fetch(`/api/ourmoji/invites/${id}/cancel`, { method: "POST" });
+    await refresh();
+  } catch (err: unknown) {
+    error.value =
+      err instanceof Error ? err.message : "Failed to cancel invite";
   }
 }
 
@@ -87,21 +150,66 @@ onMounted(() => {
 
 <template>
   <div class="space-y-8">
+    <div v-if="error" class="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300">
+      {{ error }}
+    </div>
+
+    <section v-if="incoming.length > 0" class="space-y-3">
+      <h2 class="text-lg font-semibold">Incoming invitations</h2>
+      <ul class="divide-y divide-gray-200 dark:divide-gray-800">
+        <li v-for="inv in incoming" :key="inv.id" class="flex flex-wrap items-center justify-between gap-3 py-3">
+          <div>
+            <div class="font-medium">
+              From <span class="font-mono">@{{ inv.fromUsername }}</span> · {{ inv.name }}
+            </div>
+            <div class="text-xs text-gray-500">
+              {{ inv.startDate }} → {{ inv.endDate }} · status: <span class="font-mono">{{ inv.status }}</span>
+            </div>
+          </div>
+          <div v-if="inv.status === 'pending'" class="flex gap-2">
+            <button
+              type="button"
+              class="rounded-md bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700"
+              @click="accept(inv.id)"
+            >
+              Accept
+            </button>
+            <button
+              type="button"
+              class="rounded-md border border-gray-300 px-3 py-1 text-xs text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
+              @click="decline(inv.id)"
+            >
+              Decline
+            </button>
+          </div>
+        </li>
+      </ul>
+    </section>
+
     <section class="space-y-3">
-      <h2 class="text-lg font-semibold">Create experiment run</h2>
-      <form class="grid gap-3 sm:grid-cols-2" @submit.prevent="createRun">
+      <h2 class="text-lg font-semibold">Invite a partner</h2>
+      <p v-if="partners.length === 0" class="text-sm text-gray-500">
+        No other Ourmoji-enabled users yet. When someone else has Ourmoji
+        enabled, you'll be able to pair with them here.
+      </p>
+      <form v-else class="grid gap-3 sm:grid-cols-2" @submit.prevent="sendInvite">
         <label class="flex flex-col text-sm">
-          <span class="mb-1 font-medium">Name</span>
-          <input
-            v-model="form.name"
+          <span class="mb-1 font-medium">Partner</span>
+          <select
+            v-model="form.toUserId"
             class="rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2"
             required
-          />
+          >
+            <option value="" disabled>Select a user…</option>
+            <option v-for="p in partners" :key="p.id" :value="p.id">
+              @{{ p.username }}
+            </option>
+          </select>
         </label>
         <label class="flex flex-col text-sm">
-          <span class="mb-1 font-medium">Participants (user ids, comma-separated)</span>
+          <span class="mb-1 font-medium">Experiment name</span>
           <input
-            v-model="form.participantUserIds"
+            v-model="form.name"
             class="rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2"
             required
           />
@@ -129,12 +237,37 @@ onMounted(() => {
             type="submit"
             class="rounded-md bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700"
           >
-            Create run
+            Send invitation
           </button>
         </div>
       </form>
     </section>
 
+    <section v-if="outgoing.length > 0" class="space-y-3">
+      <h2 class="text-lg font-semibold">Sent invitations</h2>
+      <ul class="divide-y divide-gray-200 dark:divide-gray-800">
+        <li v-for="inv in outgoing" :key="inv.id" class="flex flex-wrap items-center justify-between gap-3 py-3">
+          <div>
+            <div class="font-medium">
+              To <span class="font-mono">@{{ inv.toUsername }}</span> · {{ inv.name }}
+            </div>
+            <div class="text-xs text-gray-500">
+              {{ inv.startDate }} → {{ inv.endDate }} · status: <span class="font-mono">{{ inv.status }}</span>
+            </div>
+          </div>
+          <div v-if="inv.status === 'pending'" class="flex gap-2">
+            <button
+              type="button"
+              class="rounded-md border border-gray-300 px-3 py-1 text-xs text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
+              @click="cancel(inv.id)"
+            >
+              Cancel
+            </button>
+          </div>
+        </li>
+      </ul>
+    </section>
+
     <section class="space-y-3">
       <header class="flex items-center justify-between">
         <h2 class="text-lg font-semibold">Runs</h2>
@@ -147,7 +280,6 @@ onMounted(() => {
         </button>
       </header>
 
-      <div v-if="error" class="text-sm text-red-600">{{ error }}</div>
       <div v-if="loading && runs.length === 0" class="text-sm text-gray-500">
         Loading…
       </div>

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tada",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "private": true,
   "type": "module",
   "description": "Personal lifelogger - Track Activities, Discover Achievements",

app/server/api/ourmoji/invites.get.ts

@@ -0,0 +1,23 @@
+/**
+ * GET /api/ourmoji/invites
+ *
+ * List the viewer's incoming and outgoing pairing invites.
+ */
+
+import { defineEventHandler, createError } from "h3";
+
+import { unauthorized } from "~/server/utils/response";
+import { isOurmojiEnabledForUser } from "~/server/services/ourmoji/access";
+import { listInvitesForViewer } from "~/server/services/ourmoji/invites";
+
+export default defineEventHandler(async (event) => {
+  const user = event.context.user;
+  if (!user) throw createError(unauthorized(event));
+
+  if (!(await isOurmojiEnabledForUser(user.id))) {
+    throw createError({ statusCode: 404, statusMessage: "Not found" });
+  }
+
+  const { incoming, outgoing } = await listInvitesForViewer(user.id);
+  return { incoming, outgoing };
+});

app/server/api/ourmoji/invites.post.ts

@@ -0,0 +1,36 @@
+/**
+ * POST /api/ourmoji/invites
+ *
+ * Create a pending pairing invite from the viewer to another ourmoji-
+ * enabled user. On accept, an experiment run is created.
+ */
+
+import { defineEventHandler, readBody, createError } from "h3";
+
+import { unauthorized } from "~/server/utils/response";
+import { isOurmojiEnabledForUser } from "~/server/services/ourmoji/access";
+import { createInvite } from "~/server/services/ourmoji/invites";
+import { parseOrThrow } from "~/server/services/ourmoji/validation";
+import { createInviteSchema } from "./schemas";
+
+export default defineEventHandler(async (event) => {
+  const user = event.context.user;
+  if (!user) throw createError(unauthorized(event));
+
+  if (!(await isOurmojiEnabledForUser(user.id))) {
+    throw createError({ statusCode: 404, statusMessage: "Not found" });
+  }
+
+  const body = await readBody(event);
+  const payload = parseOrThrow(createInviteSchema, body, "invite payload");
+
+  const invite = await createInvite({
+    fromUserId: user.id,
+    toUserId: payload.toUserId,
+    name: payload.name,
+    startDate: payload.startDate,
+    endDate: payload.endDate,
+  });
+
+  return { invite };
+});

app/server/api/ourmoji/invites/[id]/accept.post.ts

@@ -0,0 +1,28 @@
+/**
+ * POST /api/ourmoji/invites/:id/accept
+ *
+ * Accept a pending pairing invite. Creates the underlying experiment run.
+ */
+
+import { defineEventHandler, createError, getRouterParam } from "h3";
+
+import { unauthorized } from "~/server/utils/response";
+import { isOurmojiEnabledForUser } from "~/server/services/ourmoji/access";
+import { acceptInvite } from "~/server/services/ourmoji/invites";
+
+export default defineEventHandler(async (event) => {
+  const user = event.context.user;
+  if (!user) throw createError(unauthorized(event));
+
+  if (!(await isOurmojiEnabledForUser(user.id))) {
+    throw createError({ statusCode: 404, statusMessage: "Not found" });
+  }
+
+  const id = getRouterParam(event, "id");
+  if (!id) {
+    throw createError({ statusCode: 400, statusMessage: "Missing invite id" });
+  }
+
+  const result = await acceptInvite(id, user.id);
+  return result;
+});