Render the streaming Chronicle epilogue in its settled shape

What changed, and why

On the final win/lose screen, the Chronicle epilogue looked different while it was being written than once it finished. Streaming, it was one raw paragraph capped at half the column with the title inline as plain text; settled, it was a full-width titled article with separated serif paragraphs. So the moment the telling landed it jumped in both width (~50% to 100%) and formatting.

The fix is a reuse, not a redesign: render the streaming state through the exact markup the settled epilogue already uses, sourced from the live buffer and parsed by the same helper the in-game Chronicle's live view relies on. The account now wears its final shape as it streams, so the settle is a quiet cross-fade with no reflow. Blast radius is one component (plus one new test); the settled rendering, the store, and the parser are untouched.

The streaming branch, reshaped to match the settled one

Both tellings live in the same <Transition mode="out-in">. The streaming branch (shown first) now emits the same structure as the settled branch below it: a titled <h4> with the identical classes, then a v-for of <p> paragraphs with the identical classes — no width cap. The only streaming-specific touch is the ink cursor at the writing tip, and aria-busy while it composes.

Streaming: a titled heading + separated paragraphs off liveEpilogue, ink cursor at the tip.

components/EndGameScreen.vue · 622 lines

components/EndGameScreen.vue622 lines · Vue

⋯ 117 lines hidden (lines 1–117)1<template>
<div
  v-if="
    gameStore.gameStatus === 'victory' || gameStore.gameStatus === 'defeat'
  "
  ref="dialogRef"
  data-testid="end-game-screen"
  role="dialog"
  aria-modal="true"
  :aria-labelledby="headingId"
  class="end-screen fixed inset-0 z-50 overflow-y-auto"
  :class="isVictory ? 'end--win' : 'end--loss'"
  @keydown="onKeydown"
>
  <div class="max-w-4xl mx-auto px-5 py-8">
    <!-- Verdict masthead: a struck seal, the verdict, the objective + final %. The
         win is illuminated (glowing terracotta seal, serif verdict in ink); the loss
         is somber (a flat, cold seal and a muted verdict) — the two read apart instantly. -->
    <div class="text-center border-b ew-line pb-6">
      <div
        class="verdict-seal"
        :class="isVictory ? 'is-win' : 'is-loss'"
        aria-hidden="true"
      >
        {{ isVictory ? "✦" : "⊘" }}
      </div>
      <h2
        v-if="isVictory"
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="victory-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-fg mt-3 outline-none"
      >
        History Rewritten
      </h2>
      <h2
        v-else
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="defeat-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-muted mt-3 outline-none"
      >
        The Timeline Held
      </h2>
      <p
        class="text-sm mt-2.5 flex items-center justify-center gap-2 flex-wrap"
      >
        <span class="ew-muted inline-flex items-center gap-1.5">
          <span aria-hidden="true">{{
            gameStore.currentObjective?.icon
          }}</span>
          <strong data-testid="objective-title" class="font-semibold">{{
            gameStore.currentObjective?.title || "Historical Mission"
          }}</strong>
        </span>
        <span class="ew-hair-c" aria-hidden="true">·</span>
        <span
          class="ew-mono font-bold"
          :class="isVictory ? 'ew-ok' : 'ew-bad'"
        >
          <span data-testid="final-progress"
            >{{ gameStore.objectiveProgress }}%</span
          >
          rewritten
        </span>
      </p>
69 
      <RemixCreditLine
        v-if="remixCredit"
        :credit="remixCredit"
        class="mt-2.5"
      />
75 
      <p
        v-if="!isVictory"
        data-testid="defeat-explanation"
        class="ew-muted text-sm mt-3 max-w-prose mx-auto"
      >
        Your five messages are spent. What you changed remains — but it was
        not enough, and the objective slipped away.
      </p>
84 
      <div
        v-if="victoryEfficiency"
        data-testid="efficiency-display"
        class="mt-3 ew-mono text-sm"
      >
        <span class="ew-ok font-semibold">{{ victoryPhrase }}</span>
        <span class="ew-muted">
          · {{ victoryEfficiency.messagesUsed }}/{{
            TOTAL_MESSAGES
          }}
          used<span v-if="victoryEfficiency.messagesSaved > 0">
            · {{ victoryEfficiency.messagesSaved }} saved</span
          ></span
        >
        <span v-if="victoryEfficiency.isEarlyVictory" class="ew-ok">
          · 🌟 to spare</span
        >
      </div>
    </div>
104 
    <!-- The Chronicle's final telling — the epilogue. While the terminal telling is
         still being written (epiloguePending), we show the "final account…" wait, NOT
         the prior turn's stale, pre-ending telling. When it lands it cross-fades in
         (mirroring Chronicle.vue's rewrite reveal); a failed final refresh clears
         pending and falls back to the prior telling, so the panel never hangs. -->
    <div
      v-if="chronicle || epiloguePending"
      data-testid="end-chronicle"
      class="mt-6"
    >
      <span class="ew-label ew-label--rule"
        ><span aria-hidden="true">📖</span> The Chronicle</span
      >
      <Transition :name="epilogueTransition" mode="out-in">
        <!-- The final account being WRITTEN — the SAME titled article as the settled
             epilogue below, parsed from the live stream so it already wears its final
             shape (full width, titled heading, separated paragraphs); an ink cursor
             marks the writing tip. Nothing relayouts when the telling lands. Mirrors
             Chronicle.vue's live view via the shared parser in utils/chronicle.ts. -->
        <article
          v-if="epiloguePending && streamingNow"
          key="epilogue-streaming"
          data-testid="end-chronicle-streaming"
          aria-busy="true"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ liveEpilogue.title
            }}<span
              v-if="!liveEpilogue.paragraphs.length"
              class="ink-cursor"
              aria-hidden="true"
            />
          </h4>
          <p
            v-for="(para, i) in liveEpilogue.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para
            }}<span
              v-if="i === liveEpilogue.paragraphs.length - 1"
              class="ink-cursor"
              aria-hidden="true"
            />
          </p>
        </article>
⋯ 469 lines hidden (lines 154–622)154          <div
          v-else-if="epiloguePending"
          key="epilogue-loading"
          data-testid="end-chronicle-loading"
          class="ew-faint italic text-sm"
        >
          The chronicler sets down the final account…
        </div>
        <article
          v-else-if="chronicle"
          key="epilogue-body"
          data-testid="end-chronicle-body"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ chronicle.title }}
          </h4>
          <p
            v-for="(para, i) in chronicle.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para }}
          </p>
        </article>
      </Transition>
    </div>
183 
    <!-- The words you sent — the keepsake: your actual messages into the past -->
    <div v-if="dispatches.length" data-testid="dispatches" class="mt-7">
      <span class="ew-label ew-label--rule">The words you sent</span>
      <ul class="space-y-3.5">
        <li v-for="(d, i) in dispatches" :key="i">
          <p class="ew-label">
            to {{ d.figure }}<span v-if="d.era"> · {{ d.era }}</span>
          </p>
          <blockquote
            class="ew-serif ew-fg text-base leading-relaxed border-l-2 ew-line pl-3 mt-1"
          >
            "{{ d.text }}"
          </blockquote>
        </li>
      </ul>
    </div>
200 
    <!-- Stats — derived from the real resolved turns -->
    <div data-testid="game-summary" class="mt-7">
      <span class="ew-label ew-label--rule">How it played out</span>
      <div class="flex flex-wrap gap-10">
        <!-- "Peaked at X%" — shown only when the run slipped from its high point
             (the peak sits above the floored final %). The case it exists for is a
             staked last dispatch that crit-fails to 0% from a real peak, where the
             final % alone reads "as if you did nothing" (#129). A clean win never
             shows it: its peak IS the final 100%. -->
        <div v-if="showPeak" data-testid="peak-progress">
          <div class="ew-mono text-3xl font-extrabold ew-accent leading-none">
            {{ gameStore.peakProgress }}%
          </div>
          <div class="ew-label mt-1">peaked at</div>
        </div>
        <div data-testid="message-efficiency">
          <div class="ew-mono text-3xl font-extrabold ew-fg leading-none">
            {{ messagesUsed }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed === 1 ? "message" : "messages" }} sent
          </div>
        </div>
        <div v-if="gameSummary.bestRoll" data-testid="best-roll">
          <div class="ew-mono text-3xl font-extrabold ew-ok leading-none">
            {{ gameSummary.bestRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed >= 2 ? "best roll" : "the roll that did it" }} ·
            {{ gameSummary.bestRoll.diceOutcome }}
          </div>
        </div>
        <div
          v-if="gameSummary.worstRoll && messagesUsed >= 2"
          data-testid="worst-roll"
        >
          <div class="ew-mono text-3xl font-extrabold ew-bad leading-none">
            {{ gameSummary.worstRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            worst roll · {{ gameSummary.worstRoll.diceOutcome }}
          </div>
        </div>
        <!-- The run's luck read (#129's sibling, issue #165): how the DICE themselves
             ran — the natural d20s, before any craft tilt — against their 10.5 mean.
             It names a variance-driven loss as cold dice, not bad skill. Shown once
             there are ≥2 rolls to read "overall" (a lone roll is already "the roll
             that did it" above). The number borrows the same red/green/ink the
             best/worst stats use; the tooltip carries the below-median detail. -->
        <div
          v-if="gameSummary.luck"
          data-testid="luck-read"
          :title="luckTitle"
        >
          <div
            class="ew-mono text-3xl font-extrabold leading-none"
            :class="luckClass"
          >
            {{ gameSummary.luck.averageRoll.toFixed(1) }}
          </div>
          <div class="ew-label mt-1">
            avg vs {{ gameSummary.luck.expectedRoll }} · {{ luckPhrase }}
          </div>
        </div>
      </div>
    </div>
267 
    <!-- The history you wrote — the Spine itself, exactly as it filled in during
         the run. Read-only here: no live "▷ now" present marker, no "the timeline
         trembles…" empty state. Same component the player scrolled and tapped on
         the board, so the verdict's history reads as richly as it did in play —
         valence dots, ⚡/⚑ badges, the roll, and the Δ equation all carry over. -->
    <div v-if="timeline.length > 0" class="mt-6">
      <TimelineLedger readonly />
    </div>
276 
    <!-- Share this run (issue #88) — once the snapshot is durably saved. Proud of the
         rewrite? Post it: the public page, the unfurl, the share card. -->
    <div v-if="canShare" class="mt-8">
      <ShareControls :run-id="shareRunId" :share-text="shareText" />
    </div>
282 
    <div class="mt-9 border-t ew-line pt-6 flex items-center gap-3 flex-wrap">
      <button
        ref="playAgainRef"
        type="button"
        data-testid="play-again-button"
        class="ew-btn ew-btn--primary"
        @click="playAgain"
      >
        Try a new timeline <span aria-hidden="true">▷</span>
      </button>
      <!-- The finished run just joined your saved-runs history, so the end screen
           offers an obvious way to reach it: a secondary button beside the primary
           "Try a new timeline" (the button-styled /runs link mirrors the
           retrospective's "Back to your runs", pages/runs/[id].vue), carrying the ◷
           glyph and "Your runs" wording from the account popover (RunsBalance.vue). -->
      <NuxtLink
        to="/runs"
        data-testid="end-your-runs-link"
        class="ew-btn inline-flex items-center gap-1.5"
      >
        <span aria-hidden="true">◷</span> Your runs
      </NuxtLink>
      <span class="ew-faint text-xs inline-flex items-center gap-1.5">
        <span
          class="ew-dot"
          :class="isVictory ? 'ew-dot--ok' : 'ew-dot--bad'"
          aria-hidden="true"
        />
        this timeline is written.
      </span>
    </div>
  </div>
</div>
316</template>
317 
318<script setup lang="ts">
319/**
* EndGameScreen — the mission debrief. A full-bleed takeover (not a modal card):
* verdict line, the Chronicle epilogue + big-number stat trio, and the history you
* wrote. All stats derive from the real resolved turns.
*/
324import { ref, computed, watch, nextTick } from "vue";
325import { TOTAL_MESSAGES } from "~/utils/game-config";
326import { useGameStore } from "~/stores/game";
327import { useChronicleStore } from "~/stores/chronicle";
328import { usePrefersReducedMotion } from "~/composables/usePrefersReducedMotion";
329import { buildShareText, type RemixCredit } from "~/utils/run-snapshot";
330import { parseLiveChronicle } from "~/utils/chronicle";
331 
332const gameStore = useGameStore();
333const chronicleStore = useChronicleStore();
334 
335// When this run is a replay (issue #89), the "remixed from" credit, from the live seed —
336// shown on the end screen the moment the replay resolves. The title is omitted (the
337// objective is already in the masthead above), so it reads "Remixed from <source>".
338const remixCredit = computed<RemixCredit | null>(() =>
gameStore.replayState
  ? {
      attribution: gameStore.replayState.sourceAttribution,
      objectiveTitle: "",
      sourceToken: gameStore.replayState.sourceToken,
    }
  : null,
346);
347const reduced = usePrefersReducedMotion();
348 
349const headingId = `end-game-heading-${Math.random().toString(36).slice(2, 11)}`;
350 
351// Modal focus management: it's a true takeover (aria-modal), so when it opens we
352// move focus to the VERDICT heading (tabindex=-1: announced, focusable, outside
353// the Tab cycle), trap Tab inside, and restore focus when the run ends. Focusing
354// the heading — not the bottom Play Again button — also means the screen opens at
355// the top: the verdict and the Chronicle epilogue are the first things seen, not
356// scrolled past below the fold.
357const dialogRef = ref<HTMLElement | null>(null);
358const headingRef = ref<HTMLElement | null>(null);
359const playAgainRef = ref<HTMLElement | null>(null);
360let prevFocus: HTMLElement | null = null;
361 
362watch(
() => gameStore.gameStatus,
async (s) => {
  if (typeof document === "undefined") return;
  if (s === "victory" || s === "defeat") {
    prevFocus = document.activeElement as HTMLElement | null;
    await nextTick();
    if (dialogRef.value) dialogRef.value.scrollTop = 0;
    headingRef.value?.focus();
  } else if (prevFocus) {
    prevFocus.focus?.();
    prevFocus = null;
  }
},
376);
377 
378function onKeydown(e: KeyboardEvent) {
if (e.key !== "Tab" || !dialogRef.value) return;
const focusables = dialogRef.value.querySelectorAll<HTMLElement>(
  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])',
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;
if (e.shiftKey && active === first) {
  e.preventDefault();
  last.focus();
} else if (!e.shiftKey && active === last) {
  e.preventDefault();
  first.focus();
}
394}
395 
396const isVictory = computed(() => gameStore.gameStatus === "victory");
397const victoryEfficiency = computed(() => gameStore.getVictoryEfficiency());
398 
399// The verdict never deflates: spending every message is reframed as "Hard-won," not
400// the limp "Standard." Only the laudatory tiers keep their rating as an adjective.
401const victoryPhrase = computed(() => {
const rating = victoryEfficiency.value?.efficiencyRating;
if (!rating) return "Victory";
return rating === "Standard" ? "Hard-won victory" : `${rating} victory`;
405});
406const messagesUsed = computed(
() => TOTAL_MESSAGES - gameStore.remainingMessages,
408);
409const gameSummary = computed(() => gameStore.gameSummary);
410 
411// The luck read's styling + phrasing (#165). Cold dice borrow the loss red, hot dice
412// the win green, an even run the neutral ink — the same at-a-glance colour language
413// as the best/worst-roll stats beside it. The phrasing stays honest: it names "the
414// dice," never the player's craft. The tooltip adds the below-median detail the
415// compact label leaves out.
416const luckClass = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold" ? "ew-bad" : v === "hot" ? "ew-ok" : "ew-fg";
419});
420const luckPhrase = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold"
  ? "the dice ran cold"
  : v === "hot"
    ? "the dice ran hot"
    : "the dice ran even";
427});
428const luckTitle = computed(() => {
const l = gameSummary.value.luck;
if (!l) return undefined;
return `The dice ran ${l.verdict}: your rolls averaged ${l.averageRoll.toFixed(1)} vs ${l.expectedRoll} expected, ${l.belowMedianCount} of ${l.rollCount} below the median.`;
432});
433 
434// "Peaked at X%" surfaces only when the run lost ground from its high-water mark —
435// the peak above the final %. The case it answers is a staked last dispatch that
436// crit-fails to 0% from a real peak, where the floored final % alone would read "as
437// if the player did nothing" (#129). A clean win never shows it (peak === final 100%).
438const showPeak = computed(
() => gameStore.peakProgress > gameStore.objectiveProgress,
440);
441 
442// Share affordance (issue #88): only for a run that's been durably saved (so there's a
443// server-side record to make public). `canShare` true ⟹ runId is a real saved uuid.
444const canShare = computed(
() => gameStore.runSnapshotSaved && !!gameStore.runId,
446);
447const shareRunId = computed(() => gameStore.runId ?? "");
448const shareText = computed(() =>
buildShareText(
  gameStore.currentObjective?.title ?? "",
  isVictory.value ? "victory" : "defeat",
  gameStore.objectiveProgress,
),
454);
455const timeline = computed(() => gameStore.timelineEvents);
456const chronicle = computed(() => chronicleStore.chronicle);
457// The epilogue (terminal telling) is still being written — show the wait, never the
458// prior turn's stale telling. The cross-fade mirrors Chronicle.vue and is dropped
459// under prefers-reduced-motion (the empty name disables the Transition's classes).
460const epiloguePending = computed(() => chronicleStore.epiloguePending);
461const epilogueTransition = computed(() => (reduced.value ? "" : "epilogue"));
462// The epilogue is being written right now — show the live buffer (only when its
463// stream narrates the live ledger, never a superseded prior stream).
464const streamingNow = computed(
() =>
  chronicleStore.chronicleStreaming &&
  chronicleStore.chronicleStreamLen === gameStore.timelineEvents.length &&
  chronicleStore.chronicleStream.length > 0,
469);
470// The epilogue mid-stream, parsed into the settled {title, paragraphs} shape so the
471// live account already wears its final form — full width, titled heading, separated
472// paragraphs — and nothing relayouts when the terminal telling lands. Same parser and
473// intent as Chronicle.vue's live view (utils/chronicle.ts).
474const liveEpilogue = computed(() =>
parseLiveChronicle(chronicleStore.chronicleStream),
476);
477 
478// The keepsake: the player's verbatim messages, paired with whom/when they reached.
479const dispatches = computed(() => {
const users = gameStore.messageHistory.filter((m) => m.sender === "user");
const events = gameStore.timelineEvents;
return users.map((m, i) => ({
  text: m.text,
  figure: m.figureName || events[i]?.figureName || "the past",
  era: events[i]?.era || "",
}));
487});
488 
489// The page owns the FULL reset (store + figure input + composer), so Play Again
490// emits instead of resetting the store directly — the two reset paths used to
491// diverge here, leaving the previous run's figure stranded in the input.
492const emit = defineEmits<{ "play-again": [] }>();
493const playAgain = () => {
emit("play-again");
495};
496</script>
497 
498<style scoped>
499/* The epilogue reveal — the terminal telling cross-fades in over the "final account…"
 wait, the same gentle opacity fade Chronicle.vue uses for a rewrite. Gated by the
 transition NAME (empty under prefers-reduced-motion), so reduced-motion gets an
 instant swap with no classes attached. */
epilogue-enter-active,
epilogue-leave-active {
transition: opacity var(--ew-dur-3) var(--ew-ease);
506}
epilogue-enter-from,
epilogue-leave-to {
opacity: 0;
510}
511 
512/* The epilogue being written — an ink cursor at the writing tip (the prose itself
 reuses the settled telling's serif article, so it needs no separate type styling). */
ink-cursor {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--ew-accent);
animation: ink-blink 1s steps(2, start) infinite;
522}
523@keyframes ink-blink {
0%,
100% {
  opacity: 1;
}
50% {
  opacity: 0;
}
531}
532@media (prefers-reduced-motion: reduce) {
.ink-cursor {
  animation: none;
  opacity: 0.7;
}
537}
538 
539/* Win and loss share the page frame but not its mood. The win is illuminated — a warm
 wash blooms from the top; the loss is a colder, dimmer ground that has settled back. */
end-screen {
background: var(--ew-bg);
animation: end-in var(--ew-dur-3) var(--ew-ease) both;
544}
545@keyframes end-in {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
552}
553@media (prefers-reduced-motion: reduce) {
.end-screen {
  animation: none;
}
557}
end--win {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-accent) 13%, transparent),
    transparent 68%
  ),
  var(--ew-bg);
566}
end--loss {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-bad) 6%, transparent),
    transparent 60%
  ),
  var(--ew-bg);
575}
576 
577/* The struck seal — the verdict's emblem. The win seal glows like fresh sealing wax;
 the loss seal is a cold, flat stamp. */
verdict-seal {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
font-size: 1.6rem;
line-height: 1;
588}
verdict-seal.is-win {
color: var(--ew-accent);
border-color: var(--ew-accent);
box-shadow:
  0 0 0 5px color-mix(in srgb, var(--ew-accent) 12%, transparent),
  0 0 30px color-mix(in srgb, var(--ew-accent) 32%, transparent);
animation: seal-strike 0.6s var(--ew-ease-spring) both;
596}
verdict-seal.is-loss {
color: var(--ew-faint);
border-color: var(--ew-line);
box-shadow: inset 0 0 0 4px
  color-mix(in srgb, var(--ew-faint) 8%, transparent);
602}
603 
604@keyframes seal-strike {
0% {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
}
60% {
  transform: scale(1.12) rotate(3deg);
}
100% {
  opacity: 1;
  transform: scale(1) rotate(0);
}
616}
617@media (prefers-reduced-motion: reduce) {
.verdict-seal.is-win {
  animation: none;
}
621}
622</style>

Settled: the same <h4> and <p> classes. The two now render identically.

components/EndGameScreen.vue · 622 lines

components/EndGameScreen.vue622 lines · Vue

⋯ 161 lines hidden (lines 1–161)1<template>
<div
  v-if="
    gameStore.gameStatus === 'victory' || gameStore.gameStatus === 'defeat'
  "
  ref="dialogRef"
  data-testid="end-game-screen"
  role="dialog"
  aria-modal="true"
  :aria-labelledby="headingId"
  class="end-screen fixed inset-0 z-50 overflow-y-auto"
  :class="isVictory ? 'end--win' : 'end--loss'"
  @keydown="onKeydown"
>
  <div class="max-w-4xl mx-auto px-5 py-8">
    <!-- Verdict masthead: a struck seal, the verdict, the objective + final %. The
         win is illuminated (glowing terracotta seal, serif verdict in ink); the loss
         is somber (a flat, cold seal and a muted verdict) — the two read apart instantly. -->
    <div class="text-center border-b ew-line pb-6">
      <div
        class="verdict-seal"
        :class="isVictory ? 'is-win' : 'is-loss'"
        aria-hidden="true"
      >
        {{ isVictory ? "✦" : "⊘" }}
      </div>
      <h2
        v-if="isVictory"
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="victory-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-fg mt-3 outline-none"
      >
        History Rewritten
      </h2>
      <h2
        v-else
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="defeat-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-muted mt-3 outline-none"
      >
        The Timeline Held
      </h2>
      <p
        class="text-sm mt-2.5 flex items-center justify-center gap-2 flex-wrap"
      >
        <span class="ew-muted inline-flex items-center gap-1.5">
          <span aria-hidden="true">{{
            gameStore.currentObjective?.icon
          }}</span>
          <strong data-testid="objective-title" class="font-semibold">{{
            gameStore.currentObjective?.title || "Historical Mission"
          }}</strong>
        </span>
        <span class="ew-hair-c" aria-hidden="true">·</span>
        <span
          class="ew-mono font-bold"
          :class="isVictory ? 'ew-ok' : 'ew-bad'"
        >
          <span data-testid="final-progress"
            >{{ gameStore.objectiveProgress }}%</span
          >
          rewritten
        </span>
      </p>
69 
      <RemixCreditLine
        v-if="remixCredit"
        :credit="remixCredit"
        class="mt-2.5"
      />
75 
      <p
        v-if="!isVictory"
        data-testid="defeat-explanation"
        class="ew-muted text-sm mt-3 max-w-prose mx-auto"
      >
        Your five messages are spent. What you changed remains — but it was
        not enough, and the objective slipped away.
      </p>
84 
      <div
        v-if="victoryEfficiency"
        data-testid="efficiency-display"
        class="mt-3 ew-mono text-sm"
      >
        <span class="ew-ok font-semibold">{{ victoryPhrase }}</span>
        <span class="ew-muted">
          · {{ victoryEfficiency.messagesUsed }}/{{
            TOTAL_MESSAGES
          }}
          used<span v-if="victoryEfficiency.messagesSaved > 0">
            · {{ victoryEfficiency.messagesSaved }} saved</span
          ></span
        >
        <span v-if="victoryEfficiency.isEarlyVictory" class="ew-ok">
          · 🌟 to spare</span
        >
      </div>
    </div>
104 
    <!-- The Chronicle's final telling — the epilogue. While the terminal telling is
         still being written (epiloguePending), we show the "final account…" wait, NOT
         the prior turn's stale, pre-ending telling. When it lands it cross-fades in
         (mirroring Chronicle.vue's rewrite reveal); a failed final refresh clears
         pending and falls back to the prior telling, so the panel never hangs. -->
    <div
      v-if="chronicle || epiloguePending"
      data-testid="end-chronicle"
      class="mt-6"
    >
      <span class="ew-label ew-label--rule"
        ><span aria-hidden="true">📖</span> The Chronicle</span
      >
      <Transition :name="epilogueTransition" mode="out-in">
        <!-- The final account being WRITTEN — the SAME titled article as the settled
             epilogue below, parsed from the live stream so it already wears its final
             shape (full width, titled heading, separated paragraphs); an ink cursor
             marks the writing tip. Nothing relayouts when the telling lands. Mirrors
             Chronicle.vue's live view via the shared parser in utils/chronicle.ts. -->
        <article
          v-if="epiloguePending && streamingNow"
          key="epilogue-streaming"
          data-testid="end-chronicle-streaming"
          aria-busy="true"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ liveEpilogue.title
            }}<span
              v-if="!liveEpilogue.paragraphs.length"
              class="ink-cursor"
              aria-hidden="true"
            />
          </h4>
          <p
            v-for="(para, i) in liveEpilogue.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para
            }}<span
              v-if="i === liveEpilogue.paragraphs.length - 1"
              class="ink-cursor"
              aria-hidden="true"
            />
          </p>
        </article>
        <div
          v-else-if="epiloguePending"
          key="epilogue-loading"
          data-testid="end-chronicle-loading"
          class="ew-faint italic text-sm"
        >
          The chronicler sets down the final account…
        </div>
        <article
          v-else-if="chronicle"
          key="epilogue-body"
          data-testid="end-chronicle-body"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ chronicle.title }}
          </h4>
          <p
            v-for="(para, i) in chronicle.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para }}
          </p>
        </article>
⋯ 442 lines hidden (lines 181–622)181        </Transition>
    </div>
183 
    <!-- The words you sent — the keepsake: your actual messages into the past -->
    <div v-if="dispatches.length" data-testid="dispatches" class="mt-7">
      <span class="ew-label ew-label--rule">The words you sent</span>
      <ul class="space-y-3.5">
        <li v-for="(d, i) in dispatches" :key="i">
          <p class="ew-label">
            to {{ d.figure }}<span v-if="d.era"> · {{ d.era }}</span>
          </p>
          <blockquote
            class="ew-serif ew-fg text-base leading-relaxed border-l-2 ew-line pl-3 mt-1"
          >
            "{{ d.text }}"
          </blockquote>
        </li>
      </ul>
    </div>
200 
    <!-- Stats — derived from the real resolved turns -->
    <div data-testid="game-summary" class="mt-7">
      <span class="ew-label ew-label--rule">How it played out</span>
      <div class="flex flex-wrap gap-10">
        <!-- "Peaked at X%" — shown only when the run slipped from its high point
             (the peak sits above the floored final %). The case it exists for is a
             staked last dispatch that crit-fails to 0% from a real peak, where the
             final % alone reads "as if you did nothing" (#129). A clean win never
             shows it: its peak IS the final 100%. -->
        <div v-if="showPeak" data-testid="peak-progress">
          <div class="ew-mono text-3xl font-extrabold ew-accent leading-none">
            {{ gameStore.peakProgress }}%
          </div>
          <div class="ew-label mt-1">peaked at</div>
        </div>
        <div data-testid="message-efficiency">
          <div class="ew-mono text-3xl font-extrabold ew-fg leading-none">
            {{ messagesUsed }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed === 1 ? "message" : "messages" }} sent
          </div>
        </div>
        <div v-if="gameSummary.bestRoll" data-testid="best-roll">
          <div class="ew-mono text-3xl font-extrabold ew-ok leading-none">
            {{ gameSummary.bestRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed >= 2 ? "best roll" : "the roll that did it" }} ·
            {{ gameSummary.bestRoll.diceOutcome }}
          </div>
        </div>
        <div
          v-if="gameSummary.worstRoll && messagesUsed >= 2"
          data-testid="worst-roll"
        >
          <div class="ew-mono text-3xl font-extrabold ew-bad leading-none">
            {{ gameSummary.worstRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            worst roll · {{ gameSummary.worstRoll.diceOutcome }}
          </div>
        </div>
        <!-- The run's luck read (#129's sibling, issue #165): how the DICE themselves
             ran — the natural d20s, before any craft tilt — against their 10.5 mean.
             It names a variance-driven loss as cold dice, not bad skill. Shown once
             there are ≥2 rolls to read "overall" (a lone roll is already "the roll
             that did it" above). The number borrows the same red/green/ink the
             best/worst stats use; the tooltip carries the below-median detail. -->
        <div
          v-if="gameSummary.luck"
          data-testid="luck-read"
          :title="luckTitle"
        >
          <div
            class="ew-mono text-3xl font-extrabold leading-none"
            :class="luckClass"
          >
            {{ gameSummary.luck.averageRoll.toFixed(1) }}
          </div>
          <div class="ew-label mt-1">
            avg vs {{ gameSummary.luck.expectedRoll }} · {{ luckPhrase }}
          </div>
        </div>
      </div>
    </div>
267 
    <!-- The history you wrote — the Spine itself, exactly as it filled in during
         the run. Read-only here: no live "▷ now" present marker, no "the timeline
         trembles…" empty state. Same component the player scrolled and tapped on
         the board, so the verdict's history reads as richly as it did in play —
         valence dots, ⚡/⚑ badges, the roll, and the Δ equation all carry over. -->
    <div v-if="timeline.length > 0" class="mt-6">
      <TimelineLedger readonly />
    </div>
276 
    <!-- Share this run (issue #88) — once the snapshot is durably saved. Proud of the
         rewrite? Post it: the public page, the unfurl, the share card. -->
    <div v-if="canShare" class="mt-8">
      <ShareControls :run-id="shareRunId" :share-text="shareText" />
    </div>
282 
    <div class="mt-9 border-t ew-line pt-6 flex items-center gap-3 flex-wrap">
      <button
        ref="playAgainRef"
        type="button"
        data-testid="play-again-button"
        class="ew-btn ew-btn--primary"
        @click="playAgain"
      >
        Try a new timeline <span aria-hidden="true">▷</span>
      </button>
      <!-- The finished run just joined your saved-runs history, so the end screen
           offers an obvious way to reach it: a secondary button beside the primary
           "Try a new timeline" (the button-styled /runs link mirrors the
           retrospective's "Back to your runs", pages/runs/[id].vue), carrying the ◷
           glyph and "Your runs" wording from the account popover (RunsBalance.vue). -->
      <NuxtLink
        to="/runs"
        data-testid="end-your-runs-link"
        class="ew-btn inline-flex items-center gap-1.5"
      >
        <span aria-hidden="true">◷</span> Your runs
      </NuxtLink>
      <span class="ew-faint text-xs inline-flex items-center gap-1.5">
        <span
          class="ew-dot"
          :class="isVictory ? 'ew-dot--ok' : 'ew-dot--bad'"
          aria-hidden="true"
        />
        this timeline is written.
      </span>
    </div>
  </div>
</div>
316</template>
317 
318<script setup lang="ts">
319/**
* EndGameScreen — the mission debrief. A full-bleed takeover (not a modal card):
* verdict line, the Chronicle epilogue + big-number stat trio, and the history you
* wrote. All stats derive from the real resolved turns.
*/
324import { ref, computed, watch, nextTick } from "vue";
325import { TOTAL_MESSAGES } from "~/utils/game-config";
326import { useGameStore } from "~/stores/game";
327import { useChronicleStore } from "~/stores/chronicle";
328import { usePrefersReducedMotion } from "~/composables/usePrefersReducedMotion";
329import { buildShareText, type RemixCredit } from "~/utils/run-snapshot";
330import { parseLiveChronicle } from "~/utils/chronicle";
331 
332const gameStore = useGameStore();
333const chronicleStore = useChronicleStore();
334 
335// When this run is a replay (issue #89), the "remixed from" credit, from the live seed —
336// shown on the end screen the moment the replay resolves. The title is omitted (the
337// objective is already in the masthead above), so it reads "Remixed from <source>".
338const remixCredit = computed<RemixCredit | null>(() =>
gameStore.replayState
  ? {
      attribution: gameStore.replayState.sourceAttribution,
      objectiveTitle: "",
      sourceToken: gameStore.replayState.sourceToken,
    }
  : null,
346);
347const reduced = usePrefersReducedMotion();
348 
349const headingId = `end-game-heading-${Math.random().toString(36).slice(2, 11)}`;
350 
351// Modal focus management: it's a true takeover (aria-modal), so when it opens we
352// move focus to the VERDICT heading (tabindex=-1: announced, focusable, outside
353// the Tab cycle), trap Tab inside, and restore focus when the run ends. Focusing
354// the heading — not the bottom Play Again button — also means the screen opens at
355// the top: the verdict and the Chronicle epilogue are the first things seen, not
356// scrolled past below the fold.
357const dialogRef = ref<HTMLElement | null>(null);
358const headingRef = ref<HTMLElement | null>(null);
359const playAgainRef = ref<HTMLElement | null>(null);
360let prevFocus: HTMLElement | null = null;
361 
362watch(
() => gameStore.gameStatus,
async (s) => {
  if (typeof document === "undefined") return;
  if (s === "victory" || s === "defeat") {
    prevFocus = document.activeElement as HTMLElement | null;
    await nextTick();
    if (dialogRef.value) dialogRef.value.scrollTop = 0;
    headingRef.value?.focus();
  } else if (prevFocus) {
    prevFocus.focus?.();
    prevFocus = null;
  }
},
376);
377 
378function onKeydown(e: KeyboardEvent) {
if (e.key !== "Tab" || !dialogRef.value) return;
const focusables = dialogRef.value.querySelectorAll<HTMLElement>(
  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])',
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;
if (e.shiftKey && active === first) {
  e.preventDefault();
  last.focus();
} else if (!e.shiftKey && active === last) {
  e.preventDefault();
  first.focus();
}
394}
395 
396const isVictory = computed(() => gameStore.gameStatus === "victory");
397const victoryEfficiency = computed(() => gameStore.getVictoryEfficiency());
398 
399// The verdict never deflates: spending every message is reframed as "Hard-won," not
400// the limp "Standard." Only the laudatory tiers keep their rating as an adjective.
401const victoryPhrase = computed(() => {
const rating = victoryEfficiency.value?.efficiencyRating;
if (!rating) return "Victory";
return rating === "Standard" ? "Hard-won victory" : `${rating} victory`;
405});
406const messagesUsed = computed(
() => TOTAL_MESSAGES - gameStore.remainingMessages,
408);
409const gameSummary = computed(() => gameStore.gameSummary);
410 
411// The luck read's styling + phrasing (#165). Cold dice borrow the loss red, hot dice
412// the win green, an even run the neutral ink — the same at-a-glance colour language
413// as the best/worst-roll stats beside it. The phrasing stays honest: it names "the
414// dice," never the player's craft. The tooltip adds the below-median detail the
415// compact label leaves out.
416const luckClass = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold" ? "ew-bad" : v === "hot" ? "ew-ok" : "ew-fg";
419});
420const luckPhrase = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold"
  ? "the dice ran cold"
  : v === "hot"
    ? "the dice ran hot"
    : "the dice ran even";
427});
428const luckTitle = computed(() => {
const l = gameSummary.value.luck;
if (!l) return undefined;
return `The dice ran ${l.verdict}: your rolls averaged ${l.averageRoll.toFixed(1)} vs ${l.expectedRoll} expected, ${l.belowMedianCount} of ${l.rollCount} below the median.`;
432});
433 
434// "Peaked at X%" surfaces only when the run lost ground from its high-water mark —
435// the peak above the final %. The case it answers is a staked last dispatch that
436// crit-fails to 0% from a real peak, where the floored final % alone would read "as
437// if the player did nothing" (#129). A clean win never shows it (peak === final 100%).
438const showPeak = computed(
() => gameStore.peakProgress > gameStore.objectiveProgress,
440);
441 
442// Share affordance (issue #88): only for a run that's been durably saved (so there's a
443// server-side record to make public). `canShare` true ⟹ runId is a real saved uuid.
444const canShare = computed(
() => gameStore.runSnapshotSaved && !!gameStore.runId,
446);
447const shareRunId = computed(() => gameStore.runId ?? "");
448const shareText = computed(() =>
buildShareText(
  gameStore.currentObjective?.title ?? "",
  isVictory.value ? "victory" : "defeat",
  gameStore.objectiveProgress,
),
454);
455const timeline = computed(() => gameStore.timelineEvents);
456const chronicle = computed(() => chronicleStore.chronicle);
457// The epilogue (terminal telling) is still being written — show the wait, never the
458// prior turn's stale telling. The cross-fade mirrors Chronicle.vue and is dropped
459// under prefers-reduced-motion (the empty name disables the Transition's classes).
460const epiloguePending = computed(() => chronicleStore.epiloguePending);
461const epilogueTransition = computed(() => (reduced.value ? "" : "epilogue"));
462// The epilogue is being written right now — show the live buffer (only when its
463// stream narrates the live ledger, never a superseded prior stream).
464const streamingNow = computed(
() =>
  chronicleStore.chronicleStreaming &&
  chronicleStore.chronicleStreamLen === gameStore.timelineEvents.length &&
  chronicleStore.chronicleStream.length > 0,
469);
470// The epilogue mid-stream, parsed into the settled {title, paragraphs} shape so the
471// live account already wears its final form — full width, titled heading, separated
472// paragraphs — and nothing relayouts when the terminal telling lands. Same parser and
473// intent as Chronicle.vue's live view (utils/chronicle.ts).
474const liveEpilogue = computed(() =>
parseLiveChronicle(chronicleStore.chronicleStream),
476);
477 
478// The keepsake: the player's verbatim messages, paired with whom/when they reached.
479const dispatches = computed(() => {
const users = gameStore.messageHistory.filter((m) => m.sender === "user");
const events = gameStore.timelineEvents;
return users.map((m, i) => ({
  text: m.text,
  figure: m.figureName || events[i]?.figureName || "the past",
  era: events[i]?.era || "",
}));
487});
488 
489// The page owns the FULL reset (store + figure input + composer), so Play Again
490// emits instead of resetting the store directly — the two reset paths used to
491// diverge here, leaving the previous run's figure stranded in the input.
492const emit = defineEmits<{ "play-again": [] }>();
493const playAgain = () => {
emit("play-again");
495};
496</script>
497 
498<style scoped>
499/* The epilogue reveal — the terminal telling cross-fades in over the "final account…"
 wait, the same gentle opacity fade Chronicle.vue uses for a rewrite. Gated by the
 transition NAME (empty under prefers-reduced-motion), so reduced-motion gets an
 instant swap with no classes attached. */
epilogue-enter-active,
epilogue-leave-active {
transition: opacity var(--ew-dur-3) var(--ew-ease);
506}
epilogue-enter-from,
epilogue-leave-to {
opacity: 0;
510}
511 
512/* The epilogue being written — an ink cursor at the writing tip (the prose itself
 reuses the settled telling's serif article, so it needs no separate type styling). */
ink-cursor {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--ew-accent);
animation: ink-blink 1s steps(2, start) infinite;
522}
523@keyframes ink-blink {
0%,
100% {
  opacity: 1;
}
50% {
  opacity: 0;
}
531}
532@media (prefers-reduced-motion: reduce) {
.ink-cursor {
  animation: none;
  opacity: 0.7;
}
537}
538 
539/* Win and loss share the page frame but not its mood. The win is illuminated — a warm
 wash blooms from the top; the loss is a colder, dimmer ground that has settled back. */
end-screen {
background: var(--ew-bg);
animation: end-in var(--ew-dur-3) var(--ew-ease) both;
544}
545@keyframes end-in {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
552}
553@media (prefers-reduced-motion: reduce) {
.end-screen {
  animation: none;
}
557}
end--win {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-accent) 13%, transparent),
    transparent 68%
  ),
  var(--ew-bg);
566}
end--loss {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-bad) 6%, transparent),
    transparent 60%
  ),
  var(--ew-bg);
575}
576 
577/* The struck seal — the verdict's emblem. The win seal glows like fresh sealing wax;
 the loss seal is a cold, flat stamp. */
verdict-seal {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
font-size: 1.6rem;
line-height: 1;
588}
verdict-seal.is-win {
color: var(--ew-accent);
border-color: var(--ew-accent);
box-shadow:
  0 0 0 5px color-mix(in srgb, var(--ew-accent) 12%, transparent),
  0 0 30px color-mix(in srgb, var(--ew-accent) 32%, transparent);
animation: seal-strike 0.6s var(--ew-ease-spring) both;
596}
verdict-seal.is-loss {
color: var(--ew-faint);
border-color: var(--ew-line);
box-shadow: inset 0 0 0 4px
  color-mix(in srgb, var(--ew-faint) 8%, transparent);
602}
603 
604@keyframes seal-strike {
0% {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
}
60% {
  transform: scale(1.12) rotate(3deg);
}
100% {
  opacity: 1;
  transform: scale(1) rotate(0);
}
616}
617@media (prefers-reduced-motion: reduce) {
.verdict-seal.is-win {
  animation: none;
}
621}
622</style>

Parsing the live buffer the same way it settles

liveEpilogue parses the raw stream with parseLiveChronicle into the settled {title, paragraphs} shape the template iterates. It sits right beside streamingNow, the guard that already decided this buffer is the live one (its length matches the current ledger).

streamingNow gates the branch; liveEpilogue gives it the parsed shape.

components/EndGameScreen.vue · 622 lines

components/EndGameScreen.vue622 lines · Vue

⋯ 463 lines hidden (lines 1–463)1<template>
<div
  v-if="
    gameStore.gameStatus === 'victory' || gameStore.gameStatus === 'defeat'
  "
  ref="dialogRef"
  data-testid="end-game-screen"
  role="dialog"
  aria-modal="true"
  :aria-labelledby="headingId"
  class="end-screen fixed inset-0 z-50 overflow-y-auto"
  :class="isVictory ? 'end--win' : 'end--loss'"
  @keydown="onKeydown"
>
  <div class="max-w-4xl mx-auto px-5 py-8">
    <!-- Verdict masthead: a struck seal, the verdict, the objective + final %. The
         win is illuminated (glowing terracotta seal, serif verdict in ink); the loss
         is somber (a flat, cold seal and a muted verdict) — the two read apart instantly. -->
    <div class="text-center border-b ew-line pb-6">
      <div
        class="verdict-seal"
        :class="isVictory ? 'is-win' : 'is-loss'"
        aria-hidden="true"
      >
        {{ isVictory ? "✦" : "⊘" }}
      </div>
      <h2
        v-if="isVictory"
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="victory-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-fg mt-3 outline-none"
      >
        History Rewritten
      </h2>
      <h2
        v-else
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="defeat-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-muted mt-3 outline-none"
      >
        The Timeline Held
      </h2>
      <p
        class="text-sm mt-2.5 flex items-center justify-center gap-2 flex-wrap"
      >
        <span class="ew-muted inline-flex items-center gap-1.5">
          <span aria-hidden="true">{{
            gameStore.currentObjective?.icon
          }}</span>
          <strong data-testid="objective-title" class="font-semibold">{{
            gameStore.currentObjective?.title || "Historical Mission"
          }}</strong>
        </span>
        <span class="ew-hair-c" aria-hidden="true">·</span>
        <span
          class="ew-mono font-bold"
          :class="isVictory ? 'ew-ok' : 'ew-bad'"
        >
          <span data-testid="final-progress"
            >{{ gameStore.objectiveProgress }}%</span
          >
          rewritten
        </span>
      </p>
69 
      <RemixCreditLine
        v-if="remixCredit"
        :credit="remixCredit"
        class="mt-2.5"
      />
75 
      <p
        v-if="!isVictory"
        data-testid="defeat-explanation"
        class="ew-muted text-sm mt-3 max-w-prose mx-auto"
      >
        Your five messages are spent. What you changed remains — but it was
        not enough, and the objective slipped away.
      </p>
84 
      <div
        v-if="victoryEfficiency"
        data-testid="efficiency-display"
        class="mt-3 ew-mono text-sm"
      >
        <span class="ew-ok font-semibold">{{ victoryPhrase }}</span>
        <span class="ew-muted">
          · {{ victoryEfficiency.messagesUsed }}/{{
            TOTAL_MESSAGES
          }}
          used<span v-if="victoryEfficiency.messagesSaved > 0">
            · {{ victoryEfficiency.messagesSaved }} saved</span
          ></span
        >
        <span v-if="victoryEfficiency.isEarlyVictory" class="ew-ok">
          · 🌟 to spare</span
        >
      </div>
    </div>
104 
    <!-- The Chronicle's final telling — the epilogue. While the terminal telling is
         still being written (epiloguePending), we show the "final account…" wait, NOT
         the prior turn's stale, pre-ending telling. When it lands it cross-fades in
         (mirroring Chronicle.vue's rewrite reveal); a failed final refresh clears
         pending and falls back to the prior telling, so the panel never hangs. -->
    <div
      v-if="chronicle || epiloguePending"
      data-testid="end-chronicle"
      class="mt-6"
    >
      <span class="ew-label ew-label--rule"
        ><span aria-hidden="true">📖</span> The Chronicle</span
      >
      <Transition :name="epilogueTransition" mode="out-in">
        <!-- The final account being WRITTEN — the SAME titled article as the settled
             epilogue below, parsed from the live stream so it already wears its final
             shape (full width, titled heading, separated paragraphs); an ink cursor
             marks the writing tip. Nothing relayouts when the telling lands. Mirrors
             Chronicle.vue's live view via the shared parser in utils/chronicle.ts. -->
        <article
          v-if="epiloguePending && streamingNow"
          key="epilogue-streaming"
          data-testid="end-chronicle-streaming"
          aria-busy="true"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ liveEpilogue.title
            }}<span
              v-if="!liveEpilogue.paragraphs.length"
              class="ink-cursor"
              aria-hidden="true"
            />
          </h4>
          <p
            v-for="(para, i) in liveEpilogue.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para
            }}<span
              v-if="i === liveEpilogue.paragraphs.length - 1"
              class="ink-cursor"
              aria-hidden="true"
            />
          </p>
        </article>
        <div
          v-else-if="epiloguePending"
          key="epilogue-loading"
          data-testid="end-chronicle-loading"
          class="ew-faint italic text-sm"
        >
          The chronicler sets down the final account…
        </div>
        <article
          v-else-if="chronicle"
          key="epilogue-body"
          data-testid="end-chronicle-body"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ chronicle.title }}
          </h4>
          <p
            v-for="(para, i) in chronicle.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para }}
          </p>
        </article>
      </Transition>
    </div>
183 
    <!-- The words you sent — the keepsake: your actual messages into the past -->
    <div v-if="dispatches.length" data-testid="dispatches" class="mt-7">
      <span class="ew-label ew-label--rule">The words you sent</span>
      <ul class="space-y-3.5">
        <li v-for="(d, i) in dispatches" :key="i">
          <p class="ew-label">
            to {{ d.figure }}<span v-if="d.era"> · {{ d.era }}</span>
          </p>
          <blockquote
            class="ew-serif ew-fg text-base leading-relaxed border-l-2 ew-line pl-3 mt-1"
          >
            "{{ d.text }}"
          </blockquote>
        </li>
      </ul>
    </div>
200 
    <!-- Stats — derived from the real resolved turns -->
    <div data-testid="game-summary" class="mt-7">
      <span class="ew-label ew-label--rule">How it played out</span>
      <div class="flex flex-wrap gap-10">
        <!-- "Peaked at X%" — shown only when the run slipped from its high point
             (the peak sits above the floored final %). The case it exists for is a
             staked last dispatch that crit-fails to 0% from a real peak, where the
             final % alone reads "as if you did nothing" (#129). A clean win never
             shows it: its peak IS the final 100%. -->
        <div v-if="showPeak" data-testid="peak-progress">
          <div class="ew-mono text-3xl font-extrabold ew-accent leading-none">
            {{ gameStore.peakProgress }}%
          </div>
          <div class="ew-label mt-1">peaked at</div>
        </div>
        <div data-testid="message-efficiency">
          <div class="ew-mono text-3xl font-extrabold ew-fg leading-none">
            {{ messagesUsed }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed === 1 ? "message" : "messages" }} sent
          </div>
        </div>
        <div v-if="gameSummary.bestRoll" data-testid="best-roll">
          <div class="ew-mono text-3xl font-extrabold ew-ok leading-none">
            {{ gameSummary.bestRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed >= 2 ? "best roll" : "the roll that did it" }} ·
            {{ gameSummary.bestRoll.diceOutcome }}
          </div>
        </div>
        <div
          v-if="gameSummary.worstRoll && messagesUsed >= 2"
          data-testid="worst-roll"
        >
          <div class="ew-mono text-3xl font-extrabold ew-bad leading-none">
            {{ gameSummary.worstRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            worst roll · {{ gameSummary.worstRoll.diceOutcome }}
          </div>
        </div>
        <!-- The run's luck read (#129's sibling, issue #165): how the DICE themselves
             ran — the natural d20s, before any craft tilt — against their 10.5 mean.
             It names a variance-driven loss as cold dice, not bad skill. Shown once
             there are ≥2 rolls to read "overall" (a lone roll is already "the roll
             that did it" above). The number borrows the same red/green/ink the
             best/worst stats use; the tooltip carries the below-median detail. -->
        <div
          v-if="gameSummary.luck"
          data-testid="luck-read"
          :title="luckTitle"
        >
          <div
            class="ew-mono text-3xl font-extrabold leading-none"
            :class="luckClass"
          >
            {{ gameSummary.luck.averageRoll.toFixed(1) }}
          </div>
          <div class="ew-label mt-1">
            avg vs {{ gameSummary.luck.expectedRoll }} · {{ luckPhrase }}
          </div>
        </div>
      </div>
    </div>
267 
    <!-- The history you wrote — the Spine itself, exactly as it filled in during
         the run. Read-only here: no live "▷ now" present marker, no "the timeline
         trembles…" empty state. Same component the player scrolled and tapped on
         the board, so the verdict's history reads as richly as it did in play —
         valence dots, ⚡/⚑ badges, the roll, and the Δ equation all carry over. -->
    <div v-if="timeline.length > 0" class="mt-6">
      <TimelineLedger readonly />
    </div>
276 
    <!-- Share this run (issue #88) — once the snapshot is durably saved. Proud of the
         rewrite? Post it: the public page, the unfurl, the share card. -->
    <div v-if="canShare" class="mt-8">
      <ShareControls :run-id="shareRunId" :share-text="shareText" />
    </div>
282 
    <div class="mt-9 border-t ew-line pt-6 flex items-center gap-3 flex-wrap">
      <button
        ref="playAgainRef"
        type="button"
        data-testid="play-again-button"
        class="ew-btn ew-btn--primary"
        @click="playAgain"
      >
        Try a new timeline <span aria-hidden="true">▷</span>
      </button>
      <!-- The finished run just joined your saved-runs history, so the end screen
           offers an obvious way to reach it: a secondary button beside the primary
           "Try a new timeline" (the button-styled /runs link mirrors the
           retrospective's "Back to your runs", pages/runs/[id].vue), carrying the ◷
           glyph and "Your runs" wording from the account popover (RunsBalance.vue). -->
      <NuxtLink
        to="/runs"
        data-testid="end-your-runs-link"
        class="ew-btn inline-flex items-center gap-1.5"
      >
        <span aria-hidden="true">◷</span> Your runs
      </NuxtLink>
      <span class="ew-faint text-xs inline-flex items-center gap-1.5">
        <span
          class="ew-dot"
          :class="isVictory ? 'ew-dot--ok' : 'ew-dot--bad'"
          aria-hidden="true"
        />
        this timeline is written.
      </span>
    </div>
  </div>
</div>
316</template>
317 
318<script setup lang="ts">
319/**
* EndGameScreen — the mission debrief. A full-bleed takeover (not a modal card):
* verdict line, the Chronicle epilogue + big-number stat trio, and the history you
* wrote. All stats derive from the real resolved turns.
*/
324import { ref, computed, watch, nextTick } from "vue";
325import { TOTAL_MESSAGES } from "~/utils/game-config";
326import { useGameStore } from "~/stores/game";
327import { useChronicleStore } from "~/stores/chronicle";
328import { usePrefersReducedMotion } from "~/composables/usePrefersReducedMotion";
329import { buildShareText, type RemixCredit } from "~/utils/run-snapshot";
330import { parseLiveChronicle } from "~/utils/chronicle";
331 
332const gameStore = useGameStore();
333const chronicleStore = useChronicleStore();
334 
335// When this run is a replay (issue #89), the "remixed from" credit, from the live seed —
336// shown on the end screen the moment the replay resolves. The title is omitted (the
337// objective is already in the masthead above), so it reads "Remixed from <source>".
338const remixCredit = computed<RemixCredit | null>(() =>
gameStore.replayState
  ? {
      attribution: gameStore.replayState.sourceAttribution,
      objectiveTitle: "",
      sourceToken: gameStore.replayState.sourceToken,
    }
  : null,
346);
347const reduced = usePrefersReducedMotion();
348 
349const headingId = `end-game-heading-${Math.random().toString(36).slice(2, 11)}`;
350 
351// Modal focus management: it's a true takeover (aria-modal), so when it opens we
352// move focus to the VERDICT heading (tabindex=-1: announced, focusable, outside
353// the Tab cycle), trap Tab inside, and restore focus when the run ends. Focusing
354// the heading — not the bottom Play Again button — also means the screen opens at
355// the top: the verdict and the Chronicle epilogue are the first things seen, not
356// scrolled past below the fold.
357const dialogRef = ref<HTMLElement | null>(null);
358const headingRef = ref<HTMLElement | null>(null);
359const playAgainRef = ref<HTMLElement | null>(null);
360let prevFocus: HTMLElement | null = null;
361 
362watch(
() => gameStore.gameStatus,
async (s) => {
  if (typeof document === "undefined") return;
  if (s === "victory" || s === "defeat") {
    prevFocus = document.activeElement as HTMLElement | null;
    await nextTick();
    if (dialogRef.value) dialogRef.value.scrollTop = 0;
    headingRef.value?.focus();
  } else if (prevFocus) {
    prevFocus.focus?.();
    prevFocus = null;
  }
},
376);
377 
378function onKeydown(e: KeyboardEvent) {
if (e.key !== "Tab" || !dialogRef.value) return;
const focusables = dialogRef.value.querySelectorAll<HTMLElement>(
  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])',
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;
if (e.shiftKey && active === first) {
  e.preventDefault();
  last.focus();
} else if (!e.shiftKey && active === last) {
  e.preventDefault();
  first.focus();
}
394}
395 
396const isVictory = computed(() => gameStore.gameStatus === "victory");
397const victoryEfficiency = computed(() => gameStore.getVictoryEfficiency());
398 
399// The verdict never deflates: spending every message is reframed as "Hard-won," not
400// the limp "Standard." Only the laudatory tiers keep their rating as an adjective.
401const victoryPhrase = computed(() => {
const rating = victoryEfficiency.value?.efficiencyRating;
if (!rating) return "Victory";
return rating === "Standard" ? "Hard-won victory" : `${rating} victory`;
405});
406const messagesUsed = computed(
() => TOTAL_MESSAGES - gameStore.remainingMessages,
408);
409const gameSummary = computed(() => gameStore.gameSummary);
410 
411// The luck read's styling + phrasing (#165). Cold dice borrow the loss red, hot dice
412// the win green, an even run the neutral ink — the same at-a-glance colour language
413// as the best/worst-roll stats beside it. The phrasing stays honest: it names "the
414// dice," never the player's craft. The tooltip adds the below-median detail the
415// compact label leaves out.
416const luckClass = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold" ? "ew-bad" : v === "hot" ? "ew-ok" : "ew-fg";
419});
420const luckPhrase = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold"
  ? "the dice ran cold"
  : v === "hot"
    ? "the dice ran hot"
    : "the dice ran even";
427});
428const luckTitle = computed(() => {
const l = gameSummary.value.luck;
if (!l) return undefined;
return `The dice ran ${l.verdict}: your rolls averaged ${l.averageRoll.toFixed(1)} vs ${l.expectedRoll} expected, ${l.belowMedianCount} of ${l.rollCount} below the median.`;
432});
433 
434// "Peaked at X%" surfaces only when the run lost ground from its high-water mark —
435// the peak above the final %. The case it answers is a staked last dispatch that
436// crit-fails to 0% from a real peak, where the floored final % alone would read "as
437// if the player did nothing" (#129). A clean win never shows it (peak === final 100%).
438const showPeak = computed(
() => gameStore.peakProgress > gameStore.objectiveProgress,
440);
441 
442// Share affordance (issue #88): only for a run that's been durably saved (so there's a
443// server-side record to make public). `canShare` true ⟹ runId is a real saved uuid.
444const canShare = computed(
() => gameStore.runSnapshotSaved && !!gameStore.runId,
446);
447const shareRunId = computed(() => gameStore.runId ?? "");
448const shareText = computed(() =>
buildShareText(
  gameStore.currentObjective?.title ?? "",
  isVictory.value ? "victory" : "defeat",
  gameStore.objectiveProgress,
),
454);
455const timeline = computed(() => gameStore.timelineEvents);
456const chronicle = computed(() => chronicleStore.chronicle);
457// The epilogue (terminal telling) is still being written — show the wait, never the
458// prior turn's stale telling. The cross-fade mirrors Chronicle.vue and is dropped
459// under prefers-reduced-motion (the empty name disables the Transition's classes).
460const epiloguePending = computed(() => chronicleStore.epiloguePending);
461const epilogueTransition = computed(() => (reduced.value ? "" : "epilogue"));
462// The epilogue is being written right now — show the live buffer (only when its
463// stream narrates the live ledger, never a superseded prior stream).
464const streamingNow = computed(
() =>
  chronicleStore.chronicleStreaming &&
  chronicleStore.chronicleStreamLen === gameStore.timelineEvents.length &&
  chronicleStore.chronicleStream.length > 0,
469);
470// The epilogue mid-stream, parsed into the settled {title, paragraphs} shape so the
471// live account already wears its final form — full width, titled heading, separated
472// paragraphs — and nothing relayouts when the terminal telling lands. Same parser and
473// intent as Chronicle.vue's live view (utils/chronicle.ts).
474const liveEpilogue = computed(() =>
parseLiveChronicle(chronicleStore.chronicleStream),
476);
⋯ 146 lines hidden (lines 477–622)477 
478// The keepsake: the player's verbatim messages, paired with whom/when they reached.
479const dispatches = computed(() => {
const users = gameStore.messageHistory.filter((m) => m.sender === "user");
const events = gameStore.timelineEvents;
return users.map((m, i) => ({
  text: m.text,
  figure: m.figureName || events[i]?.figureName || "the past",
  era: events[i]?.era || "",
}));
487});
488 
489// The page owns the FULL reset (store + figure input + composer), so Play Again
490// emits instead of resetting the store directly — the two reset paths used to
491// diverge here, leaving the previous run's figure stranded in the input.
492const emit = defineEmits<{ "play-again": [] }>();
493const playAgain = () => {
emit("play-again");
495};
496</script>
497 
498<style scoped>
499/* The epilogue reveal — the terminal telling cross-fades in over the "final account…"
 wait, the same gentle opacity fade Chronicle.vue uses for a rewrite. Gated by the
 transition NAME (empty under prefers-reduced-motion), so reduced-motion gets an
 instant swap with no classes attached. */
epilogue-enter-active,
epilogue-leave-active {
transition: opacity var(--ew-dur-3) var(--ew-ease);
506}
epilogue-enter-from,
epilogue-leave-to {
opacity: 0;
510}
511 
512/* The epilogue being written — an ink cursor at the writing tip (the prose itself
 reuses the settled telling's serif article, so it needs no separate type styling). */
ink-cursor {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--ew-accent);
animation: ink-blink 1s steps(2, start) infinite;
522}
523@keyframes ink-blink {
0%,
100% {
  opacity: 1;
}
50% {
  opacity: 0;
}
531}
532@media (prefers-reduced-motion: reduce) {
.ink-cursor {
  animation: none;
  opacity: 0.7;
}
537}
538 
539/* Win and loss share the page frame but not its mood. The win is illuminated — a warm
 wash blooms from the top; the loss is a colder, dimmer ground that has settled back. */
end-screen {
background: var(--ew-bg);
animation: end-in var(--ew-dur-3) var(--ew-ease) both;
544}
545@keyframes end-in {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
552}
553@media (prefers-reduced-motion: reduce) {
.end-screen {
  animation: none;
}
557}
end--win {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-accent) 13%, transparent),
    transparent 68%
  ),
  var(--ew-bg);
566}
end--loss {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-bad) 6%, transparent),
    transparent 60%
  ),
  var(--ew-bg);
575}
576 
577/* The struck seal — the verdict's emblem. The win seal glows like fresh sealing wax;
 the loss seal is a cold, flat stamp. */
verdict-seal {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
font-size: 1.6rem;
line-height: 1;
588}
verdict-seal.is-win {
color: var(--ew-accent);
border-color: var(--ew-accent);
box-shadow:
  0 0 0 5px color-mix(in srgb, var(--ew-accent) 12%, transparent),
  0 0 30px color-mix(in srgb, var(--ew-accent) 32%, transparent);
animation: seal-strike 0.6s var(--ew-ease-spring) both;
596}
verdict-seal.is-loss {
color: var(--ew-faint);
border-color: var(--ew-line);
box-shadow: inset 0 0 0 4px
  color-mix(in srgb, var(--ew-faint) 8%, transparent);
602}
603 
604@keyframes seal-strike {
0% {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
}
60% {
  transform: scale(1.12) rotate(3deg);
}
100% {
  opacity: 1;
  transform: scale(1) rotate(0);
}
616}
617@media (prefers-reduced-motion: reduce) {
.verdict-seal.is-win {
  animation: none;
}
621}
622</style>

The one new import — the shared client-safe parser.

components/EndGameScreen.vue · 622 lines

components/EndGameScreen.vue622 lines · Vue

⋯ 329 lines hidden (lines 1–329)1<template>
<div
  v-if="
    gameStore.gameStatus === 'victory' || gameStore.gameStatus === 'defeat'
  "
  ref="dialogRef"
  data-testid="end-game-screen"
  role="dialog"
  aria-modal="true"
  :aria-labelledby="headingId"
  class="end-screen fixed inset-0 z-50 overflow-y-auto"
  :class="isVictory ? 'end--win' : 'end--loss'"
  @keydown="onKeydown"
>
  <div class="max-w-4xl mx-auto px-5 py-8">
    <!-- Verdict masthead: a struck seal, the verdict, the objective + final %. The
         win is illuminated (glowing terracotta seal, serif verdict in ink); the loss
         is somber (a flat, cold seal and a muted verdict) — the two read apart instantly. -->
    <div class="text-center border-b ew-line pb-6">
      <div
        class="verdict-seal"
        :class="isVictory ? 'is-win' : 'is-loss'"
        aria-hidden="true"
      >
        {{ isVictory ? "✦" : "⊘" }}
      </div>
      <h2
        v-if="isVictory"
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="victory-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-fg mt-3 outline-none"
      >
        History Rewritten
      </h2>
      <h2
        v-else
        :id="headingId"
        ref="headingRef"
        tabindex="-1"
        data-testid="defeat-message"
        class="ew-serif text-3xl sm:text-4xl font-bold ew-muted mt-3 outline-none"
      >
        The Timeline Held
      </h2>
      <p
        class="text-sm mt-2.5 flex items-center justify-center gap-2 flex-wrap"
      >
        <span class="ew-muted inline-flex items-center gap-1.5">
          <span aria-hidden="true">{{
            gameStore.currentObjective?.icon
          }}</span>
          <strong data-testid="objective-title" class="font-semibold">{{
            gameStore.currentObjective?.title || "Historical Mission"
          }}</strong>
        </span>
        <span class="ew-hair-c" aria-hidden="true">·</span>
        <span
          class="ew-mono font-bold"
          :class="isVictory ? 'ew-ok' : 'ew-bad'"
        >
          <span data-testid="final-progress"
            >{{ gameStore.objectiveProgress }}%</span
          >
          rewritten
        </span>
      </p>
69 
      <RemixCreditLine
        v-if="remixCredit"
        :credit="remixCredit"
        class="mt-2.5"
      />
75 
      <p
        v-if="!isVictory"
        data-testid="defeat-explanation"
        class="ew-muted text-sm mt-3 max-w-prose mx-auto"
      >
        Your five messages are spent. What you changed remains — but it was
        not enough, and the objective slipped away.
      </p>
84 
      <div
        v-if="victoryEfficiency"
        data-testid="efficiency-display"
        class="mt-3 ew-mono text-sm"
      >
        <span class="ew-ok font-semibold">{{ victoryPhrase }}</span>
        <span class="ew-muted">
          · {{ victoryEfficiency.messagesUsed }}/{{
            TOTAL_MESSAGES
          }}
          used<span v-if="victoryEfficiency.messagesSaved > 0">
            · {{ victoryEfficiency.messagesSaved }} saved</span
          ></span
        >
        <span v-if="victoryEfficiency.isEarlyVictory" class="ew-ok">
          · 🌟 to spare</span
        >
      </div>
    </div>
104 
    <!-- The Chronicle's final telling — the epilogue. While the terminal telling is
         still being written (epiloguePending), we show the "final account…" wait, NOT
         the prior turn's stale, pre-ending telling. When it lands it cross-fades in
         (mirroring Chronicle.vue's rewrite reveal); a failed final refresh clears
         pending and falls back to the prior telling, so the panel never hangs. -->
    <div
      v-if="chronicle || epiloguePending"
      data-testid="end-chronicle"
      class="mt-6"
    >
      <span class="ew-label ew-label--rule"
        ><span aria-hidden="true">📖</span> The Chronicle</span
      >
      <Transition :name="epilogueTransition" mode="out-in">
        <!-- The final account being WRITTEN — the SAME titled article as the settled
             epilogue below, parsed from the live stream so it already wears its final
             shape (full width, titled heading, separated paragraphs); an ink cursor
             marks the writing tip. Nothing relayouts when the telling lands. Mirrors
             Chronicle.vue's live view via the shared parser in utils/chronicle.ts. -->
        <article
          v-if="epiloguePending && streamingNow"
          key="epilogue-streaming"
          data-testid="end-chronicle-streaming"
          aria-busy="true"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ liveEpilogue.title
            }}<span
              v-if="!liveEpilogue.paragraphs.length"
              class="ink-cursor"
              aria-hidden="true"
            />
          </h4>
          <p
            v-for="(para, i) in liveEpilogue.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para
            }}<span
              v-if="i === liveEpilogue.paragraphs.length - 1"
              class="ink-cursor"
              aria-hidden="true"
            />
          </p>
        </article>
        <div
          v-else-if="epiloguePending"
          key="epilogue-loading"
          data-testid="end-chronicle-loading"
          class="ew-faint italic text-sm"
        >
          The chronicler sets down the final account…
        </div>
        <article
          v-else-if="chronicle"
          key="epilogue-body"
          data-testid="end-chronicle-body"
        >
          <h4
            data-testid="end-chronicle-title"
            class="ew-serif text-xl font-semibold ew-fg mb-2.5 leading-tight"
          >
            {{ chronicle.title }}
          </h4>
          <p
            v-for="(para, i) in chronicle.paragraphs"
            :key="i"
            class="ew-serif ew-muted text-[15px] leading-relaxed mb-2.5 last:mb-0"
          >
            {{ para }}
          </p>
        </article>
      </Transition>
    </div>
183 
    <!-- The words you sent — the keepsake: your actual messages into the past -->
    <div v-if="dispatches.length" data-testid="dispatches" class="mt-7">
      <span class="ew-label ew-label--rule">The words you sent</span>
      <ul class="space-y-3.5">
        <li v-for="(d, i) in dispatches" :key="i">
          <p class="ew-label">
            to {{ d.figure }}<span v-if="d.era"> · {{ d.era }}</span>
          </p>
          <blockquote
            class="ew-serif ew-fg text-base leading-relaxed border-l-2 ew-line pl-3 mt-1"
          >
            "{{ d.text }}"
          </blockquote>
        </li>
      </ul>
    </div>
200 
    <!-- Stats — derived from the real resolved turns -->
    <div data-testid="game-summary" class="mt-7">
      <span class="ew-label ew-label--rule">How it played out</span>
      <div class="flex flex-wrap gap-10">
        <!-- "Peaked at X%" — shown only when the run slipped from its high point
             (the peak sits above the floored final %). The case it exists for is a
             staked last dispatch that crit-fails to 0% from a real peak, where the
             final % alone reads "as if you did nothing" (#129). A clean win never
             shows it: its peak IS the final 100%. -->
        <div v-if="showPeak" data-testid="peak-progress">
          <div class="ew-mono text-3xl font-extrabold ew-accent leading-none">
            {{ gameStore.peakProgress }}%
          </div>
          <div class="ew-label mt-1">peaked at</div>
        </div>
        <div data-testid="message-efficiency">
          <div class="ew-mono text-3xl font-extrabold ew-fg leading-none">
            {{ messagesUsed }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed === 1 ? "message" : "messages" }} sent
          </div>
        </div>
        <div v-if="gameSummary.bestRoll" data-testid="best-roll">
          <div class="ew-mono text-3xl font-extrabold ew-ok leading-none">
            {{ gameSummary.bestRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            {{ messagesUsed >= 2 ? "best roll" : "the roll that did it" }} ·
            {{ gameSummary.bestRoll.diceOutcome }}
          </div>
        </div>
        <div
          v-if="gameSummary.worstRoll && messagesUsed >= 2"
          data-testid="worst-roll"
        >
          <div class="ew-mono text-3xl font-extrabold ew-bad leading-none">
            {{ gameSummary.worstRoll.diceRoll }}
          </div>
          <div class="ew-label mt-1">
            worst roll · {{ gameSummary.worstRoll.diceOutcome }}
          </div>
        </div>
        <!-- The run's luck read (#129's sibling, issue #165): how the DICE themselves
             ran — the natural d20s, before any craft tilt — against their 10.5 mean.
             It names a variance-driven loss as cold dice, not bad skill. Shown once
             there are ≥2 rolls to read "overall" (a lone roll is already "the roll
             that did it" above). The number borrows the same red/green/ink the
             best/worst stats use; the tooltip carries the below-median detail. -->
        <div
          v-if="gameSummary.luck"
          data-testid="luck-read"
          :title="luckTitle"
        >
          <div
            class="ew-mono text-3xl font-extrabold leading-none"
            :class="luckClass"
          >
            {{ gameSummary.luck.averageRoll.toFixed(1) }}
          </div>
          <div class="ew-label mt-1">
            avg vs {{ gameSummary.luck.expectedRoll }} · {{ luckPhrase }}
          </div>
        </div>
      </div>
    </div>
267 
    <!-- The history you wrote — the Spine itself, exactly as it filled in during
         the run. Read-only here: no live "▷ now" present marker, no "the timeline
         trembles…" empty state. Same component the player scrolled and tapped on
         the board, so the verdict's history reads as richly as it did in play —
         valence dots, ⚡/⚑ badges, the roll, and the Δ equation all carry over. -->
    <div v-if="timeline.length > 0" class="mt-6">
      <TimelineLedger readonly />
    </div>
276 
    <!-- Share this run (issue #88) — once the snapshot is durably saved. Proud of the
         rewrite? Post it: the public page, the unfurl, the share card. -->
    <div v-if="canShare" class="mt-8">
      <ShareControls :run-id="shareRunId" :share-text="shareText" />
    </div>
282 
    <div class="mt-9 border-t ew-line pt-6 flex items-center gap-3 flex-wrap">
      <button
        ref="playAgainRef"
        type="button"
        data-testid="play-again-button"
        class="ew-btn ew-btn--primary"
        @click="playAgain"
      >
        Try a new timeline <span aria-hidden="true">▷</span>
      </button>
      <!-- The finished run just joined your saved-runs history, so the end screen
           offers an obvious way to reach it: a secondary button beside the primary
           "Try a new timeline" (the button-styled /runs link mirrors the
           retrospective's "Back to your runs", pages/runs/[id].vue), carrying the ◷
           glyph and "Your runs" wording from the account popover (RunsBalance.vue). -->
      <NuxtLink
        to="/runs"
        data-testid="end-your-runs-link"
        class="ew-btn inline-flex items-center gap-1.5"
      >
        <span aria-hidden="true">◷</span> Your runs
      </NuxtLink>
      <span class="ew-faint text-xs inline-flex items-center gap-1.5">
        <span
          class="ew-dot"
          :class="isVictory ? 'ew-dot--ok' : 'ew-dot--bad'"
          aria-hidden="true"
        />
        this timeline is written.
      </span>
    </div>
  </div>
</div>
316</template>
317 
318<script setup lang="ts">
319/**
* EndGameScreen — the mission debrief. A full-bleed takeover (not a modal card):
* verdict line, the Chronicle epilogue + big-number stat trio, and the history you
* wrote. All stats derive from the real resolved turns.
*/
324import { ref, computed, watch, nextTick } from "vue";
325import { TOTAL_MESSAGES } from "~/utils/game-config";
326import { useGameStore } from "~/stores/game";
327import { useChronicleStore } from "~/stores/chronicle";
328import { usePrefersReducedMotion } from "~/composables/usePrefersReducedMotion";
329import { buildShareText, type RemixCredit } from "~/utils/run-snapshot";
330import { parseLiveChronicle } from "~/utils/chronicle";
⋯ 292 lines hidden (lines 331–622)331 
332const gameStore = useGameStore();
333const chronicleStore = useChronicleStore();
334 
335// When this run is a replay (issue #89), the "remixed from" credit, from the live seed —
336// shown on the end screen the moment the replay resolves. The title is omitted (the
337// objective is already in the masthead above), so it reads "Remixed from <source>".
338const remixCredit = computed<RemixCredit | null>(() =>
gameStore.replayState
  ? {
      attribution: gameStore.replayState.sourceAttribution,
      objectiveTitle: "",
      sourceToken: gameStore.replayState.sourceToken,
    }
  : null,
346);
347const reduced = usePrefersReducedMotion();
348 
349const headingId = `end-game-heading-${Math.random().toString(36).slice(2, 11)}`;
350 
351// Modal focus management: it's a true takeover (aria-modal), so when it opens we
352// move focus to the VERDICT heading (tabindex=-1: announced, focusable, outside
353// the Tab cycle), trap Tab inside, and restore focus when the run ends. Focusing
354// the heading — not the bottom Play Again button — also means the screen opens at
355// the top: the verdict and the Chronicle epilogue are the first things seen, not
356// scrolled past below the fold.
357const dialogRef = ref<HTMLElement | null>(null);
358const headingRef = ref<HTMLElement | null>(null);
359const playAgainRef = ref<HTMLElement | null>(null);
360let prevFocus: HTMLElement | null = null;
361 
362watch(
() => gameStore.gameStatus,
async (s) => {
  if (typeof document === "undefined") return;
  if (s === "victory" || s === "defeat") {
    prevFocus = document.activeElement as HTMLElement | null;
    await nextTick();
    if (dialogRef.value) dialogRef.value.scrollTop = 0;
    headingRef.value?.focus();
  } else if (prevFocus) {
    prevFocus.focus?.();
    prevFocus = null;
  }
},
376);
377 
378function onKeydown(e: KeyboardEvent) {
if (e.key !== "Tab" || !dialogRef.value) return;
const focusables = dialogRef.value.querySelectorAll<HTMLElement>(
  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])',
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;
if (e.shiftKey && active === first) {
  e.preventDefault();
  last.focus();
} else if (!e.shiftKey && active === last) {
  e.preventDefault();
  first.focus();
}
394}
395 
396const isVictory = computed(() => gameStore.gameStatus === "victory");
397const victoryEfficiency = computed(() => gameStore.getVictoryEfficiency());
398 
399// The verdict never deflates: spending every message is reframed as "Hard-won," not
400// the limp "Standard." Only the laudatory tiers keep their rating as an adjective.
401const victoryPhrase = computed(() => {
const rating = victoryEfficiency.value?.efficiencyRating;
if (!rating) return "Victory";
return rating === "Standard" ? "Hard-won victory" : `${rating} victory`;
405});
406const messagesUsed = computed(
() => TOTAL_MESSAGES - gameStore.remainingMessages,
408);
409const gameSummary = computed(() => gameStore.gameSummary);
410 
411// The luck read's styling + phrasing (#165). Cold dice borrow the loss red, hot dice
412// the win green, an even run the neutral ink — the same at-a-glance colour language
413// as the best/worst-roll stats beside it. The phrasing stays honest: it names "the
414// dice," never the player's craft. The tooltip adds the below-median detail the
415// compact label leaves out.
416const luckClass = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold" ? "ew-bad" : v === "hot" ? "ew-ok" : "ew-fg";
419});
420const luckPhrase = computed(() => {
const v = gameSummary.value.luck?.verdict;
return v === "cold"
  ? "the dice ran cold"
  : v === "hot"
    ? "the dice ran hot"
    : "the dice ran even";
427});
428const luckTitle = computed(() => {
const l = gameSummary.value.luck;
if (!l) return undefined;
return `The dice ran ${l.verdict}: your rolls averaged ${l.averageRoll.toFixed(1)} vs ${l.expectedRoll} expected, ${l.belowMedianCount} of ${l.rollCount} below the median.`;
432});
433 
434// "Peaked at X%" surfaces only when the run lost ground from its high-water mark —
435// the peak above the final %. The case it answers is a staked last dispatch that
436// crit-fails to 0% from a real peak, where the floored final % alone would read "as
437// if the player did nothing" (#129). A clean win never shows it (peak === final 100%).
438const showPeak = computed(
() => gameStore.peakProgress > gameStore.objectiveProgress,
440);
441 
442// Share affordance (issue #88): only for a run that's been durably saved (so there's a
443// server-side record to make public). `canShare` true ⟹ runId is a real saved uuid.
444const canShare = computed(
() => gameStore.runSnapshotSaved && !!gameStore.runId,
446);
447const shareRunId = computed(() => gameStore.runId ?? "");
448const shareText = computed(() =>
buildShareText(
  gameStore.currentObjective?.title ?? "",
  isVictory.value ? "victory" : "defeat",
  gameStore.objectiveProgress,
),
454);
455const timeline = computed(() => gameStore.timelineEvents);
456const chronicle = computed(() => chronicleStore.chronicle);
457// The epilogue (terminal telling) is still being written — show the wait, never the
458// prior turn's stale telling. The cross-fade mirrors Chronicle.vue and is dropped
459// under prefers-reduced-motion (the empty name disables the Transition's classes).
460const epiloguePending = computed(() => chronicleStore.epiloguePending);
461const epilogueTransition = computed(() => (reduced.value ? "" : "epilogue"));
462// The epilogue is being written right now — show the live buffer (only when its
463// stream narrates the live ledger, never a superseded prior stream).
464const streamingNow = computed(
() =>
  chronicleStore.chronicleStreaming &&
  chronicleStore.chronicleStreamLen === gameStore.timelineEvents.length &&
  chronicleStore.chronicleStream.length > 0,
469);
470// The epilogue mid-stream, parsed into the settled {title, paragraphs} shape so the
471// live account already wears its final form — full width, titled heading, separated
472// paragraphs — and nothing relayouts when the terminal telling lands. Same parser and
473// intent as Chronicle.vue's live view (utils/chronicle.ts).
474const liveEpilogue = computed(() =>
parseLiveChronicle(chronicleStore.chronicleStream),
476);
477 
478// The keepsake: the player's verbatim messages, paired with whom/when they reached.
479const dispatches = computed(() => {
const users = gameStore.messageHistory.filter((m) => m.sender === "user");
const events = gameStore.timelineEvents;
return users.map((m, i) => ({
  text: m.text,
  figure: m.figureName || events[i]?.figureName || "the past",
  era: events[i]?.era || "",
}));
487});
488 
489// The page owns the FULL reset (store + figure input + composer), so Play Again
490// emits instead of resetting the store directly — the two reset paths used to
491// diverge here, leaving the previous run's figure stranded in the input.
492const emit = defineEmits<{ "play-again": [] }>();
493const playAgain = () => {
emit("play-again");
495};
496</script>
497 
498<style scoped>
499/* The epilogue reveal — the terminal telling cross-fades in over the "final account…"
 wait, the same gentle opacity fade Chronicle.vue uses for a rewrite. Gated by the
 transition NAME (empty under prefers-reduced-motion), so reduced-motion gets an
 instant swap with no classes attached. */
epilogue-enter-active,
epilogue-leave-active {
transition: opacity var(--ew-dur-3) var(--ew-ease);
506}
epilogue-enter-from,
epilogue-leave-to {
opacity: 0;
510}
511 
512/* The epilogue being written — an ink cursor at the writing tip (the prose itself
 reuses the settled telling's serif article, so it needs no separate type styling). */
ink-cursor {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: text-bottom;
background: var(--ew-accent);
animation: ink-blink 1s steps(2, start) infinite;
522}
523@keyframes ink-blink {
0%,
100% {
  opacity: 1;
}
50% {
  opacity: 0;
}
531}
532@media (prefers-reduced-motion: reduce) {
.ink-cursor {
  animation: none;
  opacity: 0.7;
}
537}
538 
539/* Win and loss share the page frame but not its mood. The win is illuminated — a warm
 wash blooms from the top; the loss is a colder, dimmer ground that has settled back. */
end-screen {
background: var(--ew-bg);
animation: end-in var(--ew-dur-3) var(--ew-ease) both;
544}
545@keyframes end-in {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
552}
553@media (prefers-reduced-motion: reduce) {
.end-screen {
  animation: none;
}
557}
end--win {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-accent) 13%, transparent),
    transparent 68%
  ),
  var(--ew-bg);
566}
end--loss {
background:
  radial-gradient(
    135% 70% at 50% -12%,
    color-mix(in srgb, var(--ew-bad) 6%, transparent),
    transparent 60%
  ),
  var(--ew-bg);
575}
576 
577/* The struck seal — the verdict's emblem. The win seal glows like fresh sealing wax;
 the loss seal is a cold, flat stamp. */
verdict-seal {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid;
font-size: 1.6rem;
line-height: 1;
588}
verdict-seal.is-win {
color: var(--ew-accent);
border-color: var(--ew-accent);
box-shadow:
  0 0 0 5px color-mix(in srgb, var(--ew-accent) 12%, transparent),
  0 0 30px color-mix(in srgb, var(--ew-accent) 32%, transparent);
animation: seal-strike 0.6s var(--ew-ease-spring) both;
596}
verdict-seal.is-loss {
color: var(--ew-faint);
border-color: var(--ew-line);
box-shadow: inset 0 0 0 4px
  color-mix(in srgb, var(--ew-faint) 8%, transparent);
602}
603 
604@keyframes seal-strike {
0% {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
}
60% {
  transform: scale(1.12) rotate(3deg);
}
100% {
  opacity: 1;
  transform: scale(1) rotate(0);
}
616}
617@media (prefers-reduced-motion: reduce) {
.verdict-seal.is-win {
  animation: none;
}
621}
622</style>

The test, and how it was verified

A new case drives the streaming state and asserts the fixed shape: a titled heading, its text present, the body split into its own paragraph elements, and the old narrow .end-chronicle-live view absent. It fails on the pre-fix markup (which had no title element and one blob paragraph), so it discriminates the fix.

Streaming now renders the settled shape — titled heading, separated paragraphs, no raw blob.

tests/unit/components/EndGameScreen.spec.ts · 453 lines

tests/unit/components/EndGameScreen.spec.ts453 lines · TypeScript

⋯ 153 lines hidden (lines 1–153)1import { mount } from "@vue/test-utils";
2import { describe, it, expect, beforeEach } from "vitest";
3import { setActivePinia, createPinia } from "pinia";
4import EndGameScreen from "../../../components/EndGameScreen.vue";
5import { useGameStore } from "../../../stores/game";
6import { useChronicleStore } from "../../../stores/chronicle";
7import { DiceOutcome } from "../../../utils/dice";
8import type { GameObjective } from "../../../server/utils/objectives";
9import type { Message } from "../../../stores/game";
10 
11const OBJ: GameObjective = {
title: "Reach the Moon by 1900",
description: "Leave Earth half a century early.",
era: "19th century",
icon: "🚀",
16};
17 
18function resolvedTurn(
diceRoll: number,
diceOutcome: DiceOutcome,
progressChange: number,
naturalRoll?: number,
23): Message {
return {
  text: "reply",
  sender: "ai",
  figureName: "Tesla",
  timestamp: new Date(),
  diceRoll,
  diceOutcome,
  progressChange,
  naturalRoll,
  timelineImpact: "history shifts",
};
35}
36function prompt(): Message {
return {
  text: "prompt",
  sender: "user",
  figureName: "Tesla",
  timestamp: new Date(),
};
43}
44 
45// NuxtLink can't resolve RouterLink under a bare @vue/test-utils mount, so stub it
46// per-mount to a plain anchor (href ← `to`): the footer "Your runs" link is the only
47// NuxtLink here, so this keeps every mount free of the resolve warning and lets the
48// link's text/href be asserted directly. (The real render is covered by the e2e.)
49const mountEnd = () =>
mount(EndGameScreen, {
  global: {
    stubs: {
      NuxtLink: { props: ["to"], template: '<a :href="to"><slot /></a>' },
    },
  },
});
57 
58describe("EndGameScreen", () => {
let gameStore: ReturnType<typeof useGameStore>;
let chronicleStore: ReturnType<typeof useChronicleStore>;
61 
beforeEach(() => {
  setActivePinia(createPinia());
  gameStore = useGameStore();
  chronicleStore = useChronicleStore();
});
67 
describe("Victory", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
    gameStore.objectiveProgress = 100;
    gameStore.currentObjective = OBJ;
    gameStore.remainingMessages = 2;
  });
75 
  it("shows a victory headline", () => {
    const v = mountEnd().find('[data-testid="victory-message"]');
    expect(v.exists()).toBe(true);
    expect(v.text()).toContain("History Rewritten");
  });
81 
  it("shows the objective and final progress", () => {
    const w = mountEnd();
    expect(w.find('[data-testid="objective-title"]').text()).toContain(
      "Reach the Moon by 1900",
    );
    expect(w.find('[data-testid="final-progress"]').text()).toContain("100%");
  });
89 
  it("shows efficiency with messages saved", () => {
    const e = mountEnd().find('[data-testid="efficiency-display"]');
    expect(e.exists()).toBe(true);
    expect(e.text()).toContain("saved");
  });
});
96 
describe("Defeat", () => {
  beforeEach(() => {
    gameStore.gameStatus = "defeat";
    gameStore.objectiveProgress = 45;
    gameStore.currentObjective = OBJ;
    gameStore.remainingMessages = 0;
  });
104 
  it("shows a defeat headline", () => {
    const d = mountEnd().find('[data-testid="defeat-message"]');
    expect(d.exists()).toBe(true);
    expect(d.text()).toContain("Timeline Held");
  });
110 
  it("shows final progress below 100%", () => {
    expect(
      mountEnd().find('[data-testid="final-progress"]').text(),
    ).toContain("45%");
  });
116 
  it("explains the loss", () => {
    expect(
      mountEnd().find('[data-testid="defeat-explanation"]').exists(),
    ).toBe(true);
  });
});
123 
// The epilogue is the run's payoff — the terminal telling that carries the verdict.
// While it's still being written we must never present the prior turn's stale,
// pre-ending telling as the epilogue (issue #107).
describe("The Chronicle epilogue — pending, reveal, and fallback", () => {
  const stale = {
    title: "Mid-run Telling",
    paragraphs: ["the world as it stood a turn ago"],
  };
  const epilogue = {
    title: "The World Remade",
    paragraphs: ["and so the timeline was rewritten"],
  };
136 
  beforeEach(() => {
    gameStore.gameStatus = "victory";
    gameStore.currentObjective = OBJ;
  });
141 
  it('shows the "final account" wait while the epilogue is pending — not the stale prior telling', () => {
    chronicleStore.chronicle = stale; // a stale, pre-ending telling is still held
    chronicleStore.epiloguePending = true; // the terminal refresh is in flight
    const w = mount(EndGameScreen);
    expect(w.find('[data-testid="end-chronicle-loading"]').exists()).toBe(
      true,
    );
    // The prior-turn telling must NOT be presented as the epilogue.
    expect(w.find('[data-testid="end-chronicle-body"]').exists()).toBe(false);
    expect(w.text()).not.toContain("Mid-run Telling");
  });
153 
  it("streams the epilogue in the settled shape — a titled heading and separated paragraphs, not a raw half-width blob", () => {
    // While the terminal telling is still being written, the live buffer must render
    // in the SAME shape as the settled epilogue (parsed title + paragraphs) so it reads
    // at full width in prose type and nothing relayouts when it lands — the old raw
    // pre-wrap view was capped at ~half width. Mirrors Chronicle.vue's live view.
    chronicleStore.epiloguePending = true;
    chronicleStore.chronicleStreaming = true;
    // streamLen === timelineEvents.length (both 0 here) marks this as the live stream.
    chronicleStore.chronicleStreamLen = 0;
    chronicleStore.chronicleStream =
      "The World Remade\n\nAnd so the timeline was rewritten.\n\nThe age turned on it.";
    const w = mount(EndGameScreen);
    const streaming = w.find('[data-testid="end-chronicle-streaming"]');
    expect(streaming.exists()).toBe(true);
    expect(
      streaming.find('[data-testid="end-chronicle-title"]').text(),
    ).toContain("The World Remade");
    // The body is split into its own paragraph elements, not one pre-wrapped blob.
    expect(streaming.findAll("p").length).toBe(2);
    // The old narrow (max-width: 64ch) raw-stream view is gone.
    expect(streaming.find(".end-chronicle-live").exists()).toBe(false);
  });
⋯ 278 lines hidden (lines 176–453)176 
  it("reveals the epilogue once the terminal telling lands", () => {
    chronicleStore.chronicle = epilogue;
    chronicleStore.epiloguePending = false;
    const w = mount(EndGameScreen);
    expect(w.find('[data-testid="end-chronicle-loading"]').exists()).toBe(
      false,
    );
    expect(w.find('[data-testid="end-chronicle-body"]').exists()).toBe(true);
    expect(w.find('[data-testid="end-chronicle-title"]').text()).toContain(
      "The World Remade",
    );
  });
189 
  it("falls back to the prior telling if the final refresh failed — never stuck on loading", () => {
    // refreshChronicle keeps the prior telling on failure and clears pending.
    chronicleStore.chronicle = stale;
    chronicleStore.epiloguePending = false;
    const w = mount(EndGameScreen);
    expect(w.find('[data-testid="end-chronicle-loading"]').exists()).toBe(
      false,
    );
    expect(w.find('[data-testid="end-chronicle-body"]').exists()).toBe(true);
    expect(w.find('[data-testid="end-chronicle-title"]').text()).toContain(
      "Mid-run Telling",
    );
  });
});
204 
describe("Summary stats — derived from resolved AI turns", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
    gameStore.remainingMessages = 3; // 2 used
    gameStore.messageHistory = [
      prompt(),
      resolvedTurn(18, DiceOutcome.SUCCESS, 25),
      prompt(),
      resolvedTurn(20, DiceOutcome.CRITICAL_SUCCESS, 75),
    ];
  });
216 
  it("renders the summary block", () => {
    expect(mountEnd().find('[data-testid="game-summary"]').exists()).toBe(
      true,
    );
  });
222 
  it("highlights the best roll from the AI turns", () => {
    const best = mountEnd().find('[data-testid="best-roll"]');
    expect(best.exists()).toBe(true);
    expect(best.text()).toContain("20");
  });
228 
  it("highlights the worst roll from the AI turns", () => {
    gameStore.messageHistory[1] = resolvedTurn(
      2,
      DiceOutcome.CRITICAL_FAILURE,
      -10,
    );
    const worst = mountEnd().find('[data-testid="worst-roll"]');
    expect(worst.exists()).toBe(true);
    expect(worst.text()).toContain("2");
  });
239 
  it("shows the number of messages sent", () => {
    const eff = mountEnd().find('[data-testid="message-efficiency"]');
    expect(eff.exists()).toBe(true);
    expect(eff.text()).toContain("2");
  });
});
246 
// The run-level luck read (#165): names a variance-driven loss as cold dice, not
// bad skill. It reads the natural d20s before the craft tilt; with no naturalRoll on
// these fixtures it falls back to the effective roll (mirrors the real reveal).
describe("Luck read (#165) — the dice, not the craft", () => {
  beforeEach(() => {
    gameStore.gameStatus = "defeat";
    gameStore.objectiveProgress = 40;
    gameStore.remainingMessages = 3; // 2 used
  });
256 
  it("reads cold dice when the run rolled below the mean, in the loss red", () => {
    gameStore.messageHistory = [
      prompt(),
      resolvedTurn(4, DiceOutcome.FAILURE, -5),
      prompt(),
      resolvedTurn(6, DiceOutcome.FAILURE, -3),
    ];
    const tile = mountEnd().find('[data-testid="luck-read"]');
    expect(tile.exists()).toBe(true);
    expect(tile.find(".ew-mono").text()).toBe("5.0"); // (4 + 6) / 2, shown to one decimal
    expect(tile.text()).toContain("avg vs 10.5");
    expect(tile.text()).toContain("the dice ran cold");
    expect(tile.find(".ew-mono").classes()).toContain("ew-bad");
  });
271 
  it("reads the natural die at the render boundary, not the craft-tilted effective roll", () => {
    // Effective rolls (9, 11) would average 10 → even; the natural dice were cold.
    gameStore.messageHistory = [
      prompt(),
      resolvedTurn(9, DiceOutcome.NEUTRAL, 8, 4),
      prompt(),
      resolvedTurn(11, DiceOutcome.NEUTRAL, 8, 6),
    ];
    const tile = mountEnd().find('[data-testid="luck-read"]');
    expect(tile.find(".ew-mono").text()).toBe("5.0"); // (4 + 6) / 2, not (9 + 11) / 2 = 10
    expect(tile.text()).toContain("the dice ran cold");
  });
284 
  it("reads hot dice when the run rolled above the mean, in the win green", () => {
    gameStore.messageHistory = [
      prompt(),
      resolvedTurn(15, DiceOutcome.SUCCESS, 25),
      prompt(),
      resolvedTurn(18, DiceOutcome.SUCCESS, 30),
    ];
    const tile = mountEnd().find('[data-testid="luck-read"]');
    expect(tile.text()).toContain("16.5");
    expect(tile.text()).toContain("the dice ran hot");
    expect(tile.find(".ew-mono").classes()).toContain("ew-ok");
  });
297 
  it('stays hidden on a single roll — no "overall" read to give', () => {
    gameStore.messageHistory = [
      prompt(),
      resolvedTurn(15, DiceOutcome.SUCCESS, 20),
    ];
    expect(mountEnd().find('[data-testid="luck-read"]').exists()).toBe(false);
  });
});
306 
// A run that built progress then lost ground — classically a staked final dispatch
// that crit-failed to 0% — must not read "as if the player did nothing." The summary
// surfaces "peaked at X%" whenever the peak sits above the floored final % (#129).
describe("Peaked at X% — when a run loses ground", () => {
  it("shows the peak in the summary when the run slipped from its high point", () => {
    gameStore.gameStatus = "defeat";
    gameStore.objectiveProgress = 0; // a staked last dispatch crit-failed to nothing
    gameStore.peakProgress = 25; // but the run had really reached 25%
    const peak = mountEnd().find('[data-testid="peak-progress"]');
    expect(peak.exists()).toBe(true);
    expect(peak.text()).toContain("25%");
  });
319 
  it("stays hidden on a clean win, where the peak is the final 100%", () => {
    gameStore.gameStatus = "victory";
    gameStore.objectiveProgress = 100;
    gameStore.peakProgress = 100;
    expect(mountEnd().find('[data-testid="peak-progress"]').exists()).toBe(
      false,
    );
  });
});
329 
// The "history you wrote" renders through the shared Spine (TimelineLedger),
// not a bespoke list — so the verdict's history reads exactly like the in-game
// timeline (valence dots, badges, the Δ equation), per issue #84.
describe("The history you wrote — the shared Spine", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
    gameStore.addTimelineEvent({
      figureName: "Tesla",
      era: "1890s",
      headline: "The grid hums to life",
      detail: "Alternating current spreads.",
      diceRoll: 18,
      diceOutcome: DiceOutcome.SUCCESS,
      progressChange: 25,
    });
  });
346 
  it("renders via the shared TimelineLedger, not the old hand-rolled list", () => {
    const w = mountEnd();
    expect(w.find('[data-testid="timeline-ledger"]').exists()).toBe(true);
    expect(w.find('[data-testid="timeline-event"]').exists()).toBe(true);
    // The bespoke block folded into the Spine's testid.
    expect(w.find('[data-testid="final-timeline"]').exists()).toBe(false);
  });
354 
  it('renders the Spine read-only: no live "▷ now · your move" present marker', () => {
    expect(mountEnd().find(".spine-now").exists()).toBe(false);
  });
});
359 
// The Chronicle epilogue fills the full debrief column like its siblings (the
// dispatches / stats / timeline). It used to carry an inner max-w-[62ch] measure
// that read as ~2/3 width next to those full-width sections (#109).
describe("Chronicle epilogue", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
    chronicleStore.chronicle = {
      title: "The Library Stands",
      paragraphs: ["It did not burn."],
    };
  });
371 
  it("renders the epilogue body", () => {
    const body = mount(EndGameScreen).find(
      '[data-testid="end-chronicle-body"]',
    );
    expect(body.exists()).toBe(true);
    expect(body.text()).toContain("It did not burn.");
  });
379 
  it("fills the column — no max-w-[62ch] cap", () => {
    const body = mount(EndGameScreen).find(
      '[data-testid="end-chronicle-body"]',
    );
    expect(body.classes()).not.toContain("max-w-[62ch]");
  });
});
387 
describe("Play again", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
  });
392 
  it("offers a restart", () => {
    const btn = mountEnd().find('[data-testid="play-again-button"]');
    expect(btn.exists()).toBe(true);
    expect(btn.text()).toContain("new timeline");
  });
398 
  it("asks the page for the unified reset when clicked (it never resets the store itself)", async () => {
    const wrapper = mountEnd();
    await wrapper.find('[data-testid="play-again-button"]').trigger("click");
402 
    // The page owns the FULL reset (store + figure input + composer); the
    // old direct store reset left the previous run's figure in the input.
    expect(wrapper.emitted("play-again")).toHaveLength(1);
    expect(gameStore.gameStatus).toBe("victory"); // untouched by the component
  });
});
409 
// The finished run becomes part of the player's history, so the end screen
// surfaces the same "Your runs" affordance the retrospective side uses.
describe("Your runs link", () => {
  beforeEach(() => {
    gameStore.gameStatus = "victory";
  });
416 
  it("offers an obvious /runs link beside Play Again", () => {
    const link = mountEnd().find('[data-testid="end-your-runs-link"]');
    expect(link.exists()).toBe(true);
    expect(link.text()).toContain("Your runs");
    expect(link.attributes("href")).toContain("/runs");
  });
423 
  it("shows it on a loss too", () => {
    gameStore.gameStatus = "defeat";
    expect(
      mountEnd().find('[data-testid="end-your-runs-link"]').exists(),
    ).toBe(true);
  });
});
431 
describe("Edge cases", () => {
  it("handles a missing objective", () => {
    gameStore.gameStatus = "victory";
    gameStore.currentObjective = null;
    expect(() => mountEnd()).not.toThrow();
  });
438 
  it("does not render while still playing", () => {
    gameStore.gameStatus = "playing";
    expect(mountEnd().find('[data-testid="end-game-screen"]').exists()).toBe(
      false,
    );
  });
445 
  it("exposes dialog semantics", () => {
    gameStore.gameStatus = "victory";
    const screen = mountEnd().find('[data-testid="end-game-screen"]');
    expect(screen.attributes("role")).toBe("dialog");
    expect(screen.attributes("aria-labelledby")).toBeTruthy();
  });
});
453});