feat(call-to-play): retain terminal outcomes

Keep complete running and cancelled histories visible for fifteen minutes so
peers retain the roster, chat, and outcome long enough to understand what
happened. Compact them to terminal tombstones afterward without charging
settled calls against the active-history limit.

Model running and cancelled as durable read-only frontend states, exclude
them from active badges, prune retired raw events, and document the lifecycle.
Add peer scenario S49 to prove a late joiner reconstructs a terminal call with
its roster and chat intact.

Test Plan:
- just fmt
- just clippy
- just test
- just frontend-test
- just build
- just peer-cli-tests S48 S49
- python3 -m py_compile crates/lanspread-peer-cli/scripts/run_extended_scenarios.py
- git diff --cached --check

crates/lanspread-tauri-deno-ts/src/components/calltoplay/CallToPlayButton.tsx

@@ -1,4 +1,5 @@
 import { Icon } from '../Icon';
+import { activeCallCount } from '../../lib/callToPlay';
 import { Nomination } from '../../lib/types';
 
 interface Props {
@@ -7,7 +8,7 @@ interface Props {
 }
 
 export const CallToPlayButton = ({ nominations, onClick }: Props) => {
-    const activeCount = nominations.filter(nomination => nomination.state !== 'started').length;
+    const activeCount = activeCallCount(nominations);
     return (
         <button className="ctp-btn" onClick={onClick}>
             <Icon.flag />

crates/lanspread-tauri-deno-ts/src/components/calltoplay/CallToPlayOverlay.tsx

@@ -5,6 +5,7 @@ import { Modal } from '../Modal';
 import { CreateNominationForm } from './CreateNominationForm';
 import { NominationCard } from './NominationCard';
 import { CallToPlayActions } from '../../hooks/useCallToPlay';
+import { sortNominations } from '../../lib/callToPlay';
 import { Game, Nomination } from '../../lib/types';
 
 interface Props {
@@ -36,10 +37,7 @@ export const CallToPlayOverlay = ({
 }: Props) => {
     const [showCreate, setShowCreate] = useState(false);
     const gameById = new Map(games.map(game => [game.id, game]));
-    const sorted = [...nominations].sort((left, right) =>
-        Number(left.state === 'started') - Number(right.state === 'started')
-        || left.deadline - right.deadline
-    );
+    const sorted = sortNominations(nominations);
 
     return (
         <Modal onClose={onClose} className="ctp-modal">

crates/lanspread-tauri-deno-ts/src/components/calltoplay/CallToPlayTicker.tsx

@@ -22,6 +22,8 @@ interface Props {
 }
 
 const LABEL = {
+    running: 'Running',
+    cancelled: 'Cancelled',
     scheduled: 'Scheduled',
     call: 'Call to Play',
     soon: 'Starting soon',
@@ -29,7 +31,7 @@ const LABEL = {
     expired: 'Time’s up',
 } as const;
 
-type TickerStatus = Exclude<CallToPlayStatus, 'started'>;
+type TickerStatus = CallToPlayStatus;
 
 const RANK: Record<TickerStatus, number> = {
     expired: 0,
@@ -37,12 +39,12 @@ const RANK: Record<TickerStatus, number> = {
     soon: 2,
     call: 3,
     scheduled: 3,
+    running: 4,
+    cancelled: 4,
 };
 
-const tickerStatusOf = (nomination: Nomination, now: number): TickerStatus | null => {
-    const status = statusOf(nomination, now);
-    return status === 'started' ? null : status;
-};
+const tickerStatusOf = (nomination: Nomination, now: number): TickerStatus =>
+    statusOf(nomination, now);
 
 const MiniBubbles = ({ nomination, now }: { nomination: Nomination; now: number }) => {
     const entries = Object.entries(nomination.participants);
@@ -78,27 +80,37 @@ const MiniBubbles = ({ nomination, now }: { nomination: Nomination; now: number
 export const CallToPlayTicker = ({ nominations, games, accent, onOpen }: Props) => {
     const now = Date.now();
     const gameById = new Map(games.map(game => [game.id, game]));
-    const active = nominations.flatMap(nomination => {
-        const status = tickerStatusOf(nomination, now);
-        return status === null ? [] : [{ nomination, status }];
-    }).sort((left, right) =>
+    const rows = nominations.map(nomination => ({
+        nomination,
+        status: tickerStatusOf(nomination, now),
+    })).sort((left, right) =>
         RANK[left.status] - RANK[right.status]
         || left.nomination.deadline - right.nomination.deadline
     );
-    if (active.length === 0) return null;
+    if (rows.length === 0) return null;
 
     return (
         <div className="ctp-ticker-stack">
-            {active.map(({ nomination, status }) => {
+            {rows.map(({ nomination, status }) => {
                 const game = gameById.get(nomination.gameId);
                 const ready = readyCountOf(nomination, now);
                 const total = Object.keys(nomination.participants).length;
                 const remaining = Math.max(0, nomination.deadline - now);
                 const last = nomination.messages[nomination.messages.length - 1];
-                const count = status === 'scheduled'
+                const count = status === 'running' || status === 'cancelled'
+                    ? `${total} players`
+                    : status === 'scheduled'
                     ? `${total} in`
                     : `${ready}/${nomination.maxPlayers} ready`;
-                const time = status === 'ready'
+                const terminalElapsed = now - (nomination.terminalAt ?? now);
+                const terminalAge = terminalElapsed < 1_000
+                    ? 'just now'
+                    : `${formatCountdownShort(terminalElapsed)} ago`;
+                const time = status === 'running'
+                    ? `started ${terminalAge}`
+                    : status === 'cancelled'
+                    ? `cancelled ${terminalAge}`
+                    : status === 'ready'
                     ? 'waiting to start'
                     : status === 'expired'
                     ? `${formatCountdownShort(now - nomination.deadline)} ago · waiting for caller`

crates/lanspread-tauri-deno-ts/src/components/calltoplay/NominationCard.tsx

@@ -13,6 +13,7 @@ import {
     formatUntil,
     inCountOf,
     isReady,
+    isTerminal,
     phaseOf,
     readyCountOf,
     statusOf,
@@ -82,11 +83,13 @@ export const NominationCard = ({
     const isMe = myStatus !== undefined;
     const isCreator = nomination.creatorId === actorId;
     const isDone = nomination.state === 'done';
-    const isStarted = nomination.state === 'started';
+    const terminal = isTerminal(nomination);
+    const isRunning = nomination.state === 'running';
+    const isCancelled = nomination.state === 'cancelled';
     const isExpired = statusOf(nomination, now) === 'expired';
     const phase = phaseOf(nomination, now);
-    const isScheduled = phase === 'scheduled' && !isDone && !isStarted && !isExpired;
-    const isCheckin = phase === 'checkin' && !isDone && !isStarted && !isExpired;
+    const isScheduled = phase === 'scheduled' && !isDone && !terminal && !isExpired;
+    const isCheckin = phase === 'checkin' && !isDone && !terminal && !isExpired;
     const windowStart = nomination.scheduledFor === null
         ? nomination.createdAt
         : nomination.scheduledFor - CHECKIN_LEAD_MS;
@@ -101,8 +104,10 @@ export const NominationCard = ({
         : (game.installed_peer_count ?? game.peer_count) + (game.installed ? 1 : 0);
     const lanCount = Math.max(totalPeerCount + 1, installedCount);
 
-    const timer = isStarted
-        ? <div className="ctp-card-timer" data-urgency="off">Launching…</div>
+    const timer = isRunning
+        ? <div className="ctp-card-timer" data-urgency="off">Running</div>
+        : isCancelled
+        ? <div className="ctp-card-timer" data-urgency="off">Cancelled</div>
         : isExpired
         ? <div className="ctp-card-timer" data-urgency="high">Time’s up</div>
         : isDone
@@ -123,7 +128,9 @@ export const NominationCard = ({
         )
         : <div className="ctp-card-timer" data-urgency={urgency}>{formatCountdown(remaining)}</div>;
 
-    const rosterLabel = isScheduled
+    const rosterLabel = terminal
+        ? `${entries.length} players`
+        : isScheduled
         ? `${entries.length} in · up to ${nomination.maxPlayers} players`
         : isCheckin && inCount > 0
         ? `${readyCount}/${nomination.maxPlayers} ready · ${inCount} not checked in yet`
@@ -132,7 +139,7 @@ export const NominationCard = ({
     return (
         <div
             ref={cardRef}
-            className={`ctp-card ${isDone ? 'is-done' : ''} ${isExpired ? 'is-expired' : ''} ${isStarted ? 'is-started' : ''} ${isCheckin ? 'is-checkin' : ''} ${focused ? 'is-focused' : ''}`}
+            className={`ctp-card ${isDone ? 'is-done' : ''} ${isExpired ? 'is-expired' : ''} ${terminal ? 'is-terminal' : ''} ${isRunning ? 'is-running' : ''} ${isCancelled ? 'is-cancelled' : ''} ${isCheckin ? 'is-checkin' : ''} ${focused ? 'is-focused' : ''}`}
         >
             <div className="ctp-card-top">
                 <div className="ctp-card-cover">
@@ -168,10 +175,10 @@ export const NominationCard = ({
                     <div
                         className="ctp-progress-fill"
                         style={{
-                            width: `${isStarted || isDone ? 100 : percentage}%`,
-                            background: isExpired
+                            width: `${terminal || isDone ? 100 : percentage}%`,
+                            background: isExpired || isCancelled
                                 ? 'var(--danger)'
-                                : isStarted || isDone
+                                : terminal || isDone
                                 ? 'var(--ok)'
                                 : 'var(--accent)',
                         }}
@@ -211,11 +218,11 @@ export const NominationCard = ({
             <CtpChat
                 nomination={nomination}
                 actorId={actorId}
-                disabled={isStarted}
+                disabled={terminal}
                 onSend={text => actions.sendMessage(nomination.id, text)}
             />
 
-            {isCreator && !isStarted && (
+            {isCreator && !terminal && (
                 confirmCancel
                     ? (
                         <div className="ctp-cancel-confirm">
@@ -283,15 +290,19 @@ const CardActions = ({
     const isMe = myStatus !== undefined;
     const isCreator = nomination.creatorId === actorId;
     const isDone = nomination.state === 'done';
-    const isStarted = nomination.state === 'started';
+    const terminal = isTerminal(nomination);
     const isExpired = statusOf(nomination, now) === 'expired';
-    const scheduled = phaseOf(nomination, now) === 'scheduled' && !isDone && !isStarted;
+    const scheduled = phaseOf(nomination, now) === 'scheduled' && !isDone && !terminal;
     const readyCount = readyCountOf(nomination, now);
 
-    if (isStarted) {
+    if (terminal) {
         return (
-            <div className="ctp-note ctp-note-launch">
-                {game ? `Launching ${game.name}…` : 'The match is starting.'}
+            <div className="ctp-note">
+                {nomination.state === 'running'
+                    ? game
+                        ? `${game.name} is running.`
+                        : 'The match is running.'
+                    : 'This call was cancelled.'}
             </div>
         );
     }
@@ -331,7 +342,7 @@ const CardActions = ({
                         onClick={() => void actions.startNow(nomination.id).then(accepted => {
                             if (accepted && game) onLaunch(game);
                         })}
-                    ><Icon.play /><span>{game ? 'Start now' : 'Mark as started'}</span></button>
+                    ><Icon.play /><span>{game ? 'Start now' : 'Mark as running'}</span></button>
                     <button className="ghost-btn" onClick={() => actions.addTime(nomination.id)}>
                         Add 5 more minutes
                     </button>