fix(m6): mission detail page can now edit metadata, append scenarios, edit members

The M6 SPA shipped the create wizard but the detail page was read-only —
even though the backend already exposed PUT /missions/{id}, POST
/missions/{id}/scenarios, and PUT /missions/{id}/members. So once a
mission was created you couldn't fix a typo in the client name, add a
scenario you forgot, or change member assignments without curl.

Added three modals on the detail page, gated by `is_admin ||
mission.update`:

- Edit metadata (header button, 3xl modal): name + client + dates +
  markdown description, same validation as the wizard step 1.
- Add scenarios (Tests tab): scenario picker matching wizard step 2,
  calls POST /missions/{id}/scenarios which appends snapshots at
  current_max_position + 1.
- Edit members (Members tab): roster + red/blue toggles, calls
  PUT /missions/{id}/members (full-set replace), pre-populated with
  the current member set.

The detail page now imports useAuth so `canEdit` is computed once and
shared between the three buttons.

E2E: new "detail page edits metadata, appends scenarios, edits members"
spec exercises the three modals end-to-end. M6 e2e count is now 6.

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

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented here. Format: [Keep a Cha
 
 ## [Unreleased]
 
+### Fixed (post-M6 SPA — mission detail page was read-only)
+- **Mission detail page couldn't edit metadata, append scenarios, or change members** (`frontend/src/pages/MissionDetailPage.tsx`): the M6 SPA shipped the 3-step *creation* wizard but no edit affordance on the detail page — even though the backend already exposed `PUT /missions/{id}`, `POST /missions/{id}/scenarios`, and `PUT /missions/{id}/members`. Added three modals gated by `is_admin || mission.update`:
+  - **Edit metadata** (header button, opens a 3xl modal): name / client_target / dates / description_md, full inline validation (empty name, inverted dates) mirroring the wizard's step 1.
+  - **Add scenarios** (in the Tests tab): scenario picker reusing the wizard step-2 visual, calls `POST /missions/{id}/scenarios` which appends snapshots at `current_max_position + 1`. The footer line tells the user how many tests will be appended.
+  - **Edit members** (in the Members tab): roster + red/blue toggles, calls `PUT /missions/{id}/members` (full-set replace) — same UX as the wizard step 3, pre-populated with the current member set.
+- Detail page now imports `useAuth` to compute `canEdit` once and reuses it across all three buttons.
+- E2E spec extended: new test `SPA — detail page edits metadata, appends scenarios, edits members` exercises the three modals end-to-end against a pre-seeded mission. Suite is now 44 Playwright tests (6 in M6).
+
 ### Fixed (post-M6 review pass — spec-reviewer + code-reviewer)
 - **SPA cache invalidation only refreshed the empty-filter list** (`frontend/src/lib/missions.ts:136`): `missionKeys.list()` returns `['missions','list',{}]`. TanStack v5's `invalidateQueries({queryKey})` is prefix-based, but `{}` is treated as an atomic final element — so create / transition / delete called with that key only invalidated the *exact* empty-filter list, leaving any filtered variant stale until manual refetch. Added `missionKeys.listPrefix()` returning `['missions','list']` and switched all three mutation `onSuccess` paths to it.
 - **Snapshot lacked the per-scenario advisory lock** (`backend/app/services/missions.py:467`): a concurrent `PUT /scenario-templates/{id}/tests` (M5 reorder, which deletes-then-reinserts join rows) running while `_snapshot_scenarios` walked `sc.tests` could freeze a torn snapshot — `selectinload` re-queries under READ COMMITTED so a partial view was possible. Added `_lock_scenario_ids_for_snapshot` that acquires the same `pg_advisory_xact_lock` key used by `set_scenario_tests` (blake2b digest of the scenario UUID, sorted to avoid deadlocks). Snapshot and reorder now serialise per scenario.

e2e/tests/m6-missions.spec.ts

@@ -292,6 +292,90 @@ test.describe('M6 — Missions', () => {
     await expect(page.getByText('spa-wizard-t3')).toBeVisible();
   });
 
+  test('SPA — detail page edits metadata, appends scenarios, edits members', async ({
+    page,
+    request,
+  }) => {
+    const auth = await adminAuth(request);
+
+    // Pre-seed: one mission with one initial scenario; a second scenario to
+    // append; and a second user we can assign as a member from the SPA.
+    const initialTestId = await makeTest(request, auth, 'spa-edit-initial-t');
+    const initialScenarioId = await makeScenario(
+      request,
+      auth,
+      'spa-edit-initial-scenario',
+      [initialTestId],
+    );
+    const extraTestId = await makeTest(request, auth, 'spa-edit-appended-t');
+    const extraScenarioId = await makeScenario(
+      request,
+      auth,
+      'spa-edit-appended-scenario',
+      [extraTestId],
+    );
+    const mission = await request
+      .post('/api/v1/missions', {
+        headers: auth,
+        data: {
+          name: 'spa-edit-target',
+          client_target: 'Initial Co.',
+          scenario_template_ids: [initialScenarioId],
+        },
+      })
+      .then((r) => r.json());
+
+    // A second user the admin can add as a member via the modal.
+    const teammateEmail = `spa-edit-mate-${crypto.randomUUID().slice(0, 8)}@metamorph.local`;
+    const inv = await request
+      .post('/api/v1/invitations', {
+        headers: auth,
+        data: { email_hint: teammateEmail },
+      })
+      .then((r) => r.json());
+    await request.post(`/api/v1/invitations/accept/${inv.token}`, {
+      data: { email: teammateEmail, password: 'MatePass1234!' },
+    });
+
+    await loginViaSpa(page, ADMIN_EMAIL, ADMIN_PASSWORD);
+    await page.goto(`/missions/${mission.id}`);
+    await expect(page.getByText('Initial Co.')).toBeVisible();
+
+    // --- Edit metadata --------------------------------------------------
+    await page.getByTestId('mission-edit-meta').click();
+    const metaModal = page.getByTestId('mission-edit-meta-modal');
+    await expect(metaModal).toBeVisible();
+    await metaModal.getByTestId('meta-edit-client').fill('Renamed Co.');
+    await metaModal.getByTestId('meta-edit-save').click();
+    await expect(metaModal).toBeHidden();
+    await expect(page.getByText('Renamed Co.')).toBeVisible();
+
+    // --- Append a scenario ---------------------------------------------
+    await page.getByTestId('mission-add-scenarios').click();
+    const addModal = page.getByTestId('mission-add-scenarios-modal');
+    await expect(addModal).toBeVisible();
+    await addModal.getByTestId(`add-scenario-toggle-${extraScenarioId}`).click();
+    await addModal.getByTestId('add-scenarios-save').click();
+    await expect(addModal).toBeHidden();
+    // Both scenarios now visible in the Tests tab
+    await expect(page.getByText('spa-edit-initial-scenario')).toBeVisible();
+    await expect(page.getByText('spa-edit-appended-scenario')).toBeVisible();
+    await expect(page.getByText('spa-edit-appended-t')).toBeVisible();
+
+    // --- Edit members ---------------------------------------------------
+    await page.getByTestId('mission-tab-members').click();
+    await page.getByTestId('mission-edit-members').click();
+    const memModal = page.getByTestId('mission-edit-members-modal');
+    await expect(memModal).toBeVisible();
+    // The roster row test-ids encode the new user's id; we don't know it here
+    // but the email is unique, so locate the row by email text and toggle red.
+    const teammateRow = memModal.getByText(teammateEmail).locator('..').locator('..');
+    await teammateRow.getByRole('button', { name: /red/i }).click();
+    await memModal.getByTestId('edit-members-save').click();
+    await expect(memModal).toBeHidden();
+    await expect(page.getByText(teammateEmail)).toBeVisible();
+  });
+
   test('SPA — list page filters by status', async ({ page, request }) => {
     const auth = await adminAuth(request);
     // Seed two missions with distinct statuses.

frontend/src/pages/MissionDetailPage.tsx

@@ -1,21 +1,35 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { MarkdownField } from '@/components/MarkdownField';
 import { Alert } from '@/components/ui/Alert';
 import { Button } from '@/components/ui/Button';
 import { Card } from '@/components/ui/Card';
+import { Modal } from '@/components/ui/Modal';
 import { SectionHeader } from '@/components/ui/SectionHeader';
 import { Tag } from '@/components/ui/Tag';
-import { ApiError, apiDelete, apiGet, apiPost } from '@/lib/api';
+import { TextField } from '@/components/ui/TextField';
+import { ApiError, apiDelete, apiGet, apiPost, apiPut } from '@/lib/api';
+import { useAuth } from '@/lib/auth';
 import {
   MISSION_STATUS_ACCENT,
   MISSION_STATUS_LABEL,
   missionKeys,
+  type AddScenariosPayload,
+  type MemberPayload,
   type Mission,
+  type MissionRoleHint,
   type MissionStatus,
+  type SetMembersPayload,
   type TransitionPayload,
+  type UpdateMissionPayload,
 } from '@/lib/missions';
+import type {
+  ScenarioTemplate,
+  ScenarioTemplateListResponse,
+} from '@/lib/templates';
+import { templateKeys } from '@/lib/templates';
 
 const TABS = ['tests', 'members', 'synthesis', 'export'] as const;
 type Tab = (typeof TABS)[number];
@@ -34,6 +48,21 @@ const TRANSITION_BUTTON_ACCENT: Record<MissionStatus, 'cyan' | 'orange' | 'green
   archived: 'teal',
 };
 
+interface RosterUser {
+  id: string;
+  email: string;
+  display_name: string | null;
+}
+
+interface RosterResponse {
+  items: RosterUser[];
+}
+
+interface MemberSelection {
+  user_id: string;
+  role_hint: MissionRoleHint;
+}
+
 function useMission(id: string) {
   return useQuery({
     queryKey: missionKeys.detail(id),
@@ -42,19 +71,431 @@ function useMission(id: string) {
   });
 }
 
+function useScenarioCatalogue(enabled: boolean) {
+  return useQuery({
+    queryKey: templateKeys.scenarios(''),
+    queryFn: () =>
+      apiGet<ScenarioTemplateListResponse>('/scenario-templates?limit=500'),
+    enabled,
+  });
+}
+
+function useRoster(enabled: boolean) {
+  return useQuery({
+    queryKey: ['users', 'roster'],
+    queryFn: () => apiGet<RosterResponse>('/users/roster'),
+    enabled,
+  });
+}
+
 function formatDateRange(start: string | null, end: string | null): string {
   if (!start && !end) return 'No dates set';
   if (start && end) return `${start} → ${end}`;
   return start ?? end ?? '';
 }
 
+// --------------------------------------------------------------------------- //
+// Metadata edit modal                                                         //
+// --------------------------------------------------------------------------- //
+
+interface MetaEditModalProps {
+  mission: Mission;
+  open: boolean;
+  onClose: () => void;
+}
+
+function MetaEditModal({ mission, open, onClose }: MetaEditModalProps) {
+  const qc = useQueryClient();
+  const [name, setName] = useState(mission.name);
+  const [client, setClient] = useState(mission.client_target ?? '');
+  const [dateStart, setDateStart] = useState(mission.date_start ?? '');
+  const [dateEnd, setDateEnd] = useState(mission.date_end ?? '');
+  const [description, setDescription] = useState(mission.description_md ?? '');
+
+  // Reset form whenever the modal opens with a (potentially newer) mission.
+  useEffect(() => {
+    if (!open) return;
+    setName(mission.name);
+    setClient(mission.client_target ?? '');
+    setDateStart(mission.date_start ?? '');
+    setDateEnd(mission.date_end ?? '');
+    setDescription(mission.description_md ?? '');
+  }, [open, mission]);
+
+  const update = useMutation({
+    mutationFn: (body: UpdateMissionPayload) =>
+      apiPut<Mission>(`/missions/${mission.id}`, body),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: missionKeys.detail(mission.id) });
+      qc.invalidateQueries({ queryKey: missionKeys.listPrefix() });
+      onClose();
+    },
+  });
+
+  const apiErr = update.error instanceof ApiError ? update.error : null;
+  const nameInvalid = name.trim().length === 0;
+  const datesInvalid = dateStart && dateEnd && dateEnd < dateStart;
+
+  function submit() {
+    update.mutate({
+      name: name.trim(),
+      client_target: client.trim() || null,
+      date_start: dateStart || null,
+      date_end: dateEnd || null,
+      description_md: description.trim() || null,
+    });
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={mission.name}
+      accent="cyan"
+      size="3xl"
+      testid="mission-edit-meta-modal"
+    >
+      <div className="flex flex-col gap-3 min-w-0">
+        {apiErr && <Alert accent="red">{apiErr.message}</Alert>}
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <TextField
+            label="Name"
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            data-testid="meta-edit-name"
+          />
+          <TextField
+            label="Client / target"
+            value={client}
+            onChange={(e) => setClient(e.target.value)}
+            data-testid="meta-edit-client"
+          />
+          <TextField
+            label="Start date"
+            type="date"
+            value={dateStart}
+            onChange={(e) => setDateStart(e.target.value)}
+            data-testid="meta-edit-date-start"
+          />
+          <TextField
+            label="End date"
+            type="date"
+            value={dateEnd}
+            onChange={(e) => setDateEnd(e.target.value)}
+            data-testid="meta-edit-date-end"
+          />
+        </div>
+        <MarkdownField
+          label="ROE / Description"
+          value={description}
+          onChange={setDescription}
+          data-testid="meta-edit-description"
+        />
+        {datesInvalid && (
+          <p className="font-mono text-2xs text-red" data-testid="meta-edit-date-error">
+            End date must be on or after start date.
+          </p>
+        )}
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <Button accent="teal" variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            accent="green"
+            onClick={submit}
+            disabled={nameInvalid || !!datesInvalid || update.isPending}
+            data-testid="meta-edit-save"
+          >
+            {update.isPending ? 'Saving…' : 'Save'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+// --------------------------------------------------------------------------- //
+// Add-scenarios modal                                                         //
+// --------------------------------------------------------------------------- //
+
+interface AddScenariosModalProps {
+  mission: Mission;
+  open: boolean;
+  onClose: () => void;
+}
+
+function AddScenariosModal({ mission, open, onClose }: AddScenariosModalProps) {
+  const qc = useQueryClient();
+  const [selected, setSelected] = useState<string[]>([]);
+  const catalogue = useScenarioCatalogue(open);
+
+  useEffect(() => {
+    if (open) setSelected([]);
+  }, [open]);
+
+  const add = useMutation({
+    mutationFn: (body: AddScenariosPayload) =>
+      apiPost<Mission>(`/missions/${mission.id}/scenarios`, body),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: missionKeys.detail(mission.id) });
+      qc.invalidateQueries({ queryKey: missionKeys.listPrefix() });
+      onClose();
+    },
+  });
+
+  const apiErr = add.error instanceof ApiError ? add.error : null;
+
+  function toggle(id: string) {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  }
+
+  function submit() {
+    add.mutate({ scenario_template_ids: selected });
+  }
+
+  const totalTestsToAdd = useMemo(() => {
+    if (!catalogue.data) return 0;
+    const by_id = new Map<string, ScenarioTemplate>(
+      catalogue.data.items.map((sc) => [sc.id, sc] as const),
+    );
+    return selected.reduce((acc, id) => acc + (by_id.get(id)?.tests_count ?? 0), 0);
+  }, [selected, catalogue.data]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={`Add scenarios to ${mission.name}`}
+      accent="cyan"
+      size="3xl"
+      testid="mission-add-scenarios-modal"
+    >
+      <div className="flex flex-col gap-3 min-w-0">
+        {apiErr && <Alert accent="red">{apiErr.message}</Alert>}
+        {catalogue.isError && <Alert accent="red">Failed to load scenarios.</Alert>}
+        {catalogue.isLoading && (
+          <p className="font-mono text-xs text-text-dim">Loading…</p>
+        )}
+        <p className="font-mono text-2xs text-text-dim">
+          {selected.length} scenario{selected.length === 1 ? '' : 's'} ·{' '}
+          {totalTestsToAdd} test{totalTestsToAdd === 1 ? '' : 's'} will be appended
+          after the current {mission.scenarios_count}.
+        </p>
+        <ul
+          className="grid grid-cols-1 gap-2 md:grid-cols-2"
+          data-testid="add-scenarios-picker"
+        >
+          {catalogue.data?.items.map((sc) => {
+            const isSelected = selected.includes(sc.id);
+            return (
+              <li key={sc.id}>
+                <button
+                  type="button"
+                  className={`w-full rounded-md border ${
+                    isSelected ? 'border-cyan text-cyan' : 'border-border text-text'
+                  } bg-bg-card p-3 text-left font-mono text-xs hover:border-cyan`}
+                  onClick={() => toggle(sc.id)}
+                  data-testid={`add-scenario-toggle-${sc.id}`}
+                  aria-pressed={isSelected}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-text-bright">{sc.name}</span>
+                    <Tag accent="purple">{sc.tests_count} tests</Tag>
+                  </div>
+                  {sc.description && (
+                    <p className="mt-1 text-text-dim">{sc.description}</p>
+                  )}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+        {catalogue.data && catalogue.data.items.length === 0 && (
+          <p className="font-mono text-xs text-text-dim">
+            No scenarios in the catalogue yet.
+          </p>
+        )}
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <Button accent="teal" variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            accent="green"
+            onClick={submit}
+            disabled={selected.length === 0 || add.isPending}
+            data-testid="add-scenarios-save"
+          >
+            {add.isPending ? 'Adding…' : `Add ${selected.length} scenario${selected.length === 1 ? '' : 's'}`}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+// --------------------------------------------------------------------------- //
+// Edit-members modal                                                          //
+// --------------------------------------------------------------------------- //
+
+interface EditMembersModalProps {
+  mission: Mission;
+  open: boolean;
+  onClose: () => void;
+}
+
+function EditMembersModal({ mission, open, onClose }: EditMembersModalProps) {
+  const qc = useQueryClient();
+  const roster = useRoster(open);
+  const [members, setMembers] = useState<MemberSelection[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+    setMembers(
+      mission.members.map((m) => ({
+        user_id: m.user_id,
+        role_hint: m.role_hint,
+      })),
+    );
+  }, [open, mission]);
+
+  const save = useMutation({
+    mutationFn: (body: SetMembersPayload) =>
+      apiPut<Mission>(`/missions/${mission.id}/members`, body),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: missionKeys.detail(mission.id) });
+      qc.invalidateQueries({ queryKey: missionKeys.listPrefix() });
+      onClose();
+    },
+  });
+
+  const apiErr = save.error instanceof ApiError ? save.error : null;
+
+  function setRole(user_id: string, role_hint: MissionRoleHint) {
+    setMembers((prev) =>
+      prev.some((m) => m.user_id === user_id)
+        ? prev.map((m) => (m.user_id === user_id ? { ...m, role_hint } : m))
+        : [...prev, { user_id, role_hint }],
+    );
+  }
+
+  function remove(user_id: string) {
+    setMembers((prev) => prev.filter((m) => m.user_id !== user_id));
+  }
+
+  function submit() {
+    const payload: SetMembersPayload = {
+      members: members.map(
+        (m): MemberPayload => ({ user_id: m.user_id, role_hint: m.role_hint }),
+      ),
+    };
+    save.mutate(payload);
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={`Members of ${mission.name}`}
+      accent="cyan"
+      size="3xl"
+      testid="mission-edit-members-modal"
+    >
+      <div className="flex flex-col gap-3 min-w-0">
+        {apiErr && <Alert accent="red">{apiErr.message}</Alert>}
+        {roster.isError && <Alert accent="red">Failed to load roster.</Alert>}
+        {roster.isLoading && (
+          <p className="font-mono text-xs text-text-dim">Loading users…</p>
+        )}
+        <ul className="flex flex-col gap-2" data-testid="edit-members-picker">
+          {roster.data?.items.map((u) => {
+            const selected = members.find((m) => m.user_id === u.id);
+            return (
+              <li
+                key={u.id}
+                className="flex flex-wrap items-center justify-between gap-2 rounded-md border border-border bg-bg-card p-3"
+                data-testid={`edit-member-row-${u.id}`}
+              >
+                <div>
+                  <p className="font-mono text-xs text-text-bright">
+                    {u.display_name ?? u.email}
+                  </p>
+                  {u.display_name && (
+                    <p className="font-mono text-2xs text-text-dim">{u.email}</p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    accent="red"
+                    variant={selected?.role_hint === 'red' ? 'solid' : 'outline'}
+                    onClick={() => setRole(u.id, 'red')}
+                    data-testid={`edit-member-${u.id}-red`}
+                  >
+                    Red
+                  </Button>
+                  <Button
+                    accent="cyan"
+                    variant={selected?.role_hint === 'blue' ? 'solid' : 'outline'}
+                    onClick={() => setRole(u.id, 'blue')}
+                    data-testid={`edit-member-${u.id}-blue`}
+                  >
+                    Blue
+                  </Button>
+                  {selected && (
+                    <Button
+                      accent="rose"
+                      variant="ghost"
+                      onClick={() => remove(u.id)}
+                      data-testid={`edit-member-${u.id}-clear`}
+                    >
+                      ✕
+                    </Button>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <Button accent="teal" variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            accent="green"
+            onClick={submit}
+            disabled={save.isPending}
+            data-testid="edit-members-save"
+          >
+            {save.isPending ? 'Saving…' : 'Save members'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+// --------------------------------------------------------------------------- //
+// Main page                                                                   //
+// --------------------------------------------------------------------------- //
+
 export function MissionDetailPage() {
   const params = useParams();
   const missionId = params.id ?? '';
   const navigate = useNavigate();
   const qc = useQueryClient();
+  const { state } = useAuth();
+
+  const canEdit =
+    state.user?.is_admin ||
+    state.user?.permissions.includes('mission.update') ||
+    false;
 
   const [tab, setTab] = useState<Tab>('tests');
+  const [editMeta, setEditMeta] = useState(false);
+  const [addScenarios, setAddScenarios] = useState(false);
+  const [editMembers, setEditMembers] = useState(false);
   const detail = useMission(missionId);
 
   const transition = useMutation({
@@ -98,6 +539,16 @@ export function MissionDetailPage() {
         <SectionHeader prefix="Mission" highlight={m.name} accent={accent} />
         <div className="flex items-center gap-2">
           <Tag accent={accent}>{MISSION_STATUS_LABEL[m.status]}</Tag>
+          {canEdit && (
+            <Button
+              accent="cyan"
+              variant="outline"
+              onClick={() => setEditMeta(true)}
+              data-testid="mission-edit-meta"
+            >
+              Edit
+            </Button>
+          )}
           {allowedNext.map((target) => (
             <Button
               key={target}
@@ -175,9 +626,25 @@ export function MissionDetailPage() {
 
       {tab === 'tests' && (
         <Card>
+          <div className="flex items-baseline justify-between flex-wrap gap-2 mb-3">
+            <p className="font-mono text-2xs text-text-dim">
+              Snapshots are frozen at append time — editing a source template
+              does not propagate.
+            </p>
+            {canEdit && (
+              <Button
+                accent="cyan"
+                onClick={() => setAddScenarios(true)}
+                data-testid="mission-add-scenarios"
+              >
+                + Add scenarios
+              </Button>
+            )}
+          </div>
           {m.scenarios.length === 0 ? (
             <p className="font-mono text-xs text-text-dim">
               No scenarios snapshotted yet.
+              {canEdit && ' Click "Add scenarios" to append one.'}
             </p>
           ) : (
             <div className="flex flex-col gap-4" data-testid="mission-scenarios">
@@ -260,9 +727,25 @@ export function MissionDetailPage() {
 
       {tab === 'members' && (
         <Card>
+          <div className="flex items-baseline justify-between flex-wrap gap-2 mb-3">
+            <p className="font-mono text-2xs text-text-dim">
+              Members see this mission and (for reds) can author red-side fields
+              on its tests in M7+.
+            </p>
+            {canEdit && (
+              <Button
+                accent="cyan"
+                onClick={() => setEditMembers(true)}
+                data-testid="mission-edit-members"
+              >
+                Edit members
+              </Button>
+            )}
+          </div>
           {m.members.length === 0 ? (
             <p className="font-mono text-xs text-text-dim">
-              No members assigned. An admin can add them via the API.
+              No members assigned.
+              {canEdit && ' Click "Edit members" to add some.'}
             </p>
           ) : (
             <ul className="flex flex-col gap-2" data-testid="mission-members">
@@ -307,6 +790,18 @@ export function MissionDetailPage() {
           </p>
         </Card>
       )}
+
+      <MetaEditModal mission={m} open={editMeta} onClose={() => setEditMeta(false)} />
+      <AddScenariosModal
+        mission={m}
+        open={addScenarios}
+        onClose={() => setAddScenarios(false)}
+      />
+      <EditMembersModal
+        mission={m}
+        open={editMembers}
+        onClose={() => setEditMembers(false)}
+      />
     </section>
   );
 }