Clarify the free-to-play first screen

What changed, and why

The opening objective screen is the first thing a new, signed-out visitor sees. It was quietly telling them the wrong thing: that they had to sign in to play.

The culprit was a block titled "Sign in for the full archive" — a bold heading over two full-width Google/Discord buttons — sitting between the list of objectives and the Begin button. Visually it looked like a step you had to clear. It isn't. Anonymous players get three starter objectives (listStarterObjectives) and can play them with no account at all; signing in only widens the slate and unlocks AI compose. The one real gate is server-side, in server/api/objective.get.ts — never this screen.

Three small moves fix it, plus one shared CSS cap that had been making every sign-in button in the app stretch edge-to-edge. Nothing about the signed-in briefing (full slate, steer dials, compose) changes.

The gate that wasn't

Two edits to the anonymous briefing. First, the subtitle now says the quiet part out loud — you can start right now, no account. Second, the sign-in nudge moves out from between the list and Begin down to below Begin, so the choose → Begin flow is unbroken and sign-in reads as an optional footer.

The nudge itself is reframed to match. The bold ew-fg heading becomes a quiet ew-label eyebrow (the same 11px uppercase used by the steer fieldset's legend), and the copy leads with reassurance — "The three above are yours to play right now" — before the upsell. It now sits exactly where the steer dials sit for a signed-in player: a secondary, optional row, not a barrier.

The anonymous subtitle, and the relocated + reframed nudge (now after the Begin action).

components/MissionSelect.vue · 507 lines

components/MissionSelect.vue507 lines · Vue

⋯ 81 lines hidden (lines 1–81)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 v-if="canCompose" 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>
      <p v-else class="ew-muted text-sm mt-2 max-w-xl">
        Five messages. Anyone in history. One world to remake. Pick one of the
        three below and start right now — no account needed.
      </p>
    </div>
⋯ 172 lines hidden (lines 91–262)91 
    <!-- 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 leads. -->
    <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>
155 
    <!-- 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 v-if="canCompose" 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>
198 
    <!-- 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 v-if="canCompose" 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>
243 
      <button
        type="button"
        data-testid="begin-button"
        class="ew-btn ew-btn--primary sm:ml-auto"
        :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>
262 
    <!-- Sign-in nudge (anonymous only), an optional footer BELOW Begin — never a
       gate before it. The three starter objectives are fully playable signed-out
       (listStarterObjectives); signing in only widens the slate and unlocks AI
       compose (the real gate is server/api/objective.get.ts). Framed quiet: an
       ew-label eyebrow like the steer fieldset's legend, reassurance first, then the
       capped-width provider buttons — so it reads as "unlock more", not "sign in to
       play". -->
    <div
      v-if="showSignInNudge"
      data-testid="objective-signin-nudge"
      class="mt-6 pt-4 border-t ew-line"
    >
      <p class="ew-label">Unlock the full archive</p>
      <p class="ew-muted text-sm mt-1.5 mb-3 max-w-xl">
        The three above are yours to play right now. Sign in to open the full
        slate of objectives — and compose your own with AI.
      </p>
      <SignInForm />
    </div>
⋯ 226 lines hidden (lines 282–507)282    </template>
283 
  <!-- 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>
307 
  <!-- 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>
316 
  <!-- 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"
  >
    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>
331</template>
332 
333<script setup lang="ts">
334/**
* 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.
*/
339import { ref, shallowRef, computed } from "vue";
340import { useGameStore } from "~/stores/game";
341import { useEconomyStore } from "~/stores/economy";
342import type { RemixCredit } from "~/utils/run-snapshot";
343import {
listCuratedObjectives,
listStarterObjectives,
OBJECTIVE_ERAS,
OBJECTIVE_THEMES,
type GameObjective,
type ObjectiveEra,
type ObjectiveTheme,
351} from "~/utils/objectives";
352 
353const gameStore = useGameStore();
354const economyStore = useEconomyStore();
355 
356// Anonymous (not-signed-in) players get a fixed three-objective starter sampler and no
357// AI compose; signing in unlocks the full curated slate + custom composition.
358// `accountAnonymous` comes from /api/balance (true only for a real anonymous Supabase
359// session, not the device-fallback path); the compose route enforces the same gate
360// server-side. Balance loads async on the play shell, so hold the restricted view until
361// it's known (runsRemaining stays null until then) — otherwise the full slate + compose
362// would flash for an anonymous visitor (the common case) then collapse. Failing toward
363// restricted is safe: the server is the real gate, and a signed-in player only ever
364// gains options once the balance resolves.
365const balanceLoaded = computed(() => economyStore.runsRemaining !== null);
366const canCompose = computed(
() => balanceLoaded.value && !economyStore.accountAnonymous,
368);
369const showSignInNudge = computed(
() => balanceLoaded.value && economyStore.accountAnonymous,
371);
372 
373// Replay mode (issue #89): set when seeded from a shared run's objective. The briefing
374// shows just that objective, ready to play; Begin commits it verbatim (no generation).
375const replay = computed(() => gameStore.replayState);
376// The "remixed from" line above the seeded objective. The title is omitted (the objective
377// is shown right below), so it reads "Remixed from <name>" / "…an anonymous run", linking
378// back to the source when still shared.
379const replayCredit = computed<RemixCredit>(() => ({
attribution: replay.value?.sourceAttribution ?? null,
objectiveTitle: "",
sourceToken: replay.value?.sourceToken ?? null,
383}));
384 
385// Anonymous players see only the starter sampler; signed-in players get the full curated
386// pool. Held to the sampler until the account is known signed-in (canCompose), so the
387// full slate never flashes for the common anonymous visitor. Same object references
388// either way, so identity-based selection (isSelected) still holds.
389const curated = computed(() =>
canCompose.value ? listCuratedObjectives() : listStarterObjectives(),
391);
392// shallowRef, not ref: selection is by object identity (isSelected uses ===), and the
393// curated options are plain objects. A deep ref would return a *reactive proxy* on
394// `.value`, so `selected.value === obj` (raw) would be false — the row would highlight
395// on hover but its radio dot / aria-checked would never flip. shallowRef stores the
396// value as-is, keeping identity intact.
397const fresh = shallowRef<GameObjective | null>(null);
398const selected = shallowRef<GameObjective | null>(null);
399// Titles composed this session, fed back as the avoid-list so each reroll lands
400// somewhere new (#95). Resets naturally: MissionSelect is mounted only while there's
401// no objective (v-if in play.vue), so a new run remounts it with an empty list.
402const seenTitles = ref<string[]>([]);
403const composing = ref(false);
404// Hard-failure surface: no objective came back at all (red, ew-bad).
405const composeError = ref<string | null>(null);
406// Quiet-degrade surface (#127): a steered compose fell back to curated, so the
407// steer was dropped. Distinct from composeError — the player still has a valid
408// objective; this notice is muted and informational, not an error.
409const composeNotice = ref<string | null>(null);
410const beginning = ref(false);
411 
412// Composition steer (closed enums; '' = no preference, left to the model).
413const steerEra = ref<ObjectiveEra | "">("");
414const steerTheme = ref<ObjectiveTheme | "">("");
415 
416const options = computed(() =>
fresh.value ? [fresh.value, ...curated.value] : curated.value,
418);
419 
420// A plain-language echo of the active steer, surfaced by the compose button.
421const activeSteer = computed(
() => [steerEra.value, steerTheme.value].filter(Boolean).join(" · ") || null,
423);
424 
425// A one-line hook for the collapsed row — the first brief line, bullet marker
426// stripped, trimmed to ~70 chars at a word boundary. The full description (the "• "
427// bullet list, #82) is only revealed on the chosen row, keeping the list scannable.
428function 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() + "…";
438}
439 
440function isSelected(obj: GameObjective) {
return selected.value === obj;
442}
443 
444function select(obj: GameObjective) {
selected.value = obj;
446}
447 
448async 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;
460 
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.";
}
477}
478 
479// Leave replay mode for the full browse/compose briefing — this run becomes an original.
480function exitReplay() {
gameStore.clearReplayState();
selected.value = null;
483}
484 
485const beginError = ref<string | null>(null);
486 
487async 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.";
}
506}
507</script>

Sign-in buttons at a real width

SignInForm is shared across four surfaces: the objective briefing, the run-packs modal, the balance popover, and settings. Its buttons were width: 100%, so in any wide host they stretched the full container width — off-brand for provider buttons, and part of what made the nudge feel like a mandatory banner.

The fix is one rule: cap the form column at 22rem. The buttons keep width: 100% and simply fill that capped column, so they render at a standard sign-in width everywhere. Because it's a max, a narrow host like the balance popover still fills naturally.

The class hook on the root, and the single capping rule that the width:100% buttons fill.

components/SignInForm.vue · 280 lines

components/SignInForm.vue280 lines · Vue

1<template>
<div data-testid="signin-form" class="signin-form">
  <p v-if="hint" class="ew-faint text-xs leading-relaxed mb-2">{{ hint }}</p>
⋯ 179 lines hidden (lines 4–182)4    <!-- The clickwrap (#330): a real checkbox, required before either provider
       button arms. The tick is parked in the legal store and recorded
       server-side once the OAuth return lands signed-in — the record must key
       on the FINAL account id, which doesn't exist until then. Copy is the
       owner's locked clickwrap line; the links open in a new tab so the form
       (and the tick) aren't lost mid-sign-in. -->
  <label
    id="signin-accept-label"
    class="signin-accept flex items-start gap-2 ew-faint text-xs leading-relaxed mb-2.5"
  >
    <input
      v-model="accepted"
      type="checkbox"
      data-testid="signin-accept"
      class="mt-0.5 shrink-0"
    />
    <span>
      I'm 18 or older and I agree to the
      <NuxtLink
        to="/terms"
        target="_blank"
        rel="noopener"
        class="underline ew-hover-fg"
        >Terms of Service</NuxtLink
      >
      and
      <NuxtLink
        to="/privacy"
        target="_blank"
        rel="noopener"
        class="underline ew-hover-fg"
        >Privacy Policy</NuxtLink
      >.
    </span>
  </label>
  <div class="flex flex-col gap-2">
    <!--
      Google — the official "Sign in with Google" button (per
      developers.google.com/identity/branding-guidelines): the 4-color G mark,
      a sans label, light theme on the cream ground and the dark theme under
      everwhen's dark mode. Wording stays "Continue with…", an approved phrase.
    -->
    <button
      type="button"
      data-testid="signin-google"
      class="signin-btn signin-btn--google"
      :disabled="busy || !accepted"
      aria-describedby="signin-accept-label"
      @click="start('google')"
    >
      <svg
        class="signin-btn__icon"
        width="18"
        height="18"
        viewBox="0 0 48 48"
        aria-hidden="true"
      >
        <path
          fill="#EA4335"
          d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
        />
        <path
          fill="#4285F4"
          d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
        />
        <path
          fill="#FBBC05"
          d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
        />
        <path
          fill="#34A853"
          d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
        />
      </svg>
      <span class="signin-btn__label">Continue with Google</span>
    </button>
80 
    <!--
      Discord — the official brand button (per discord.com/branding): Blurple
      #5865F2 with the white Clyde mark and white label. One look in both
      everwhen themes; brand color carries it on either ground.
    -->
    <button
      type="button"
      data-testid="signin-discord"
      class="signin-btn signin-btn--discord"
      :disabled="busy || !accepted"
      aria-describedby="signin-accept-label"
      @click="start('discord')"
    >
      <svg
        class="signin-btn__icon"
        width="21"
        height="16"
        viewBox="0 0 127.14 96.36"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
        />
      </svg>
      <span class="signin-btn__label">Continue with Discord</span>
    </button>
  </div>
  <p v-if="error" data-testid="signin-error" class="text-xs ew-bad mt-1.5">
    {{ error }}
  </p>
</div>
113</template>
114 
115<script setup lang="ts">
116/**
* OAuth sign-in (Google / Discord), for new and returning players alike. The
* visitor is already an anonymous Supabase user; tapping a provider runs
* signInWithOAuth, which bounces to the provider and returns to /play, where
* utils/auth-return.ts finalizes the PKCE code. A NEW player lands on a fresh
* account (with its own free-run grant); a RETURNING player signs into theirs.
* The provider initiation is delegated to startOAuthSignIn (see utils/sign-in.ts).
*
* The two buttons follow each provider's official brand guidelines (Google's
* 4-color mark + light/dark themes; Discord's Blurple field + white mark), so
* the sign-in reads as the real thing. See the scoped styles below.
*
* The clickwrap (#330): both buttons stay disabled until the 18+/Terms/Privacy
* checkbox is ticked. The tick is parked in the legal store (it must survive
* the provider redirect) and un-parked if the redirect fails to start; the
* /play return leg flushes it to POST /api/terms-acceptance under the final
* account id.
*/
134import { ref } from "vue";
135import { startOAuthSignIn, type OAuthProvider } from "~/utils/sign-in";
136import { useLegalStore } from "~/stores/legal";
137 
138defineProps<{ hint?: string }>();
139 
140const supabase = useSupabaseClient();
141const legal = useLegalStore();
142const busy = ref(false);
143const accepted = ref(false);
144const error = ref<string | null>(null);
145 
146async function start(provider: OAuthProvider) {
if (busy.value || !accepted.value) return;
busy.value = true;
error.value = null;
// Park the tick BEFORE the call: on success the browser navigates away, and
// the flag has to already be on disk to survive into the return leg.
legal.markPendingAccept();
try {
  const redirectTo =
    typeof window !== "undefined"
      ? `${window.location.origin}/play`
      : undefined;
  const result = await startOAuthSignIn(provider, redirectTo, {
    signInWithOAuth: (params) => supabase.auth.signInWithOAuth(params),
  });
  // On 'redirecting' the browser navigates away; only surface an error and re-enable.
  if (result.status === "error") {
    legal.clearPendingAccept();
    error.value = result.message;
    busy.value = false;
  }
} catch {
  legal.clearPendingAccept();
  error.value = "Could not start sign-in. Please try again.";
  busy.value = false;
}
172}
173</script>
174 
175<style scoped>
176/*
* Official provider sign-in buttons. The brand colors here are EXTERNAL
* constants (Google + Discord brand guidelines), deliberately not --ew- tokens:
* the parchment palette doesn't own them, and a sign-in button must read as the
* genuine article on any ground. The label uses the platform sans — Google
* specifies Roboto and Discord gg sans, both proprietary, so we approximate
* rather than ship a webfont's bytes (the same no-bundled-asset stance the rest
* of the app takes).
*/
185/* Cap the form to a standard sign-in column so the provider buttons read as real
 sign-in buttons, not a full-bleed banner. In a wide host (the objective briefing,
 settings) an edge-to-edge OAuth button is off-brand and makes an optional sign-in
 feel mandatory; narrower hosts (the balance popover) still fill, since this is a
 max. The buttons keep width:100% and simply fill this capped column. */
signin-form {
max-width: 22rem;
192}
signin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 40px;
⋯ 81 lines hidden (lines 200–280)200  padding: 0 12px;
border-radius: 4px;
border: 1px solid transparent;
font-family: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
cursor: pointer;
transition:
  background-color var(--ew-dur-1) var(--ew-ease),
  border-color var(--ew-dur-1) var(--ew-ease),
  box-shadow var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
213}
signin-btn__icon {
flex: 0 0 auto;
216}
217/* The clickwrap checkbox rides the accent so it reads as the one action here. */
signin-accept input {
accent-color: var(--ew-accent);
220}
signin-btn:active:not(:disabled) {
transform: translateY(0.5px) scale(0.985);
223}
signin-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
227}
signin-btn:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: 2px;
231}
232 
233/* Google — light theme. */
signin-btn--google {
background: #ffffff;
border-color: #747775;
color: #1f1f1f;
238}
signin-btn--google:hover:not(:disabled) {
/* Google's "state layer": a faint blue wash plus a soft elevation shadow. */
background: #f7fafe;
box-shadow:
  0 1px 2px rgba(60, 64, 67, 0.3),
  0 1px 3px 1px rgba(60, 64, 67, 0.15);
245}
246/* Google — dark theme, used under everwhen's dark mode (.dark on <html>). */
dark .signin-btn--google {
background: #131314;
border-color: #8e918f;
color: #e3e3e3;
251}
dark .signin-btn--google:hover:not(:disabled) {
background: #1e1f20;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.45);
255}
256 
257/* Discord — Blurple brand button; the mark + label are white on either ground. */
signin-btn--discord {
background: #5865f2;
border-color: #5865f2;
color: #ffffff;
262}
signin-btn--discord:hover:not(:disabled) {
background: #4752c4;
border-color: #4752c4;
266}
signin-btn--discord:active:not(:disabled) {
background: #3c45a5;
border-color: #3c45a5;
270}
271 
272@media (prefers-reduced-motion: reduce) {
.signin-btn {
  transition: none;
}
.signin-btn:active:not(:disabled) {
  transform: none;
}
279}
280</style>

Pinning the intent

The corrected order is the whole point, so a test pins it. It mounts the anonymous briefing and asserts the sign-in nudge appears after the Begin button in document order, and that the "no account needed" reassurance is present. This fails on the pre-fix layout, where the nudge rendered before the actions row — so a future refactor can't silently slide it back into a gate.

Document-order + reassurance assertions — a regression guard, not coverage padding.

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

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

⋯ 71 lines hidden (lines 1–71)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,
listStarterObjectives,
10} from "../../../server/utils/objectives";
11 
12const FRESH = {
title: "Chart the Southern Stars",
description: "Map the unknown skies a century early and redraw every voyage.",
era: "Age of sail",
icon: "🌌",
17};
18 
19describe("MissionSelect", () => {
let gameStore: ReturnType<typeof useGameStore>;
let economyStore: ReturnType<typeof useEconomyStore>;
let fetchMock: ReturnType<typeof vi.fn>;
23 
beforeEach(() => {
  setActivePinia(createPinia());
  gameStore = useGameStore();
  economyStore = useEconomyStore();
  // Default precondition: a signed-in account with a loaded balance, so the briefing
  // offers the full curated slate + AI compose. The anonymous-gate cases flip
  // accountAnonymous; the pre-load case clears runsRemaining (null until /api/balance
  // resolves, which the component treats as "anonymity not yet known").
  economyStore.runsRemaining = 5;
  economyStore.accountAnonymous = false;
  fetchMock = vi.fn();
  vi.stubGlobal("$fetch", fetchMock);
});
37 
afterEach(() => {
  vi.unstubAllGlobals();
  vi.restoreAllMocks();
});
42 
it("offers every curated objective to choose from (signed in)", () => {
  const wrapper = mount(MissionSelect);
  const options = wrapper.findAll('[data-testid="objective-option"]');
  expect(options.length).toBe(listCuratedObjectives().length);
});
48 
it("anonymous: offers only the 3 starter objectives, the sign-in nudge, and no compose", () => {
  economyStore.accountAnonymous = true; // balance already loaded (runsRemaining set)
  const wrapper = mount(MissionSelect);
52 
  const options = wrapper.findAll('[data-testid="objective-option"]');
  expect(options.length).toBe(listStarterObjectives().length);
  expect(options.length).toBe(3);
  // The shown objectives ARE the starter sampler, in order.
  expect(options.map((o) => o.find("h3").text())).toEqual(
    listStarterObjectives().map((obj) => obj.title),
  );
  // No custom rolling: the compose button and its steer dials are gone.
  expect(wrapper.find('[data-testid="compose-objective"]').exists()).toBe(
    false,
  );
  expect(wrapper.find('[data-testid="steer-era"]').exists()).toBe(false);
  // The sign-in nudge (with the OAuth form) takes their place.
  expect(
    wrapper.find('[data-testid="objective-signin-nudge"]').exists(),
  ).toBe(true);
  expect(wrapper.find('[data-testid="signin-form"]').exists()).toBe(true);
});
71 
it("anonymous: keeps sign-in an optional footer BELOW Begin, not a gate before it", () => {
  // The whole point of the anonymous briefing: you can play the three starters with
  // no account. So the choose → Begin flow must be unbroken, with the sign-in nudge
  // sitting AFTER Begin as an "unlock more" footer — never wedged between the list and
  // Begin, where it reads as a required step. Pre-fix, the nudge rendered before the
  // actions row; this pins the corrected order so it can't silently regress.
  economyStore.accountAnonymous = true;
  const wrapper = mount(MissionSelect);
  const html = wrapper.html();
  const beginAt = html.indexOf('data-testid="begin-button"');
  const nudgeAt = html.indexOf('data-testid="objective-signin-nudge"');
  expect(beginAt).toBeGreaterThan(-1);
  expect(nudgeAt).toBeGreaterThan(beginAt);
  // And the briefing tells an anonymous visitor up front they need no account to play.
  expect(wrapper.text()).toContain("no account needed");
});
88 
⋯ 401 lines hidden (lines 89–489)89  it("anonymous: can still pick a starter objective and Begin the run", async () => {
  economyStore.accountAnonymous = true;
  fetchMock.mockImplementation((url: string) =>
    url === "/api/run"
      ? Promise.resolve({ runId: "r-1" })
      : Promise.resolve({}),
  );
  const wrapper = mount(MissionSelect);
97 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
103 
  expect(gameStore.currentObjective?.title).toBe(
    listStarterObjectives()[0].title,
  );
});
108 
it("before balance loads: holds the restricted view (3 objectives, no compose, no nudge)", () => {
  // runsRemaining null = /api/balance hasn't resolved, so anonymity is unknown. The
  // briefing must NOT flash the full slate + compose (the common visitor is anonymous),
  // nor a sign-in nudge at a would-be signed-in player. Restricted, quietly.
  economyStore.runsRemaining = null;
  const wrapper = mount(MissionSelect);
115 
  expect(wrapper.findAll('[data-testid="objective-option"]').length).toBe(3);
  expect(wrapper.find('[data-testid="compose-objective"]').exists()).toBe(
    false,
  );
  expect(
    wrapper.find('[data-testid="objective-signin-nudge"]').exists(),
  ).toBe(false);
});
124 
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("• ");
});
138 
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);
147 
  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("• ");
});
166 
it("disables Begin until an objective is selected", async () => {
  const wrapper = mount(MissionSelect);
  expect(
    wrapper.find('[data-testid="begin-button"]').attributes("disabled"),
  ).toBeDefined();
172 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  expect(
    wrapper.find('[data-testid="begin-button"]').attributes("disabled"),
  ).toBeUndefined();
});
180 
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");
188 
  await options[1].trigger("click");
190 
  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");
});
196 
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);
206 
  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
212 
  expect(gameStore.currentObjective?.title).toBe(curated[0].title);
  expect(gameStore.objectiveProgress).toBe(0);
});
216 
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);
226 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
232 
  // 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",
  );
});
243 
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;
253 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
256 
  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);
268 
  // 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);
});
274 
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);
});
286 
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");
299 
  // The active steer is surfaced once set.
  expect(wrapper.find('[data-testid="active-steer"]').text()).toContain(
    "Antiquity · Science & Medicine",
  );
304 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
307 
  expect(fetchMock).toHaveBeenCalledWith(
    "/api/objective",
    expect.objectContaining({
      method: "GET",
      query: { era: "Antiquity", theme: "Science & Medicine" },
    }),
  );
});
316 
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");
326 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
329 
  expect(fetchMock).toHaveBeenCalledWith(
    "/api/objective",
    expect.objectContaining({
      query: { era: "Medieval" },
    }),
  );
});
337 
it("shows an error and leaves the run unstarted when composing fails", async () => {
  fetchMock.mockResolvedValue({ success: false });
  const wrapper = mount(MissionSelect);
341 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
344 
  expect(wrapper.find('[data-testid="compose-error"]').exists()).toBe(true);
  expect(gameStore.currentObjective).toBeNull();
});
348 
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");
364 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
367 
  // 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);
});
380 
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);
390 
  await wrapper.find('[data-testid="compose-objective"]').trigger("click");
  await flushPromises();
393 
  expect(wrapper.find('[data-testid="fresh-badge"]').exists()).toBe(true);
  expect(wrapper.find('[data-testid="compose-degraded"]').exists()).toBe(
    false,
  );
});
399 
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);
408 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
414 
  expect(wrapper.find('[data-testid="paywall"]').exists()).toBe(true);
  expect(gameStore.currentObjective).toBeNull();
});
418 
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);
427 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
433 
  expect(wrapper.find('[data-testid="at-capacity"]').exists()).toBe(true);
  expect(wrapper.find('[data-testid="paywall"]').exists()).toBe(false);
  expect(gameStore.currentObjective).toBeNull();
});
438 
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);
454 
  await wrapper
    .findAll('[data-testid="objective-option"]')[0]
    .trigger("click");
  await wrapper.find('[data-testid="begin-button"]').trigger("click");
  await flushPromises();
460 
  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 },
  ]);
});
467 
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();
481 
  // 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);
});
489});

Result

Driven in the real app across 375–1280, light and dark. The three starters are plainly playable now; Begin follows the list directly and lights terracotta once an objective is chosen; the sign-in footer is quiet and its buttons are a normal width.

Anonymous, desktop (light) — the primary fix: reassurance in the subtitle, Begin right after the list, a quiet 'Unlock the full archive' footer with standard-width buttons.

An objective selected — the brief unfolds, the accent border + dot register the choice, and Begin lights terracotta as the clear primary action.

Anonymous, desktop (dark) — Google's dark-theme button, Discord blurple, both correctly sized; no dark-mode regression.

Anonymous, mobile (375) — objectives stack, Begin is a full-width tap target, and the buttons fill the narrow column.