Compose to the bottom, not the top — a code-level reading (everwhen #338)

What changed, and why

On the mission-select briefing you can pick a curated objective or have one composed by AI. The composed one dropped in at the top of the list, pushing the curated pool down and away from the "Compose a fresh objective with AI" button you had just pressed. Your eyes were at the button; the result landed somewhere else.

This moves it to the bottom, right above that button, so the thing you composed appears where you are looking, already selected and ready to begin.

The whole behaviour is one expression. The list is rendered straight from a computed array, so its order is that array's order. The fix reorders one spread; nothing else about compose, selection, or the curated pool moves. A new test pins the placement so it can't quietly regress.

The one-line reorder

options is the array the template walks with v-for to draw the rows. It is just the curated pool, with the freshly composed objective (if any) spliced in. Putting fresh.value first made it lead; putting it last makes it trail. That single position is the entire change to behaviour — the two comments above it and in the template were updated to match.

The template renders options in array order, so the spread order is the display order.

components/MissionSelect.vue · 462 lines

components/MissionSelect.vue462 lines · Vue

⋯ 87 lines hidden (lines 1–87)1<template>
<!-- Mission briefing: choose (or compose) the run's grand objective, as a ledger. -->
<div data-testid="mission-select" class="ew-fade-in max-w-4xl mx-auto">
  <!-- Replay (issue #89): seeded from a shared run's objective. A focused view — this
       one objective, ready to play — not the full browse/compose ledger. -->
  <template v-if="replay">
    <div class="mb-7">
      <p class="ew-label">Replay a shared objective</p>
      <h2
        class="ew-serif ew-fg text-2xl sm:text-3xl font-semibold mt-1.5 leading-tight"
      >
        Take on this very objective
      </h2>
      <RemixCreditLine :credit="replayCredit" class="mt-2" />
    </div>
16 
    <div
      data-testid="replay-objective"
      class="border-t border-b ew-line py-4 flex items-start gap-3 ew-tint"
      :style="{ borderLeft: '2px solid var(--ew-accent)' }"
    >
      <span
        class="w-6 shrink-0 text-center text-lg leading-none select-none"
        aria-hidden="true"
        >{{ replay.objective.icon }}</span
      >
      <span class="min-w-0 flex-1">
        <span class="flex items-center gap-2 flex-wrap">
          <h3 class="ew-fg font-semibold">{{ replay.objective.title }}</h3>
          <span v-if="replay.objective.era" class="ew-label">{{
            replay.objective.era
          }}</span>
        </span>
        <!-- whitespace-pre-line: the brief is newline-separated "• " bullet lines (#82). -->
        <span
          class="block ew-muted text-sm mt-0.5 leading-relaxed whitespace-pre-line"
          >{{ replay.objective.description }}</span
        >
      </span>
    </div>
41 
    <div
      class="mt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
    >
      <button
        type="button"
        data-testid="replay-exit"
        class="ew-tap ew-hover-fg text-xs ew-mono uppercase tracking-wide"
        @click="exitReplay"
      >
        ← Choose a different objective
      </button>
      <button
        type="button"
        data-testid="begin-button"
        class="ew-btn ew-btn--primary"
        :disabled="beginning"
        @click="begin"
      >
        {{ beginning ? "Charting the timeline…" : "Play this objective" }}
        <span aria-hidden="true">▷</span>
      </button>
    </div>
    <p
      v-if="beginError"
      data-testid="begin-error"
      class="text-xs ew-bad mt-2"
    >
      {{ beginError }}
    </p>
  </template>
72 
  <!-- Normal briefing: choose a curated objective, or compose a fresh one. -->
  <template v-else>
    <div class="mb-7">
      <p class="ew-label">Choose your crusade</p>
      <h2
        class="ew-serif ew-fg text-2xl sm:text-3xl font-semibold mt-1.5 leading-tight"
      >
        What will you set right?
      </h2>
      <p class="ew-muted text-sm mt-2 max-w-xl">
        Five messages. Anyone in history. One world to remake. Pick the cause
        that will define your run — or have a fresh one composed.
      </p>
    </div>
87 
    <!-- Objectives as compact hairline rows: a one-line hook keeps the whole list
       scannable at a glance (you see many at once, not two). The full brief unfolds
       only on the chosen row, so the page stays short until you commit to reading
       one. A freshly composed objective is appended last, above the compose button. -->
⋯ 276 lines hidden (lines 92–367)92      <div
      role="radiogroup"
      aria-label="Choose an objective"
      class="border-t ew-line"
    >
      <button
        v-for="obj in options"
        :key="(obj === fresh ? 'fresh:' : 'curated:') + obj.title"
        type="button"
        data-testid="objective-option"
        role="radio"
        :aria-checked="isSelected(obj)"
        class="w-full text-left flex items-start gap-3 pr-2 pl-3 border-b ew-line transition ew-hover"
        :class="isSelected(obj) ? 'ew-tint py-3.5' : 'py-2.5'"
        :style="{
          borderLeft: `2px solid ${isSelected(obj) ? 'var(--ew-accent)' : 'transparent'}`,
        }"
        @click="select(obj)"
      >
        <span
          class="ew-dot mt-1.5"
          :class="isSelected(obj) ? 'ew-dot--accent' : 'ew-dot--hollow'"
          aria-hidden="true"
        />
        <span
          class="w-6 shrink-0 text-center text-lg leading-none select-none"
          aria-hidden="true"
          >{{ obj.icon }}</span
        >
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2 flex-wrap">
            <h3 class="ew-fg font-semibold">{{ obj.title }}</h3>
            <span v-if="obj.era" class="ew-label">{{ obj.era }}</span>
            <span
              v-if="obj === fresh"
              data-testid="fresh-badge"
              class="ew-accent text-[10px] uppercase tracking-wider"
            >
              ✨ freshly composed
            </span>
          </span>
          <!-- Collapsed: a single-line hook (truncate is the backstop; hookFor already
             trims to ~70 chars). Chosen: the full brief, whitespace-pre-line for the
             newline-separated "• " bullet lines (issue #82), faded in as it unfolds. -->
          <span
            v-if="!isSelected(obj)"
            data-testid="objective-hook"
            class="block ew-muted text-sm mt-0.5 leading-snug truncate"
            >{{ hookFor(obj) }}</span
          >
          <span
            v-else
            data-testid="objective-brief"
            class="ew-fade-in block ew-muted text-sm mt-1 leading-relaxed whitespace-pre-line"
            >{{ obj.description }}</span
          >
        </span>
      </button>
    </div>
151 
    <!-- Steer a fresh composition: two closed-enum dials, set before composing.
       "No preference" leaves an axis to the model. Closed enums only (no free
       text), so an out-of-bounds objective can't be steered into existence. -->
    <fieldset class="mt-6 pt-4 border-t ew-line">
      <legend class="ew-label">
        Steer a fresh composition <span class="ew-faint">· optional</span>
      </legend>
      <div class="mt-2 flex flex-col sm:flex-row gap-3 sm:gap-4">
        <label class="flex-1 min-w-0 text-sm">
          <span class="ew-label block mb-1">Era</span>
          <select
            v-model="steerEra"
            data-testid="steer-era"
            class="ew-select text-sm"
            aria-label="Steer the era"
          >
            <option value="">No preference</option>
            <option v-for="era in OBJECTIVE_ERAS" :key="era" :value="era">
              {{ era }}
            </option>
          </select>
        </label>
        <label class="flex-1 min-w-0 text-sm">
          <span class="ew-label block mb-1">Theme</span>
          <select
            v-model="steerTheme"
            data-testid="steer-theme"
            class="ew-select text-sm"
            aria-label="Steer the theme"
          >
            <option value="">No preference</option>
            <option
              v-for="theme in OBJECTIVE_THEMES"
              :key="theme"
              :value="theme"
            >
              {{ theme }}
            </option>
          </select>
        </label>
      </div>
    </fieldset>
194 
    <!-- Actions: compose a fresh objective · begin the run -->
    <div
      class="mt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
    >
      <div class="flex flex-col items-start gap-1">
        <button
          type="button"
          data-testid="compose-objective"
          class="ew-btn text-sm"
          :disabled="composing"
          @click="rollFresh"
        >
          <span aria-hidden="true">✨</span>
          {{
            composing
              ? "Composing a fresh fate…"
              : "Compose a fresh objective with AI"
          }}
        </button>
        <p
          v-if="activeSteer"
          data-testid="active-steer"
          class="text-xs ew-muted"
        >
          Steering: {{ activeSteer }}
        </p>
        <p
          v-if="composeError"
          data-testid="compose-error"
          class="text-xs ew-bad"
        >
          {{ composeError }}
        </p>
        <!-- Quiet degrade (#127): a steered compose fell back to curated. Non-blocking
           and muted (not the ew-bad error tone) — the player has a valid objective
           ready; this just tells the truth that the steer was dropped. -->
        <p
          v-if="composeNotice"
          data-testid="compose-degraded"
          class="text-xs ew-muted"
        >
          {{ composeNotice }}
        </p>
      </div>
239 
      <button
        type="button"
        data-testid="begin-button"
        class="ew-btn ew-btn--primary"
        :disabled="!selected || beginning"
        @click="begin"
      >
        {{ beginning ? "Charting the timeline…" : "Begin rewriting history" }}
        <span aria-hidden="true">▷</span>
      </button>
      <p
        v-if="beginError"
        data-testid="begin-error"
        class="text-xs ew-bad mt-2"
      >
        {{ beginError }}
      </p>
    </div>
  </template>
259 
  <!-- Paywall: the free run is spent. The run-packs modal opens automatically on
       the refused commit; this persistent notice lets the player reopen it if they
       dismissed it. -->
  <div
    v-if="gameStore.outOfRuns"
    data-testid="paywall"
    class="mt-4 pt-4 border-t ew-line"
  >
    <p class="text-sm ew-fg font-semibold">
      You're out of runs — your free run is spent.
    </p>
    <p class="ew-muted text-xs mt-0.5">
      Grab a pack to keep rewriting history. One-time, never expires.
    </p>
    <button
      type="button"
      data-testid="open-packs"
      class="ew-btn ew-btn--primary mt-3"
      @click="economyStore.openBuyModal()"
    >
      See run packs <span aria-hidden="true">→</span>
    </button>
  </div>
283 
  <!-- Capacity: the global spend cap paused new runs (in-progress runs continue). -->
  <p
    v-else-if="gameStore.atCapacity"
    data-testid="at-capacity"
    class="text-sm ew-bad mt-3"
  >
    The timeline is at capacity right now — please try again shortly.
  </p>
292 
  <!-- Compliance disclosure, shown at the start of every run (Anthropic Usage
       Policy: AI disclosure at session start; outputs may be inaccurate; an
       adults-only posture). -->
  <p
    data-testid="ai-disclosure"
    class="ew-faint text-xs leading-relaxed mt-8 pt-4 border-t ew-line max-w-2xl"
  >
    The historical figures here are played by AI, not real people, and every
    reply is AI-generated
    <span class="ew-fg"
      >alternate history — dramatized fiction, not historical fact</span
    >; don't rely on it as accurate. Intended for adults (18+).
  </p>
</div>
307</template>
308 
309<script setup lang="ts">
310/**
* MissionSelect — the opening briefing. Curated objectives + a live-composed one, as
* borderless hairline rows; selection uses identity, not titles. Nothing commits
* until Begin, so a freshly composed objective can be previewed and reconsidered.
*/
315import { ref, shallowRef, computed } from "vue";
316import { useGameStore } from "~/stores/game";
317import { useEconomyStore } from "~/stores/economy";
318import type { RemixCredit } from "~/utils/run-snapshot";
319import {
listCuratedObjectives,
OBJECTIVE_ERAS,
OBJECTIVE_THEMES,
type GameObjective,
type ObjectiveEra,
type ObjectiveTheme,
326} from "~/utils/objectives";
327 
328const gameStore = useGameStore();
329const economyStore = useEconomyStore();
330 
331// Replay mode (issue #89): set when seeded from a shared run's objective. The briefing
332// shows just that objective, ready to play; Begin commits it verbatim (no generation).
333const replay = computed(() => gameStore.replayState);
334// The "remixed from" line above the seeded objective. The title is omitted (the objective
335// is shown right below), so it reads "Remixed from <name>" / "…an anonymous run", linking
336// back to the source when still shared.
337const replayCredit = computed<RemixCredit>(() => ({
attribution: replay.value?.sourceAttribution ?? null,
objectiveTitle: "",
sourceToken: replay.value?.sourceToken ?? null,
341}));
342 
343const curated = listCuratedObjectives();
344// shallowRef, not ref: selection is by object identity (isSelected uses ===), and the
345// curated options are plain objects. A deep ref would return a *reactive proxy* on
346// `.value`, so `selected.value === obj` (raw) would be false — the row would highlight
347// on hover but its radio dot / aria-checked would never flip. shallowRef stores the
348// value as-is, keeping identity intact.
349const fresh = shallowRef<GameObjective | null>(null);
350const selected = shallowRef<GameObjective | null>(null);
351// Titles composed this session, fed back as the avoid-list so each reroll lands
352// somewhere new (#95). Resets naturally: MissionSelect is mounted only while there's
353// no objective (v-if in play.vue), so a new run remounts it with an empty list.
354const seenTitles = ref<string[]>([]);
355const composing = ref(false);
356// Hard-failure surface: no objective came back at all (red, ew-bad).
357const composeError = ref<string | null>(null);
358// Quiet-degrade surface (#127): a steered compose fell back to curated, so the
359// steer was dropped. Distinct from composeError — the player still has a valid
360// objective; this notice is muted and informational, not an error.
361const composeNotice = ref<string | null>(null);
362const beginning = ref(false);
363 
364// Composition steer (closed enums; '' = no preference, left to the model).
365const steerEra = ref<ObjectiveEra | "">("");
366const steerTheme = ref<ObjectiveTheme | "">("");
367 
368// A freshly composed objective appends to the END, so it surfaces right above the
369// compose button that produced it rather than displacing the curated pool. Selection
370// is identity-based (isSelected uses ===), so it stays selected wherever it sits.
371const options = computed(() =>
fresh.value ? [...curated, fresh.value] : curated,
373);
⋯ 89 lines hidden (lines 374–462)374 
375// A plain-language echo of the active steer, surfaced by the compose button.
376const activeSteer = computed(
() => [steerEra.value, steerTheme.value].filter(Boolean).join(" · ") || null,
378);
379 
380// A one-line hook for the collapsed row — the first brief line, bullet marker
381// stripped, trimmed to ~70 chars at a word boundary. The full description (the "• "
382// bullet list, #82) is only revealed on the chosen row, keeping the list scannable.
383function hookFor(obj: GameObjective): string {
const first =
  (obj.description || "")
    .split("\n")
    .map((l) => l.replace(/^[•\-\s]+/, "").trim())
    .find(Boolean) || "";
if (first.length <= 72) return first;
const cut = first.slice(0, 70);
const lastSpace = cut.lastIndexOf(" ");
return (lastSpace > 40 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
393}
394 
395function isSelected(obj: GameObjective) {
return selected.value === obj;
397}
398 
399function select(obj: GameObjective) {
selected.value = obj;
401}
402 
403async function rollFresh() {
composing.value = true;
composeError.value = null;
composeNotice.value = null;
const { objective, fellBackToCurated } = await gameStore.fetchAIObjective(
  {
    era: steerEra.value || undefined,
    theme: steerTheme.value || undefined,
  },
  seenTitles.value,
);
composing.value = false;
415 
if (objective) {
  fresh.value = objective;
  selected.value = objective; // auto-select the fresh one so Begin is one tap away
  // Remember it so the next reroll avoids it (a curated fallback lands here too,
  // so even a fallback won't be re-served).
  if (!seenTitles.value.includes(objective.title))
    seenTitles.value.push(objective.title);
  // The steer was set but generation fell back to curated (#127): say so quietly,
  // so a dropped steer doesn't read as "steering is broken".
  if (fellBackToCurated)
    composeNotice.value =
      "Couldn't compose a fresh objective right now — here's a curated one.";
} else {
  composeError.value =
    "The archives went quiet — pick one above, or try composing again.";
}
432}
433 
434// Leave replay mode for the full browse/compose briefing — this run becomes an original.
435function exitReplay() {
gameStore.clearReplayState();
selected.value = null;
438}
439 
440const beginError = ref<string | null>(null);
441 
442async function begin() {
// In replay mode the seeded objective IS the choice (no browse list rendered);
// otherwise it's whatever the player selected. Either way chooseObjective commits
// it verbatim — replay runs no generation, just reuses the captured objective.
const objective = replay.value?.objective ?? selected.value;
if (!objective || beginning.value) return;
beginError.value = null;
beginning.value = true;
// Charges one run from the balance. If out of runs, chooseObjective raises the
// paywall (gameStore.outOfRuns) and opens the run-packs modal; no run starts.
const started = await gameStore.chooseObjective(objective);
beginning.value = false;
// A false return that ISN'T the paywall (outOfRuns) or capacity gate is a real
// failure — ensureRunId/run-commit threw and set gameStore.error. Surface it here,
// or the button just flashes 'Charting the timeline…' and reverts silently (#233).
if (!started && !gameStore.outOfRuns && !gameStore.atCapacity) {
  beginError.value =
    gameStore.error || "Could not start the run. Please try again.";
}
461}
462</script>

Identity-based selection: stored as the object, compared with ===, auto-set on compose.

components/MissionSelect.vue · 462 lines

components/MissionSelect.vue462 lines · Vue

⋯ 349 lines hidden (lines 1–349)1<template>
<!-- Mission briefing: choose (or compose) the run's grand objective, as a ledger. -->
<div data-testid="mission-select" class="ew-fade-in max-w-4xl mx-auto">
  <!-- Replay (issue #89): seeded from a shared run's objective. A focused view — this
       one objective, ready to play — not the full browse/compose ledger. -->
  <template v-if="replay">
    <div class="mb-7">
      <p class="ew-label">Replay a shared objective</p>
      <h2
        class="ew-serif ew-fg text-2xl sm:text-3xl font-semibold mt-1.5 leading-tight"
      >
        Take on this very objective
      </h2>
      <RemixCreditLine :credit="replayCredit" class="mt-2" />
    </div>
16 
    <div
      data-testid="replay-objective"
      class="border-t border-b ew-line py-4 flex items-start gap-3 ew-tint"
      :style="{ borderLeft: '2px solid var(--ew-accent)' }"
    >
      <span
        class="w-6 shrink-0 text-center text-lg leading-none select-none"
        aria-hidden="true"
        >{{ replay.objective.icon }}</span
      >
      <span class="min-w-0 flex-1">
        <span class="flex items-center gap-2 flex-wrap">
          <h3 class="ew-fg font-semibold">{{ replay.objective.title }}</h3>
          <span v-if="replay.objective.era" class="ew-label">{{
            replay.objective.era
          }}</span>
        </span>
        <!-- whitespace-pre-line: the brief is newline-separated "• " bullet lines (#82). -->
        <span
          class="block ew-muted text-sm mt-0.5 leading-relaxed whitespace-pre-line"
          >{{ replay.objective.description }}</span
        >
      </span>
    </div>
41 
    <div
      class="mt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
    >
      <button
        type="button"
        data-testid="replay-exit"
        class="ew-tap ew-hover-fg text-xs ew-mono uppercase tracking-wide"
        @click="exitReplay"
      >
        ← Choose a different objective
      </button>
      <button
        type="button"
        data-testid="begin-button"
        class="ew-btn ew-btn--primary"
        :disabled="beginning"
        @click="begin"
      >
        {{ beginning ? "Charting the timeline…" : "Play this objective" }}
        <span aria-hidden="true">▷</span>
      </button>
    </div>
    <p
      v-if="beginError"
      data-testid="begin-error"
      class="text-xs ew-bad mt-2"
    >
      {{ beginError }}
    </p>
  </template>
72 
  <!-- Normal briefing: choose a curated objective, or compose a fresh one. -->
  <template v-else>
    <div class="mb-7">
      <p class="ew-label">Choose your crusade</p>
      <h2
        class="ew-serif ew-fg text-2xl sm:text-3xl font-semibold mt-1.5 leading-tight"
      >
        What will you set right?
      </h2>
      <p class="ew-muted text-sm mt-2 max-w-xl">
        Five messages. Anyone in history. One world to remake. Pick the cause
        that will define your run — or have a fresh one composed.
      </p>
    </div>
87 
    <!-- Objectives as compact hairline rows: a one-line hook keeps the whole list
       scannable at a glance (you see many at once, not two). The full brief unfolds
       only on the chosen row, so the page stays short until you commit to reading
       one. A freshly composed objective is appended last, above the compose button. -->
    <div
      role="radiogroup"
      aria-label="Choose an objective"
      class="border-t ew-line"
    >
      <button
        v-for="obj in options"
        :key="(obj === fresh ? 'fresh:' : 'curated:') + obj.title"
        type="button"
        data-testid="objective-option"
        role="radio"
        :aria-checked="isSelected(obj)"
        class="w-full text-left flex items-start gap-3 pr-2 pl-3 border-b ew-line transition ew-hover"
        :class="isSelected(obj) ? 'ew-tint py-3.5' : 'py-2.5'"
        :style="{
          borderLeft: `2px solid ${isSelected(obj) ? 'var(--ew-accent)' : 'transparent'}`,
        }"
        @click="select(obj)"
      >
        <span
          class="ew-dot mt-1.5"
          :class="isSelected(obj) ? 'ew-dot--accent' : 'ew-dot--hollow'"
          aria-hidden="true"
        />
        <span
          class="w-6 shrink-0 text-center text-lg leading-none select-none"
          aria-hidden="true"
          >{{ obj.icon }}</span
        >
        <span class="min-w-0 flex-1">
          <span class="flex items-center gap-2 flex-wrap">
            <h3 class="ew-fg font-semibold">{{ obj.title }}</h3>
            <span v-if="obj.era" class="ew-label">{{ obj.era }}</span>
            <span
              v-if="obj === fresh"
              data-testid="fresh-badge"
              class="ew-accent text-[10px] uppercase tracking-wider"
            >
              ✨ freshly composed
            </span>
          </span>
          <!-- Collapsed: a single-line hook (truncate is the backstop; hookFor already
             trims to ~70 chars). Chosen: the full brief, whitespace-pre-line for the
             newline-separated "• " bullet lines (issue #82), faded in as it unfolds. -->
          <span
            v-if="!isSelected(obj)"
            data-testid="objective-hook"
            class="block ew-muted text-sm mt-0.5 leading-snug truncate"
            >{{ hookFor(obj) }}</span
          >
          <span
            v-else
            data-testid="objective-brief"
            class="ew-fade-in block ew-muted text-sm mt-1 leading-relaxed whitespace-pre-line"
            >{{ obj.description }}</span
          >
        </span>
      </button>
    </div>
151 
    <!-- Steer a fresh composition: two closed-enum dials, set before composing.
       "No preference" leaves an axis to the model. Closed enums only (no free
       text), so an out-of-bounds objective can't be steered into existence. -->
    <fieldset class="mt-6 pt-4 border-t ew-line">
      <legend class="ew-label">
        Steer a fresh composition <span class="ew-faint">· optional</span>
      </legend>
      <div class="mt-2 flex flex-col sm:flex-row gap-3 sm:gap-4">
        <label class="flex-1 min-w-0 text-sm">
          <span class="ew-label block mb-1">Era</span>
          <select
            v-model="steerEra"
            data-testid="steer-era"
            class="ew-select text-sm"
            aria-label="Steer the era"
          >
            <option value="">No preference</option>
            <option v-for="era in OBJECTIVE_ERAS" :key="era" :value="era">
              {{ era }}
            </option>
          </select>
        </label>
        <label class="flex-1 min-w-0 text-sm">
          <span class="ew-label block mb-1">Theme</span>
          <select
            v-model="steerTheme"
            data-testid="steer-theme"
            class="ew-select text-sm"
            aria-label="Steer the theme"
          >
            <option value="">No preference</option>
            <option
              v-for="theme in OBJECTIVE_THEMES"
              :key="theme"
              :value="theme"
            >
              {{ theme }}
            </option>
          </select>
        </label>
      </div>
    </fieldset>
194 
    <!-- Actions: compose a fresh objective · begin the run -->
    <div
      class="mt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"
    >
      <div class="flex flex-col items-start gap-1">
        <button
          type="button"
          data-testid="compose-objective"
          class="ew-btn text-sm"
          :disabled="composing"
          @click="rollFresh"
        >
          <span aria-hidden="true">✨</span>
          {{
            composing
              ? "Composing a fresh fate…"
              : "Compose a fresh objective with AI"
          }}
        </button>
        <p
          v-if="activeSteer"
          data-testid="active-steer"
          class="text-xs ew-muted"
        >
          Steering: {{ activeSteer }}
        </p>
        <p
          v-if="composeError"
          data-testid="compose-error"
          class="text-xs ew-bad"
        >
          {{ composeError }}
        </p>
        <!-- Quiet degrade (#127): a steered compose fell back to curated. Non-blocking
           and muted (not the ew-bad error tone) — the player has a valid objective
           ready; this just tells the truth that the steer was dropped. -->
        <p
          v-if="composeNotice"
          data-testid="compose-degraded"
          class="text-xs ew-muted"
        >
          {{ composeNotice }}
        </p>
      </div>
239 
      <button
        type="button"
        data-testid="begin-button"
        class="ew-btn ew-btn--primary"
        :disabled="!selected || beginning"
        @click="begin"
      >
        {{ beginning ? "Charting the timeline…" : "Begin rewriting history" }}
        <span aria-hidden="true">▷</span>
      </button>
      <p
        v-if="beginError"
        data-testid="begin-error"
        class="text-xs ew-bad mt-2"
      >
        {{ beginError }}
      </p>
    </div>
  </template>
259 
  <!-- Paywall: the free run is spent. The run-packs modal opens automatically on
       the refused commit; this persistent notice lets the player reopen it if they
       dismissed it. -->
  <div
    v-if="gameStore.outOfRuns"
    data-testid="paywall"
    class="mt-4 pt-4 border-t ew-line"
  >
    <p class="text-sm ew-fg font-semibold">
      You're out of runs — your free run is spent.
    </p>
    <p class="ew-muted text-xs mt-0.5">
      Grab a pack to keep rewriting history. One-time, never expires.
    </p>
    <button
      type="button"
      data-testid="open-packs"
      class="ew-btn ew-btn--primary mt-3"
      @click="economyStore.openBuyModal()"
    >
      See run packs <span aria-hidden="true">→</span>
    </button>
  </div>
283 
  <!-- Capacity: the global spend cap paused new runs (in-progress runs continue). -->
  <p
    v-else-if="gameStore.atCapacity"
    data-testid="at-capacity"
    class="text-sm ew-bad mt-3"
  >
    The timeline is at capacity right now — please try again shortly.
  </p>
292 
  <!-- Compliance disclosure, shown at the start of every run (Anthropic Usage
       Policy: AI disclosure at session start; outputs may be inaccurate; an
       adults-only posture). -->
  <p
    data-testid="ai-disclosure"
    class="ew-faint text-xs leading-relaxed mt-8 pt-4 border-t ew-line max-w-2xl"
  >
    The historical figures here are played by AI, not real people, and every
    reply is AI-generated
    <span class="ew-fg"
      >alternate history — dramatized fiction, not historical fact</span
    >; don't rely on it as accurate. Intended for adults (18+).
  </p>
</div>
307</template>
308 
309<script setup lang="ts">
310/**
* MissionSelect — the opening briefing. Curated objectives + a live-composed one, as
* borderless hairline rows; selection uses identity, not titles. Nothing commits
* until Begin, so a freshly composed objective can be previewed and reconsidered.
*/
315import { ref, shallowRef, computed } from "vue";
316import { useGameStore } from "~/stores/game";
317import { useEconomyStore } from "~/stores/economy";
318import type { RemixCredit } from "~/utils/run-snapshot";
319import {
listCuratedObjectives,
OBJECTIVE_ERAS,
OBJECTIVE_THEMES,
type GameObjective,
type ObjectiveEra,
type ObjectiveTheme,
326} from "~/utils/objectives";
327 
328const gameStore = useGameStore();
329const economyStore = useEconomyStore();
330 
331// Replay mode (issue #89): set when seeded from a shared run's objective. The briefing
332// shows just that objective, ready to play; Begin commits it verbatim (no generation).
333const replay = computed(() => gameStore.replayState);
334// The "remixed from" line above the seeded objective. The title is omitted (the objective
335// is shown right below), so it reads "Remixed from <name>" / "…an anonymous run", linking
336// back to the source when still shared.
337const replayCredit = computed<RemixCredit>(() => ({
attribution: replay.value?.sourceAttribution ?? null,
objectiveTitle: "",
sourceToken: replay.value?.sourceToken ?? null,
341}));
342 
343const curated = listCuratedObjectives();
344// shallowRef, not ref: selection is by object identity (isSelected uses ===), and the
345// curated options are plain objects. A deep ref would return a *reactive proxy* on
346// `.value`, so `selected.value === obj` (raw) would be false — the row would highlight
347// on hover but its radio dot / aria-checked would never flip. shallowRef stores the
348// value as-is, keeping identity intact.
349const fresh = shallowRef<GameObjective | null>(null);
350const selected = shallowRef<GameObjective | null>(null);
⋯ 44 lines hidden (lines 351–394)351// Titles composed this session, fed back as the avoid-list so each reroll lands
352// somewhere new (#95). Resets naturally: MissionSelect is mounted only while there's
353// no objective (v-if in play.vue), so a new run remounts it with an empty list.
354const seenTitles = ref<string[]>([]);
355const composing = ref(false);
356// Hard-failure surface: no objective came back at all (red, ew-bad).
357const composeError = ref<string | null>(null);
358// Quiet-degrade surface (#127): a steered compose fell back to curated, so the
359// steer was dropped. Distinct from composeError — the player still has a valid
360// objective; this notice is muted and informational, not an error.
361const composeNotice = ref<string | null>(null);
362const beginning = ref(false);
363 
364// Composition steer (closed enums; '' = no preference, left to the model).
365const steerEra = ref<ObjectiveEra | "">("");
366const steerTheme = ref<ObjectiveTheme | "">("");
367 
368// A freshly composed objective appends to the END, so it surfaces right above the
369// compose button that produced it rather than displacing the curated pool. Selection
370// is identity-based (isSelected uses ===), so it stays selected wherever it sits.
371const options = computed(() =>
fresh.value ? [...curated, fresh.value] : curated,
373);
374 
375// A plain-language echo of the active steer, surfaced by the compose button.
376const activeSteer = computed(
() => [steerEra.value, steerTheme.value].filter(Boolean).join(" · ") || null,
378);
379 
380// A one-line hook for the collapsed row — the first brief line, bullet marker
381// stripped, trimmed to ~70 chars at a word boundary. The full description (the "• "
382// bullet list, #82) is only revealed on the chosen row, keeping the list scannable.
383function hookFor(obj: GameObjective): string {
const first =
  (obj.description || "")
    .split("\n")
    .map((l) => l.replace(/^[•\-\s]+/, "").trim())
    .find(Boolean) || "";
if (first.length <= 72) return first;
const cut = first.slice(0, 70);
const lastSpace = cut.lastIndexOf(" ");
return (lastSpace > 40 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
393}
394 
395function isSelected(obj: GameObjective) {
return selected.value === obj;
397}
398 
399function select(obj: GameObjective) {
⋯ 14 lines hidden (lines 400–413)400  selected.value = obj;
401}
402 
403async function rollFresh() {
composing.value = true;
composeError.value = null;
composeNotice.value = null;
const { objective, fellBackToCurated } = await gameStore.fetchAIObjective(
  {
    era: steerEra.value || undefined,
    theme: steerTheme.value || undefined,
  },
  seenTitles.value,
);
composing.value = false;
415 
if (objective) {
  fresh.value = objective;
  selected.value = objective; // auto-select the fresh one so Begin is one tap away
  // Remember it so the next reroll avoids it (a curated fallback lands here too,
⋯ 43 lines hidden (lines 420–462)420    // so even a fallback won't be re-served).
  if (!seenTitles.value.includes(objective.title))
    seenTitles.value.push(objective.title);
  // The steer was set but generation fell back to curated (#127): say so quietly,
  // so a dropped steer doesn't read as "steering is broken".
  if (fellBackToCurated)
    composeNotice.value =
      "Couldn't compose a fresh objective right now — here's a curated one.";
} else {
  composeError.value =
    "The archives went quiet — pick one above, or try composing again.";
}
432}
433 
434// Leave replay mode for the full browse/compose briefing — this run becomes an original.
435function exitReplay() {
gameStore.clearReplayState();
selected.value = null;
438}
439 
440const beginError = ref<string | null>(null);
441 
442async function begin() {
// In replay mode the seeded objective IS the choice (no browse list rendered);
// otherwise it's whatever the player selected. Either way chooseObjective commits
// it verbatim — replay runs no generation, just reuses the captured objective.
const objective = replay.value?.objective ?? selected.value;
if (!objective || beginning.value) return;
beginError.value = null;
beginning.value = true;
// Charges one run from the balance. If out of runs, chooseObjective raises the
// paywall (gameStore.outOfRuns) and opens the run-packs modal; no run starts.
const started = await gameStore.chooseObjective(objective);
beginning.value = false;
// A false return that ISN'T the paywall (outOfRuns) or capacity gate is a real
// failure — ensureRunId/run-commit threw and set gameStore.error. Surface it here,
// or the button just flashes 'Charting the timeline…' and reverts silently (#233).
if (!started && !gameStore.outOfRuns && !gameStore.atCapacity) {
  beginError.value =
    gameStore.error || "Could not start the run. Please try again.";
}
461}
462</script>

A test only the fix can pass

The existing compose tests assert the option count grows by one and that the "freshly composed" badge exists, but neither checks where the row lands — so a top-vs-bottom regression would sail through. This new test closes that gap: it composes, then asserts the last row is the badged, selected one, and that the first row is still curated.

It is discriminating by construction: on the old [fresh, ...curated] ordering the last row is a curated objective with no badge, so the badge assertion fails. Verified by reverting the source line and watching only this test go red. The mock mints a run id for /api/run because compose sends an x-run-id header.

Composes, then checks the fresh row is last, badged, and selected — and the first row is not the fresh one.

tests/unit/components/MissionSelect.spec.ts · 430 lines

tests/unit/components/MissionSelect.spec.ts430 lines · TypeScript

⋯ 189 lines hidden (lines 1–189)1import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
2import { mount, flushPromises } from "@vue/test-utils";
3import { setActivePinia, createPinia } from "pinia";
4import MissionSelect from "../../../components/MissionSelect.vue";
5import { useGameStore } from "../../../stores/game";
6import { useEconomyStore } from "../../../stores/economy";
7import { listCuratedObjectives } from "../../../server/utils/objectives";
8 
9const FRESH = {
title: "Chart the Southern Stars",
description: "Map the unknown skies a century early and redraw every voyage.",
era: "Age of sail",
icon: "🌌",
14};
15 
16describe("MissionSelect", () => {
let gameStore: ReturnType<typeof useGameStore>;
let economyStore: ReturnType<typeof useEconomyStore>;
let fetchMock: ReturnType<typeof vi.fn>;
20 
beforeEach(() => {
  setActivePinia(createPinia());
  gameStore = useGameStore();
  economyStore = useEconomyStore();
  fetchMock = vi.fn();
  vi.stubGlobal("$fetch", fetchMock);
});
28 
afterEach(() => {
  vi.unstubAllGlobals();
  vi.restoreAllMocks();
});
33 
it("offers every curated objective to choose from", () => {
  const wrapper = mount(MissionSelect);
  const options = wrapper.findAll('[data-testid="objective-option"]');
  expect(options.length).toBe(listCuratedObjectives().length);
});
39 
it("renders the chosen brief newline-aware so bullet lines do not collapse (issue #82)", async () => {
  const wrapper = mount(MissionSelect);
  const firstOption = wrapper.findAll('[data-testid="objective-option"]')[0];
  // The full brief unfolds only on the chosen row (compact list + expand), so
  // select it first; the grounded briefs are multi-line "• " bullets and this
  // class keeps them on separate rows at mission select (the issue's render site).
  await firstOption.trigger("click");
  const brief = wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .find(".whitespace-pre-line");
  expect(brief.exists()).toBe(true);
  expect(brief.text()).toContain("• ");
});
53 
it("keeps the list compact: a one-line hook per row, the full brief only when chosen", async () => {
  const wrapper = mount(MissionSelect);
  const options = wrapper.findAll('[data-testid="objective-option"]');
  // Nothing chosen yet — every row is a scannable single-line hook, no full brief.
  expect(wrapper.findAll('[data-testid="objective-hook"]').length).toBe(
    options.length,
  );
  expect(wrapper.findAll('[data-testid="objective-brief"]').length).toBe(0);
62 
  await options[0].trigger("click");
  // The chosen row swaps its hook for the brief; the rest stay collapsed hooks.
  const after = wrapper.findAll('[data-testid="objective-option"]');
  expect(after[0].find('[data-testid="objective-brief"]').exists()).toBe(
    true,
  );
  expect(after[0].find('[data-testid="objective-hook"]').exists()).toBe(
    false,
  );
  expect(after[1].find('[data-testid="objective-hook"]').exists()).toBe(true);
  expect(after[1].find('[data-testid="objective-brief"]').exists()).toBe(
    false,
  );
  // The hook is a short single line, not the full multi-bullet brief.
  const hook = after[1].find('[data-testid="objective-hook"]');
  expect(hook.text().length).toBeLessThanOrEqual(72);
  expect(hook.text()).not.toContain("• ");
});
81 
it("disables Begin until an objective is selected", async () => {
  const wrapper = mount(MissionSelect);
  expect(
    wrapper.find('[data-testid="begin-button"]').attributes("disabled"),
  ).toBeDefined();
87 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  expect(
    wrapper.find('[data-testid="begin-button"]').attributes("disabled"),
  ).toBeUndefined();
});
95 
it("marks the clicked objective as selected — aria-checked + the radio dot", async () => {
  // Regression: a plain ref returns a reactive PROXY on .value, so the identity
  // check `selected.value === obj` failed for the raw curated objects — the row
  // tinted on hover but the radio never registered. selection must visibly stick.
  const wrapper = mount(MissionSelect);
  const options = wrapper.findAll('[data-testid="objective-option"]');
  expect(options[1].attributes("aria-checked")).toBe("false");
103 
  await options[1].trigger("click");
105 
  expect(options[1].attributes("aria-checked")).toBe("true");
  expect(options[0].attributes("aria-checked")).toBe("false");
  expect(options[1].find(".ew-dot").classes()).toContain("ew-dot--accent");
  expect(options[0].find(".ew-dot").classes()).toContain("ew-dot--hollow");
});
111 
it("commits the chosen curated objective on Begin", async () => {
  const curated = listCuratedObjectives();
  // begin() now fails closed: /api/run must mint, then run-commit must succeed.
  fetchMock.mockImplementation((url: string) =>
    url === "/api/run"
      ? Promise.resolve({ runId: "r-1" })
      : Promise.resolve({}),
  );
  const wrapper = mount(MissionSelect);
121 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises(); // begin() commits the run (async) before the objective lands
127 
  expect(gameStore.currentObjective?.title).toBe(curated[0].title);
  expect(gameStore.objectiveProgress).toBe(0);
});
131 
it("surfaces a run-commit failure at Begin instead of reverting silently (#233)", async () => {
  // /api/run mints, but the commit fails with a plain server error — not the paywall
  // or capacity gate — so chooseObjective sets gameStore.error and returns false.
  fetchMock.mockImplementation((url: string) =>
    url === "/api/run"
      ? Promise.resolve({ runId: "r-1" })
      : Promise.reject(new Error("boom")),
  );
  const wrapper = mount(MissionSelect);
141 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
147 
  // The run did not start, and the failure is now VISIBLE (it was silent before #233).
  expect(gameStore.currentObjective).toBeNull();
  const err = wrapper.find('[data-testid="begin-error"]');
  expect(err.exists()).toBe(true);
  expect(err.text()).toContain("Could not start the run");
  // The button reverted from its 'Charting the timeline…' loading label.
  expect(wrapper.find('[data-testid="begin-button"]').text()).toContain(
    "Begin rewriting history",
  );
});
158 
it("composes a fresh objective, features it, and begins with it", async () => {
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({ success: true, objective: FRESH });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    return Promise.resolve({}); // run-commit
  });
  const wrapper = mount(MissionSelect);
  const before = wrapper.findAll('[data-testid="objective-option"]').length;
168 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
171 
  expect(fetchMock).toHaveBeenCalledWith(
    "/api/objective",
    expect.objectContaining({
      method: "GET",
      headers: expect.objectContaining({ "x-run-id": expect.any(String) }),
    }),
  );
  expect(wrapper.findAll('[data-testid="objective-option"]').length).toBe(
    before + 1,
  );
  expect(wrapper.find('[data-testid="fresh-badge"]').exists()).toBe(true);
183 
  // The fresh objective auto-selects, so Begin commits it directly.
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises(); // begin() commits the run (async) before the objective lands
  expect(gameStore.currentObjective?.title).toBe(FRESH.title);
});
189 
it("appends the composed objective to the bottom of the list, auto-selected", async () => {
  // It lands last (just above the compose button), not at the top — and auto-selects,
  // so Begin is one tap away regardless of where it sits in the list.
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({ success: true, objective: FRESH });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" }); // aiHeaders mints a run id
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
  const before = wrapper.findAll('[data-testid="objective-option"]').length;
201 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
204 
  const options = wrapper.findAll('[data-testid="objective-option"]');
  const last = options[options.length - 1];
  // The fresh row is the LAST one, carries the badge, and is the selected row.
  expect(options.length).toBe(before + 1);
  expect(last.find('[data-testid="fresh-badge"]').exists()).toBe(true);
  expect(last.text()).toContain(FRESH.title);
  expect(last.attributes("aria-checked")).toBe("true");
  // The curated rows keep their lead; none of them is the fresh one.
  expect(options[0].find('[data-testid="fresh-badge"]').exists()).toBe(false);
});
⋯ 216 lines hidden (lines 215–430)215 
it("renders era + theme steer pickers, defaulting to no preference", () => {
  const wrapper = mount(MissionSelect);
  const era = wrapper.find('[data-testid="steer-era"]');
  const theme = wrapper.find('[data-testid="steer-theme"]');
  expect(era.exists()).toBe(true);
  expect(theme.exists()).toBe(true);
  expect((era.element as HTMLSelectElement).value).toBe("");
  expect((theme.element as HTMLSelectElement).value).toBe("");
  // Nothing surfaced until an axis is picked.
  expect(wrapper.find('[data-testid="active-steer"]').exists()).toBe(false);
});
227 
it("forwards the chosen era + theme as query params when composing, and surfaces them", async () => {
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({ success: true, objective: FRESH });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
  await wrapper.find('[data-testid="steer-era"]').setValue("Antiquity");
  await wrapper
    .find('[data-testid="steer-theme"]')
    .setValue("Science & Medicine");
240 
  // The active steer is surfaced once set.
  expect(wrapper.find('[data-testid="active-steer"]').text()).toContain(
    "Antiquity · Science & Medicine",
  );
245 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
248 
  expect(fetchMock).toHaveBeenCalledWith(
    "/api/objective",
    expect.objectContaining({
      method: "GET",
      query: { era: "Antiquity", theme: "Science & Medicine" },
    }),
  );
});
257 
it('omits an axis left at "no preference"', async () => {
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({ success: true, objective: FRESH });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
  await wrapper.find('[data-testid="steer-era"]').setValue("Medieval");
267 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
270 
  expect(fetchMock).toHaveBeenCalledWith(
    "/api/objective",
    expect.objectContaining({
      query: { era: "Medieval" },
    }),
  );
});
278 
it("shows an error and leaves the run unstarted when composing fails", async () => {
  fetchMock.mockResolvedValue({ success: false });
  const wrapper = mount(MissionSelect);
282 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
285 
  expect(wrapper.find('[data-testid="compose-error"]').exists()).toBe(true);
  expect(gameStore.currentObjective).toBeNull();
});
289 
it("shows a quiet notice (not an error) when a steered compose falls back to curated (#127)", async () => {
  // The server returns a valid objective AND flags the dropped steer; the
  // briefing surfaces a muted, non-blocking line — never the red compose-error.
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({
        success: true,
        objective: FRESH,
        fellBackToCurated: true,
      });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
  await wrapper.find('[data-testid="steer-era"]').setValue("Antiquity");
305 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
308 
  // A usable objective still landed and auto-selected — the notice is non-blocking.
  expect(wrapper.find('[data-testid="fresh-badge"]').exists()).toBe(true);
  expect(
    wrapper.find('[data-testid="begin-button"]').attributes("disabled"),
  ).toBeUndefined();
  // The quiet notice shows (muted tone); the red error does NOT.
  const notice = wrapper.find('[data-testid="compose-degraded"]');
  expect(notice.exists()).toBe(true);
  expect(notice.text()).toContain("curated one");
  expect(notice.classes()).toContain("ew-muted");
  expect(wrapper.find('[data-testid="compose-error"]').exists()).toBe(false);
});
321 
it("shows no dropped-steer notice on a normal successful compose (#127)", async () => {
  // No flag (or false) → the common path stays silent, no noise.
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/objective")
      return Promise.resolve({ success: true, objective: FRESH });
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
331 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
334 
  expect(wrapper.find('[data-testid="fresh-badge"]').exists()).toBe(true);
  expect(wrapper.find('[data-testid="compose-degraded"]').exists()).toBe(
    false,
  );
});
340 
it("shows the paywall and does not start the run when out of runs (402)", async () => {
  // Begin succeeds (run minted), then the commit is refused 402 → paywall.
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    if (url === "/api/run-commit") return Promise.reject({ statusCode: 402 });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
349 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
355 
  expect(wrapper.find('[data-testid="paywall"]').exists()).toBe(true);
  expect(gameStore.currentObjective).toBeNull();
});
359 
it("shows the at-capacity notice and does not start when the spend cap is hit (503)", async () => {
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    if (url === "/api/run-commit")
      return Promise.reject({ statusCode: 503, data: { atCapacity: true } });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
368 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
374 
  expect(wrapper.find('[data-testid="at-capacity"]').exists()).toBe(true);
  expect(wrapper.find('[data-testid="paywall"]').exists()).toBe(false);
  expect(gameStore.currentObjective).toBeNull();
});
379 
it("opens the run-packs modal automatically when out of runs (402)", async () => {
  // The buy buttons now live in RunPacksModal; the refused commit opens it and
  // loads the catalog. The paywall keeps a "See run packs" button to reopen it.
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    if (url === "/api/run-commit") return Promise.reject({ statusCode: 402 });
    if (url === "/api/packs")
      return Promise.resolve({
        packs: [
          { id: "courier", label: "Courier", priceCents: 500, runs: 7 },
        ],
      });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
395 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
401 
  expect(wrapper.find('[data-testid="open-packs"]').exists()).toBe(true);
  expect(economyStore.buyModalOpen).toBe(true);
  expect(economyStore.packs).toEqual([
    { id: "courier", label: "Courier", priceCents: 500, runs: 7 },
  ]);
});
408 
it("reopens the run-packs modal from the paywall button", async () => {
  fetchMock.mockImplementation((url: string) => {
    if (url === "/api/run") return Promise.resolve({ runId: "r-1" });
    if (url === "/api/run-commit") return Promise.reject({ statusCode: 402 });
    if (url === "/api/packs") return Promise.resolve({ packs: [] });
    return Promise.resolve({});
  });
  const wrapper = mount(MissionSelect);
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
422 
  // Dismiss, then reopen via the persistent paywall button.
  economyStore.closeBuyModal();
  expect(economyStore.buyModalOpen).toBe(false);
  await wrapper.find('[data-testid="open-packs"]').trigger("click");
  await flushPromises();
  expect(economyStore.buyModalOpen).toBe(true);
});
430});